Send through input value to javascript function

Question

I have a form like below:

<form onsubmit="doSomething(this.form);">
    <input type="text" name="groupName" />
    <input type="text" name="groupColour" />
</form>

Now this doesn't have a submit button, I know. Instead, when the user hits the enter key I want it to trigger a function. In this example doSomething.

Now in the function I will performing an AJAX request to insert a record to the database, however I'm not sure how to access the value that was entered in the text fields in my AJAX function doSomething.

How do I pass to my function the values of the form when submitted?

depends if you are using jquery or not, but query the textboxes you want to pull the data from, then either use pure javascript has method .value or jquery has .val() for getting the input value — Georgette Pincin, Sep 05 '15 at 13:32

Zakaria Acharki · Answer 1 · 2015-09-05T13:35:22.610

HTML & JQuery fiddle

Because you're using jquery and you want to use ajax request, you can use keypress function instead of form and submit :

HTML :

<input type="text" id="groupName" />
<input type="text" id="groupColour" />

JS :

$(document).keypress(function(e) {
    if(e.which == 13) { //When you pressed enter!
        var name = $('#groupName').val();
        var color = $('#groupColour').val();

        $.post('insert.php',{name: name, color: color});
    }
});

PHP (insert.php) :

$name = $_POST['name'];  //Get name
$color = $_POST['color'];  //Get color

//Now you can use $name & $color in insert Query here

Hope this helps.

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

Try this it works.. Do this tricky :-)

<form onsubmit="doSomething();">

    <input type="text" name="groupName" />

    <input type="text" name="groupColour" />

   <input type="submit" 
   style="position: absolute; left: -9999px; width: 1px; height: 1px;"
   tabindex="-1" />

</form>

edited May 23 '17 at 11:58

Community

1
1

answered Sep 05 '15 at 13:32

Aravinthan K

1,763
2
19
22

Artur Filipiak · Accepted Answer · 2015-09-05T13:54:40.477

Don't use onsubmit attribute. Divide your HTML and javascript and handle form submission using jQuery.

$("form").on('keypress', function(event){
    // if the key is "enter":
    if(event.which == 13) {
        // trigger AJAX:
        $.ajax({
            url     : 'post-page.php',
            type    : 'post',
            // serialize the form (all the form fields will be posted to PHP):
            data    : $(this).serialize(),
            success : function(response){
                // handle server response...
            }
        });
    }
});

score 1 · Answer 4 · answered Sep 05 '15 at 13:40

Heres a easy way..

document.onkeypress =function (e) {
    if (e.keyCode == 13) {
       alert(document.forms['myform'].elements['myinput'].value);
    }
};

<body>
  <form name="myform">
    <input name="myinput" type="text" value="awesome">
    </form>
  </body>

Send through input value to javascript function

4 Answers4