CODEWITHSUNDEEP
jqueryajaxforms
Rhyder
Rhyder

Reputation: 101

Ajax form not working

Somehow my form is not working. Anyone knows why? Seems like ajax is not kicking in at all, because the action kicking in is data.php and not data_ajax.php, which I should see if ajax is working.

EDIT

Changed the HTML to what it actually looks like, though it should be the same result.

HTML

<div id="hidden_slidersize"></div>
<script type="text/javascript">
$(function(){
if ($('body').width() >= 960) {
var sizeOfSlider = 500;
} else {
var sizeOfSlider = ($('body').width())/2;
}
$('#hidden_slidersize').html('<form id="dataform" method="post" name="hiddentrick_form" action="data.php"><fieldset><input id="hiddentrick" name="hiddentrick" type="hidden" value="' + sizeOfSlider + '" /><input class="datasubmit" type="submit" value="senddata" /></fieldset></form>');
});
</script>

Script

$(document).ready(function() {

var form = $('form#dataform');

      form.submit(function () { 

    $.ajax({  
      type: 'POST',  
      url: 'data_ajax.php',  
      data: form.serialize(),
      dataType:'html',  
      success: function(data) {alert('yes');},
      error: function(data) {
      //AJAX request not completed
      alert('no');
      }
    });  
    return false;  

      });
});

Upvotes: 0

Views: 1129

Answers (1)

L105
L105

Reputation: 5419

You need to use .on() method because your content is loaded dynamically.

$(document).ready(function() {

$(document).on('submit', 'form#dataform', function () { 

    $.ajax({  
      type: 'POST',  
      url: 'data_ajax.php',  
      data: form.serialize(),
      dataType:'html',  
      success: function(data) {alert('yes');},
      error: function(data) {
      //AJAX request not completed
      alert('no');
      }
    });  
    return false;  

      });
});

Upvotes: 1

Related Questions