ajax form request still reloads page

Question

I am trying to submit a form using ajax with jquery mobile without it refreshing the page and am having no luck..

I have this form -

index.php:

<script>
function SubmitForm() {
var name = $("#name").val();
$.post("bump.php", { name: name},
function(data) {
 //alert(data);
});
}
</script>


<form method="post" data-ajax="false">
<input name="name" type="hidden" id="name" type="text" value="<?php echo $id; ?>" />
<input type="image" style="height:35px;top:4px;" id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm();" value="Send" />
</form>

Here is bump.php

$date = date('y/m/d H:i:s');
$id =  $_POST['name'];
$sql = "UPDATE images SET update_date='$date' WHERE id=$id";

    if ($conn->query($sql) === TRUE) {

    } else {
        echo "Error updating record: " . $conn->error;
    }

I would like to maintain my position on the page but it refreshes each time? What am I doing wrong here?

you can use this link might be helpful for you [enter link description here](http://stackoverflow.com/questions/12944329/add-onclick-function-to-a-submit-button) — Naveen Kumar, Oct 02 '16 at 03:47
might be helpful for you [add onclick function to a submit button](http://stackoverflow.com/questions/12944329/add-onclick-function-to-a-submit-button) — Naveen Kumar, Oct 02 '16 at 03:49

score 4 · Accepted Answer · answered Oct 02 '16 at 03:29

4

Use event.preventDefault(); Cancels the event if it is cancelable, without stopping further propagation of the event.

Default behaviour of type="image" is to submit the form hence page is unloaded

function SubmitForm(event) {
  event.preventDefault();
  var name = $("#name").val();
  $.post("bump.php", {
      name: name
    },
    function(data) {
      //alert(data);
    });
}

<form method="post" data-ajax="false">
  <input name="name" type="hidden" id="name" type="text" value="<?php echo $id; ?>" />
  <input type="image" style="height:35px;top:4px;" id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm(event);" value="Send" />
</form>

answered Oct 02 '16 at 03:29

Rayon

36,219
4
49
76

Ahh perfect thanks! @Rayon have to wait 8 min, to accept – Ryan D Oct 02 '16 at 03:33
Haa go figure.. Heres a follow up for extra points, when the form submits the hidden field, it has the correct id inserted but when I echo the id in bump.php its the id from the most recent id in the db not the id that was inserted in the hidden field.. Very strange.. Thanks again! – Ryan D Oct 02 '16 at 03:54

Naveen Kumar · Answer 2 · 2016-10-02T04:30:33.770

user return false in onclick`

function SubmitForm() {
//event.preventDefault();
var name = $("#name").val();
console.log(name);
$.post("message.html", { name: name},
function(data) {
 alert(data);
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" data-ajax="false">
<input name="name" type="hidden" id="name" type="text" value="<?php echo $id; ?>" />
<input type="image" style="height:35px;top:4px;" id="bump" src="http://switchon.global2.vic.edu.au/files/2015/07/4x5-1jroh2i.png" id="searchForm" onclick="SubmitForm(); return false;" value="Send" />
</form>

ajax form request still reloads page

2 Answers2