Pass value from html form to php without submitting the form

Question

I have a text box. I want to take user input from there and pass it to PHP without using submit button. I would prefer a normal button and onclick should pass data to PHP.

Here is something I heard:

• you can call a JS function onclick and then you can submit the form from there

But I want to be on the same page after submitting the form. That's why I didn't want to submit the form in the first place. But looks like there is no other way.

If anyone knows about the submit method, please, help.

Answer 1

Yes, it is called AJAX. : )

In jQuery, for brevity:

// or $('#textbox_autopost').blur if you want to do it when the box loses focus
$('#textbox_autopost').change(function(){
    $.ajax({
        type: "POST",
        url: "some.php",
       data: {text:$(this).val()}
    });
});

---

if you want to do it via button click

<button id="inlinesubmit_button" type="button">submit</submit>

$('#inlinesubmit_button').click(function(){
    $.ajax({
        type: "POST",
        url: "some.php",
       data: {text:$('#textbox').val()}
    });
});

You can also do it through an A HREF (or submit button, or or something else wacky:

<!-- backup if JS not available -->
<a href="handler.php" id="inline_submit_a">add comment</a>

$('#inline_submit_a').click(function(evt){
    $.ajax({
        type: "POST",
        url: "some.php",
       data: {text:$('#textbox').val()}
    });
    evt.preventDefault();
    return false;
});

If you want to do it on enter:

$('#textbox_autopost_onenter').keydown(function(evt){
    if ((evt.keyCode) && (evt.keyCode == 13))
    {
      $.ajax({
        type: "POST",
        url: "some.php",
        data: {text:$(this).val()}
      });
      evt.preventDefault();
      return false;
    }
});

---

Final, site-ready code:

$(document).ready(function(){
   function submitMe(selector)
   {
        $.ajax({
          type: "POST",
          url: "some.php",
          data: {text:$(selector).val()}
        });

   }
   $('#textbox_button').click(function(){
      submitMe('#textbox');
   });
   $('#textbox').keydown(function(evt){
      if ((evt.keyCode) &&(evt.keyCode == 13))
      {
         submitMe('#textbox');
         evt.preventDefault();
         return false;
      }
   });

Answer 2

You'll need to use Javascript to make an AJAX POST request back to the PHP on the server.

There's a good tutorial here that uses jQuery to validate the form, send it to the server then display a message to the user based on the server's response.

Answer 3

You have to use AJAX.

I highly recommend to use jquery :)

jQuery

Answer 4

Several ways to do that...

It sounds like you're after a non-redirecting solution, so I'd recommend jQuery (it's my fave, but there are plenty other solutions to implementing AJAX) and doing something like the following:

Assume you have a text box and button like this:

<input id="txt_input" type="text" />
<input id="btn_send" type="button" value="Submit" />

Then do something like this

$(document).ready(function () {
    $("#btn_send").click(function () {

        // Do stuff BEFORE sending... //
        callAFunction();
        var test = "asdfasdf";

        // Send the text to PHP //
        $.post("test.php", { input: $("#txt_input").val()},
             function(data) {
                 alert("test.php returned: " + data);
             }
        );

        // Do more stuff after sending.... //
        callAnotherFunction();
    });
});

I believe that'll get what your after. For more on jQuery and further options with $.post, check here: http://api.jquery.com/jQuery.post/

Hope that helps!

Answer 5

I´m not sure what you mean by "normal button", but if you don´t want to use an <input type="submit"> you can use a <button type="submit">.

A button gives you more freedom in layout, but older versions of IE get confused if you use multiple button elements in one page.