How to submit individual input field without form

1
votes

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( )?

3
javascriptinputtextfield
do you want to submit its parent form or submit its value only? – Omar Elawady
Thanks for the quick reply. I only want to submit the value of the individual input field, NOT the entire form. – Avery

3 Answers

0
votes

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 :)

0
votes

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.

0
votes

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);