Question

我有一个包含3个表单的页面

<form id="form1"  method="post">
  <input type="text" name="name" value="">
  <input type="text" name="city" value="">
</form>

<form id="form2"  method="post">
  <input type="text" name="space" value="">
  <input type="text" name="time" value="">
</form>

<form id="form3"  method="post">
  <input type="text" name="tv" value="">
  <input type="text" name="genre" value="">
</form>

我想使用ajax中的表单id将表单发送到不同的php页面。

这是我正在尝试的脚本。

<script>
$('#form1').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form1.php",
    method:"POST",
    data:$('#form1').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

$('#form2').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form2.php",
    method:"POST",
    data:$('#form2').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

$('#form3').on("submit", function(event){
  event.preventDefault();
  $.ajax({
    url:"form3.php",
    method:"POST",
    data:$('#form3').serialize(),
    beforeSend:function(){
      $('#insert').val("Inserting");
    },
  });
});

</script>

这是正确的做法，因为我找不到任何例子。任何示例或链接都将非常感激。

更新**

enter image description here显示没有错误

这是php

<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/core/include/connection.php";
include_once($path);
if(!empty($_POST)){
$name =  mysqli_real_escape_string ($databaseLink,$_POST['name']);
$city=  mysqli_real_escape_string ($databaseLink,$_POST['city']);
$sql = "INSERT INTO form1 SET name='$name' city='$city'";
$sql = mysqli_query($databaseLink,$sql);
}
?>

Answer 1

你的方法没有错，脚本会做你想要的，但它是重复的，如果你需要添加或删除某些表单，你需要编辑你的js。我建议你抽象一点脚本，使其可重复使用;）

＆＃13;

$('form.ajax-form').on('submit', function(evt){
  evt.preventDefault();
  var $form = $(this);
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data:$form.serialize(),
    beforeSend:function(){
      $form.find('.insert').val("Inserting");
    },
    success: function() {
      $form[0].reset();
      $($form.data('modal')).modal('close'); 
      Materialize.toast($form.data('success-message'), 6000, 'rounded') ; 
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="ajax-form" action="form1.php" method="post" data-modal="#modal1" data-success-message="New vendor added">
  <input type="text" name="name" value="">
  <input type="text" name="city" value="">
  <input type="submit" value="save">
</form>

<form class="ajax-form" action="form2.php" method="post" data-modal="#modal2" data-success-message="New space added">
  <input type="text" name="space" value="">
  <input type="text" name="time" value="">
  <input type="submit" value="save">
</form>

<form class="ajax-form" action="form3.php" method="post" data-modal="#modal3" data-success-message="New tv added">
  <input type="text" name="tv" value="">
  <input type="text" name="genre" value="">
  <input type="submit" value="save">
</form>

＆＃13;

P.S。请记住，如w3 documentation

中所述

如果表单没有提交按钮，那么如果表单有多个阻止隐式提交的字段，则隐式提交机制必须不执行任何操作，否则必须从表单元素本身提交表单元素。出于上一段的目的，元素是一个字段，如果表单元素的表单所有者是表单元素且其type属性处于以下状态之一，则阻止表单元素的隐式提交：Text，Search， URL，电话，电子邮件，密码，日期，时间，号码

使用ajax将多个表单提交到不同的php文件

1 个答案: