Jquery for submiting without refresh (no validation required)

Question

I have a form for Tags that is working OK, with some server validation, I would like to add a Jquery to submit the content without refreshing:

<form method="post" action="tags">
  <div>
        <input type="hidden" name="id" value="getId()" />
        <input type="text" name="tag" />
        <input type="submit" value="Add" name="add" />
    </div>
</form>

Any advice will be highly appreciated.

Check [`jQuery.ajax`](http://api.jquery.com/jQuery.ajax/). – air4x Oct 31 '12 at 02:37 — air4x, Oct 31 '12 at 02:37

FThompson · Accepted Answer · 2012-10-31T02:45:38.917

2

Check out the jQuery Form Plugin. Using it, you can submit a form without reloading the page like so:

<form id="aForm" action="target.php" method="post>
    ...
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#aForm").ajaxForm();
    });
</script>

The ajaxForm() function also supports all options (such as a callback function) that can be passed to the standard jQuery $.ajax function.

edited Oct 31 '12 at 02:45

answered Oct 31 '12 at 02:40

FThompson

28,352
13
60
93

Thanks Vulcan! I tried your answer but it's refreshing. The form plug in is installed, the id form is aForm as yours. What could it be? – Diego Sarmiento Oct 31 '12 at 16:39
@82din I can't say for sure without seeing your code. Try replicating what the form's tutorial has, and debugging (with some web console) to make sure that it's actually recognizing the plugin's functions. – FThompson Oct 31 '12 at 17:05
I had a conflict with the $ symbol. I used jQuery instead. Thanks a lot! – Diego Sarmiento Oct 31 '12 at 18:05
you also can get data in return, $('#form_id').ajaxForm(function(data){ if(data === '1'){} } – Pran Dec 13 '15 at 19:53
you also can get value in return, `$('#form_id').ajaxForm(function(data){ alert(data); });` to get multiple values use **JSON** encode in php, for more reference visit [here](http://stackoverflow.com/questions/9764598/json-encode-not-working-with-a-html-string-as-value) – Pran Dec 13 '15 at 20:04

Jay Rizzi · Answer 2 · 2012-10-31T17:16:31.853

1

 $(document).ready(function() {
  $(form).submit( function() { // could use $(#submit).on('click', function(){ as well
   $.ajax({
     url: 'yourposturl',
     data: $(form).serialize(),
     Success: function() {
         alert('ok');
     }
   }); //end ajax   

  return false;
   }); //end submit()
 });

Should take all form vars , serialize them so the server can receive, the return false is so page doesnt refresh on submit (stops propagation and default)

edited Oct 31 '12 at 17:16

answered Oct 31 '12 at 02:42

Jay Rizzi

4,196
5
42
71

Thanks worthy, I used your function inside the document ready, with the proper url and it still refresh. I don't get the OK message. – Diego Sarmiento Oct 31 '12 at 16:42
Whoops, had a syntax error there, try this, fully tested with doc ready function – Jay Rizzi Oct 31 '12 at 17:17

score 0 · Answer 3 · answered Oct 31 '12 at 02:39

Add the JQuery javascript library

Turn the submit into a button

 <button id="submitbutton" >Add</button>

Add ids to your inputs

<input type="text" id="tag" name="tag" />

And add the jquery to the click for the button ...

<script type="text/javascript">
    $(document).ready(function() {
     $("#submitbutton").button().click(function(){
     $.post("tags.php",{id: $("#id").val(), tag: $("#tag").val()});
  });
});
</script>

score 0 · Answer 4 · answered Oct 31 '12 at 02:42

<form method="post" action="tags">
  <div>
        <input type="hidden" name="id" value="getId()" />
        <input type="text" name="tag" />
        <input class="button" type="button" value="Add" name="add" />
    </div>
</form>


$(function(){
   $('.button').click(function(){
       var data = $('form').serializeToObject();
       $.post('tags.php', data);
   });
});

// jQuery Extension to serialize a selector's elements to an object
$.fn.serializeToObject = function () {
    var o = {};
    var a = this.serializeArray();

    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Thanks Gabe! I used your solution but it doesn't submit. I checked the url inside the $.post and is the same than the action form. — Diego Sarmiento, Oct 31 '12 at 16:54

Jquery for submiting without refresh (no validation required)

4 Answers4