Automate AJAXed forms with Jquery

Question

I want to improve my website and figured out a good way to do it was by submitting forms via AJAX. But, I have so many forms that it would be inpractical to do $('#formx').submit(). I was wondering if there was a way to do this automatically by making an universal markup like;

<form class="ajax_form" meta-submit="ajax/pagename.php">
 <input type="text" name="inputx" value="x_value">
 <input type="text" name="inputy" value="y_value">
</form>

And have this submit to ajax/pagename.php, where it automatically includes inputx and inputy? This would not only save me a lot of time but also a lot of lines of code to be written.

First question so I hope it's not a stupid one :)

score 0 · Answer 1 · answered May 21 '13 at 10:00

you can create ajax fot text boxes so that it can update to database whenever change the focus from it.

<form id="ajax_form1">
<fieldset> 
    <input type="text" id="inputx" value="x_value" />
    <input type="text" id="inputy" value="y_value" /> 
</fieldset>
</form>

<script>

$(document).ready(function()
{
$("form#ajax_form1").find(":input").change(function()
 {
   var field_name=$(this).attr("id");
   var field_val=$(this).val();
   var params ={ param1:field_name, param2:field_val };

   $.ajax({ url: "ajax/pagename.php",
            dataType: "json",
            data: params,           
            success: setResult      
         });
});
});
</script>

This looks like a bit of a messy way to do it, because not all forms will have 2 inputs, and $.post is essentially the same thing as $.ajax — Orhun Akdeniz, May 21 '13 at 10:32

Dutchie432 · Accepted Answer · 2013-05-21T20:20:53.317

0

Something like this should work for all forms. It uses jQuery - is this available in your project? This specific code chunk hasn't been tested per say, but I use this method all the time. It is a wonderful time saver. Notice I changed meta-submit to data-submit so that its value can be fetched using $('.elemenet_class').data('submit');

HTML

<!-- NOTE: All Form items must have a unique 'name' attribute -->
<form action="javascript:void(0);" class="ajax_form" data-submit="ajax/pagename.php">
    <input type="text" name="inputx" value="x_value">
    <input type="text" name="inputy" value="y_value">

    <input type="submit" value="go" />
</form>

JavaScript

$('.ajax_form').submit(function(e){
    var path = $(this).attr('data-submit'); //Path to Action
    var data = $(this).serialize();    //Form Data
    $.post(path, {data:data}, function(obj){

    });
    return false;
})

PHP

//DEBUGGING CODE
//var_dump($_POST);
//die(null);

$data = $_POST['data'];
$inputx = $data['inputx'];
$inputy = $data['inputy'];

edited May 21 '13 at 20:20

answered May 21 '13 at 10:00

Dutchie432

28,798
20
92
109

Thanks for your answer, the form submits as it shoulds but when I set up a test page that echo's $_POST['inputx'] it gives me an error where it says that it is not defined. ` – Orhun Akdeniz May 21 '13 at 10:20
You need to do `$data = $_POST['data']` and then `$x=$data['inputx'];` instead of echoing anything, make your PHP page just have `var_dump($_POST);` and you will see the passed structure. See Updated Answer which includes the PHP. – Dutchie432 May 21 '13 at 10:21
Also, you should add `action="javascript:void(0);"` to your form. All Forms should have an `action` parameter, even if it does nothing. – Dutchie432 May 21 '13 at 10:26
My js code = http://prntscr.com/15xjou My html code = http://prntscr.com/15xjr8 My php code = http://prntscr.com/15xjsa My result = http://prntscr.com/15xjta :'( And yea, saw it and fixed it already. {data:data} should also be just data – Orhun Akdeniz May 21 '13 at 10:31
if you're changing `{data:data}` to just `data`, then I believe your php should just be `$_POST['inputx'];` - I am not at my pc which is why I didn't give you test code - I can provide that in a little over an hour if you're still having trouble. This is essentially the same thing: http://stackoverflow.com/questions/10398783/jquery-form-serialize-and-other-parameters – Dutchie432 May 21 '13 at 10:51
`serialize` requires parenthesis... `serialize()` - also please add the `action="javascript:void(0);"` to the form. – Dutchie432 May 21 '13 at 11:00

Automate AJAXed forms with Jquery

2 Answers2