如何在没有表单的情况下提交单个输入字段答案

【问题标题】：How to submit individual input field without form如何在没有表单的情况下提交单个输入字段
【发布时间】：2015-06-12 16:51:07
【问题描述】：

最近，我一直在编写一些与页面交互的 Javascript。作为其中的一部分，我需要能够提交 HTML 输入字段。

据我所知，大多数时候输入字段都是它们自己表单的一部分。例如，StackOverflow 的搜索栏具有“搜索”形式和输入字段“q”。

但是，在我正在使用输入字段的特定页面上，它没有自己的表单。它只是包含页面许多部分的更大表单的一部分。

我知道您可以通过在表单上调用 .submit( ) 方法来提交表单。但是，这似乎不适用于单个输入字段。

我知道这个输入字段可以单独提交，因为当您手动输入文本并按 Enter 时，它会起作用。我对输入字段没有任何问题，我可以轻松更改其值。

基本上，我的问题归结为：

如何在不调用 form.submit( ) 的情况下提交单个输入字段？

【问题讨论】：

你想提交它的父表单还是只提交它的值？
感谢您的快速回复。我只想提交单个输入字段的值，而不是整个表单。

标签： javascript input textfield

【解决方案1】：

您可以使用 jquery 轻松发布帖子。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {

                $('#btnSubmit').click(function() {
                    var inputVal = $('#inputField').val();
                    $.ajax
                    ({
                        type: "POST",
                        url: 'your_url_for_handling_post',
                        contentType: "application/json",
                        data: JSON.stringify({"Username":inputVal})
                    })
                    .done(function(data) {
                        console.log(data);
                    });
                });
            });
        </script>

    </head>
    <body>
        <input type='text' id='inputField' name='username' />
        <input type='submit' id='btnSubmit' value='Submit' />

        <!-- you can use any element to trigger the submit
        <div id='btnSubmit'>Submit</div>
        -->
    </body>
</html>

编辑：json 不是必需的。我只是把它放在那里，因为这就是我通常的做法。您绝对可以自己发送值。

【讨论】：

【解决方案2】：

您可以使用javascript提交字段：

那么java函数就可以提交值了：函数 someJSFunction(var 事件) { var url='/saveValue.php'; var value="savethis="+this.value;

        var request = new XMLHttpRequest();
        request.open('POST', url, true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

        request.send(params);
}

代码未经测试，所以需要一些工作:)

【讨论】：

【解决方案3】：

如果你只发送这个输入，你可以使用XMLHttpRequest():

var input = document.getElementById('inpputId');
var parameters=input.name+"="+input.value;
var http=new XMLHttpRequest();
http.open('POST','yourfile.php',true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onload=function(){
  //write code after receiving the content
}
http.send(parameters);

【讨论】：