CODEWITHSUNDEEP
phpjquerymysqlajaxforms
Karsten Tietje
Karsten Tietje

Reputation: 259

Submit form data with ajax without refresh

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?

Upvotes: 0

Views: 300

Answers (2)

user2289510
user2289510

Reputation:

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},

Upvotes: 1

Wezy
Wezy

Reputation: 667

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;
  });

});

Upvotes: 1

Related Questions