'How to submit individual input field without form

Recently, I've been writing some Javascript that interacts with a page. As a part of this, I need to be able to submit an HTML input field.

From what I've seen, most of the time input fields are a part of their own form. For example, StackOverflow's search bar has the form "search" and input field "q".

However, on the particular page that I'm working with the input field does NOT have its own form. It is only a part of a greater form that encompasses many sections of the page.

I'm aware that you can submit forms by calling the .submit( ) method on the form. However, this does not appear to work for individual input fields.

I know that this input field can be submitted individually, because when you manually type text and press Enter it works. I have no issues with the input field, and I can easily change its value.

Basically, what my question boils down to is:

How can I submit an individual input field without calling form.submit( )?

Solution 1:^[1]

You can submit the field by using javascript:

Then the java function can submit the value: function someJSFunction(var event) { 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);
}

Code untested so needs some work :)

Solution 2:^[2]

You can make a post pretty easily with 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>

EDIT: json is not a requirement. I just put that in there because that's how I normally do it. You can definitely just send the value by itself.

Solution 3:^[3]

if you're sending only this input you can use 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);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Norbert van Nobelen
Solution 2	fischgeek
Solution 3	Omar Elawady

'How to submit individual input field without form

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]