0

I have this jQuery AJAX code that retrieves data from a MySQL database. It works without reloading the page, the problem is that it only works the first time. If I submit the form again, then the whole page reloads. How can I make it so I can submit the form multiple times and retrieve the data without reloading the page?

jQuery

$(document).ready(function() {
    $('form').on('change', function() {
        $(this).closest('form').submit();
    });

    $('form').on('submit', function(event) {
        event.preventDefault();
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success:function(data) { $('form').html(data); }
        });
    });
});

HTML

<form action="form.php" method="post" id="cars">
    <select name="id">
        <option value="">Selection...</option>
        <option value="1" <?php echo (isset($id) and $id == 1) ? 'selected' : '';?>>Chevy</option>
        <option value="2" <?php echo (isset($id) and $id == 2) ? 'selected' : '';?>>Ford</option>
        <option value="3" <?php echo (isset($id) and $id == 3) ? 'selected' : '';?>>Dodge</option>
    </select> 
</form>
Ashish Kakkad
  • 23,586
  • 12
  • 103
  • 136
Rick Helston
  • 733
  • 3
  • 11
  • 20
  • What is being returned in success? Are you nesting the same form inside itself? – charlietfl Jan 24 '15 at 07:42
  • An id, data and text from a database. Am I doing the nesting wrong? If yes, how can I fix it? It works when I submit the form the 1st time, then the 2nd time it doesn't, 3rd time it works, 4th it doesn't, etc. – Rick Helston Jan 24 '15 at 07:52
  • the cycles that it works are after page reload. I don't get it though because you show replacing the inner html of form on ajax success. So how can it submit again? – charlietfl Jan 24 '15 at 07:55
  • Is there any way I can stop it from reloading? – Rick Helston Jan 24 '15 at 08:02
  • I'm not sure why it is. It shouldn't as long as no script errors are being thrown (check console). Still confused about `$('form').html(data);` This would replace all the form controls...but you say you just have non html data returned – charlietfl Jan 24 '15 at 08:03
  • charlietfl you are a GENIUS. I just changed it to $('body').html(data); instead of $('form').html(data); and now it works like gold--THANKS!!!! If you want to post it as an answer I'll accept it and give you the points!!!! :-) – Rick Helston Jan 24 '15 at 08:14
  • that's an unorthodox way to reload :) ... but if you like it it's all yours. – charlietfl Jan 24 '15 at 08:15
  • lol, what would be a better way to reload? I'm a jQuery novice. – Rick Helston Jan 24 '15 at 08:19
  • you could simply reset the form after a confirmation from server that insert or update was successful. What you are doing is ok on simple page but a page with lots of script in it would be a problem. It's almost a complete page reload – charlietfl Jan 24 '15 at 08:20
  • Mind giving an example? Please do tell. – Rick Helston Jan 24 '15 at 08:23
  • $('form')[0].reset() – charlietfl Jan 24 '15 at 08:29

1 Answers1

1

Please do not use submit, instead use change function

<script type="text/javascript">
$(document).ready(function() {
    $('form').on('change', function() {
        $.ajax({
            url: 'form.php',
            type: 'post',
            data: {'id':jQuery('select[name=id]').val()},
            success:function(data) { $('form').html(data); }
        });
    });
});
</script>
Rahul DSouza
  • 56
  • 5
  • 1
    and why would you make this suggestion? And why manually generate data instead of using `serialize() ` ... seems like a step backwards? – charlietfl Jan 24 '15 at 08:30
  • This is exactly what I was looking for Rahul, THANKS!!!! Now, the page doesn't reload at all, it does it all asynchronously. B-) – Rick Helston Jan 24 '15 at 08:53