Question

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

从我所看到的情况来看，大多数时候输入字段都是他们自己形式的一部分。例如，StackOverflow的搜索栏的格式为“搜索”，输入字段为“q”。

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

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

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

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

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

Answer 1

您可以使用javascript：

提交字段

然后java函数可以提交值： function someJSFunction（var event）{ var url =＆＃39; /saveValue.php' ;; var value =＆＃34; savethis =＆＃34; + 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);
}

代码未经测试，因此需要做一些工作：）

Answer 2

如果您只发送此输入，则可以使用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);

Answer 3

你可以用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不是必需的。我只是把它放在那里，因为那是我通常的做法。你绝对可以自己发送价值。

如何提交没有表单的单个输入字段

3 个答案: