PHP/AJAX 表单提交问题

问题描述 投票:0回答:2

首先,我不擅长 javascript……我复制了一些代码,这些代码几乎可以满足我的要求——提交表单并更新我的数据库而无需刷新页面。问题是我页面上的每个表单现在都在这样做。我只想要这个特定的形式来调用函数。有人可以帮帮我吗?

Javascript

<script>
              $(function () {
                $('form').bind('click', function (event) {
                // using this page stop being refreshing 
                event.preventDefault();

                  $.ajax({
                    type: 'POST',
                    url: 'ajax/post.php',
                    data: $('form').serialize(),
                    success: function () {
                      alert('Movie added to your list.');
                    }
                  });
                });
              });
            </script>

HTML 格式

<form style="display: inline-block;">
                <input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
                <input style="display: none" name="favorite" value="favorite" />
                <input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST"><?php } ?>
            </form>

我尝试了多次谷歌搜索,但无法解决我页面上每个表单调用该函数的问题

javascript html jquery ajax forms
2个回答
-1
投票

试试这个

<script>
         $(function () {
                $('#add').bind('click', function (event) {
                // using this page stop being refreshing 
                event.preventDefault();

                  $.ajax({
                    type: 'POST',
                    url: 'ajax/post.php',
                    data: $('form').serialize(),
                    success: function () {
                      alert('Movie added to your list.');
                    }
                  });
                });
              });
            </script>

HTML 表格

<form id="add" style="display: inline-block;">
                <input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
                <input style="display: none" name="favorite" value="favorite" />
                <input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST"><?php } ?>
            </form>

问题是您没有在表单中提到

ID
,而是简单地称为
$('form').bind
,这意味着它将绑定在
<form>
标签中输入的所有输入,并且只会发送提交。

所以现在我们已经在表单中指定了

id
所以脚本将仅通过表单运行输入
ID


-1
投票

你的代码的问题是,当函数执行时,事件连接到页面上的所有表单。

要解决此问题,您可以在要触发该功能的表单中添加一个独特的

id
class
,并将点击事件仅绑定到该特定表单。这是一个例子:

HTML:

<form id="myForm" style="display: inline-block;">
  <input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
  <input style="display: none" name="favorite" value="favorite" />
  <input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST">
</form>

Javascript:

<script>
  $(function () {
    $('#myForm').bind('click', function(event) {
      // using this page stop being refreshing 
      event.preventDefault();

      $.ajax({
        type: 'POST',
        url: 'ajax/post.php',
        data: $('#myForm').serialize(),
        success: function () {
          alert('Movie added to your list.');
        }
      });
    });
  });
</script>
© www.soinside.com 2019 - 2024. All rights reserved.