Submit form data with ajax without refresh

Question

I have a page with multiple forms, which delete rows in a MySQL database. The forms are also populated from the MySQL database.

I'm trying to sumbit the forms without refreshing the pages, but the rows are not getting removed from my database.

Update: I didn't originally mention that the div which contains the forms i dynamically generated.

The form is based on a option from a select list. Code:

      <form>
        <h3>Vælg medlem</h3>
            <select name="users" onchange="showUser(this.value)">
            <?php
            $i = 0;
            while($row = mysql_fetch_array($result))
              { if (!$i++) echo "<option selected='selected'>Vælg medlem</option>" ?>

                <option value="<?php echo $row[medlemmer_id]; ?>"><?php echo $row[medlemmer_navn]; ?></option>

                <?php } $i++; ?>
            </select>
        </form>

The form uses JS to add the forms to a div on the page. Code:

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getuser.php?q="+str,true);
  xmlhttp.send();
};
</script>

End of update

The form:

  <form id="myform2">
    <p><?php echo $row[boder_navn]; ?> <?php echo $row[boder_pris]; ?> kr. - <?php echo $dato; ?></p>
    <input type="hidden" id="relation_id" name="relation_id" value="<? echo $row[relation_id]; ?>"/>
    <input name="submit" type="submit"/>
 </form>

The script to send data:

  $(function () {

    $('#myform2').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'delete.php',
        data: $("#relation_id").val();,
        success: function () {
          alert('form was submitted');
        }
      });

    });

  });

The php file for deleting rows:

 <?php
 mysql_connect("#######", "########", "#######") or die(mysql_error());
 mysql_select_db("#######") or die(mysql_error());
 mysql_query("DELETE FROM boder_has_medlemmer WHERE relation_id = ". $_POST['relation_id'] .""); 
 ?>

If i just use a form with method="POST" and action="delete.php it's working. Meaning that the row in question is deleted, but the page refreshes.

Any suggestions to where I'm going wrong?

if the console doesn't show anything - take a look at the php error log. add an error output to your delete.php, just to see if the ajax call really fires the php. maybe it's a simple path issue... — errand
– errand, Commented Sep 12, 2014 at 11:44
The console is not showing any errors. How would i apply an error log to the php script? — Karsten Tietje
– Karsten Tietje, Commented Sep 12, 2014 at 12:03

Wezy · Accepted Answer · 2014-09-12 11:55:30Z

1

place

return false;

after the ajax call function and change how you place the argument

$(function () {

$('#myform2').on('submit', function (e) {

   e.preventDefault();

   var rel_id = $("#relation_id").val();

   $.ajax({
      type: 'post',
      url: 'delete.php',
      data: {
         relation_id: rel_id
      },
      success: function () {
        alert('form was submitted');
      }
    });
    return false;
  });

});

edited Sep 12, 2014 at 11:55

answered Sep 12, 2014 at 11:49

Wezy

6671 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2014-09-12 11:55:34Z

1

Change this line

data: $("#relation_id").val();,

to

data: {relation_id: $("#relation_id").val()},

or after e.preventDefault(); add this line

var rel_id = $("#relation_id").val();

and

data: {relation_id: rel_id},

edited Sep 12, 2014 at 11:55

answered Sep 12, 2014 at 11:44

user2289510

6 Comments

Karsten Tietje Over a year ago

Doesn't seem to change anything - but you made me aware of a curly bracket mistake.

Karsten Tietje Over a year ago

Nope no errors - and I'm not sure how to check if the Ajax request actually is made.

user2289510 Over a year ago

For you the easiest way to log what happened should be adding this line in delete.php mysql_query("INSERT INTO some_table_name (an_column_name) VALUES ('.mysql_real_escape_string(print_r($_POST, true)).')"); you have to create an table with an column and replace their names in prev code, this should save any post request to your table and you can check it or adding this after success function in js: error(jqXHR, textStatus, errorThrown ){console.log(textStatus);}

Karsten Tietje Over a year ago

What do you mean by "replacing their names in prev code"? I have created a table and column, and tried running it again, but nothing is added to the tabler. mysql_query("INSERT INTO error_check(e1) VALUES ('.mysql_real_escape_string(print_r($_POST, true)).')");

user2289510 Over a year ago

I guess there is an ajax error, add this after success function in js: error(jqXHR, textStatus, errorThrown ){console.log(jqXHR); console.log(textStatus); console.log(errorThrown);} this will be triggered when ajax error happens and will write to your console whats wrong

|

Collectives™ on Stack Overflow

Submit form data with ajax without refresh

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related