使用ajax提交表单数据而不刷新

时间:2014-09-12 11:38:36

标签: php jquery mysql ajax forms

我有一个包含多个表单的页面,它删除MySQL数据库中的行。表单也是从MySQL数据库填充的。

我试图在不刷新页面的情况下对表单进行汇总,但是这些行不会从我的数据库中删除。

更新: 我没有提到包含动态生成的表单的div。

表单基于选择列表中的选项。代码:

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

表单使用JS将表单添加到页面上的div。代码:

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

更新结束

表格:

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

发送数据的脚本:

  $(function () {

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

      e.preventDefault();

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

    });

  });

用于删除行的php文件:

 <?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'] .""); 
 ?>

如果我只使用method="POST"action="delete.php的表单,那么它正在运作。这意味着有问题的行被删除,但页面会刷新。

对我出错的地方有任何建议吗?

2 个答案:

答案 0 :(得分:1)

更改此行

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

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

或在e.preventDefault()之后;添加此行

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

data: {relation_id: rel_id},

答案 1 :(得分:1)

地点

return false;

在ajax调用函数之后,改变你如何放置参数

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

});