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

从我所看到的来看,大多数时间输入字段都是其自身形式的一部分。例如,StackOverflow的搜索栏的形式为“搜索”,输入字段为“ q”。

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

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

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

基本上,我的问题归结为:

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

最佳答案

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

关于javascript - 如何不使用表格提交单个输入字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29502639/

10-12 06:47