Question

我修改了我的问题。我如何从第二种形式获得结果？因为我已经用相似的代码创建了两个表单，但是我只能从第一个表单中获取结果，而当我按下第二个表单时，它仍然会从第一个表单中获取结果。有人可以帮我吗？

代码

<div>
<form id="fupForm" name="form1" method="post">
<div class="form-group">
<input type="hidden" class="form-control" id="gp_name" name="gp_name" 
value="<?php echo $gp_name;?>">
<input type="hidden" class="form-control" id="date" name="date" value="<? 
php 
echo $deday;?>">
<input type="hidden" class="form-control" id="type" name="type" 
value="Hotel">
</div>
<input type="button" name="save" class="btn btn-primary" 
 value="Add Hotel" id="butsave">
</form></div>

<div>
<form id="fupForm2" name="form2" method="post">
<div class="form-group">
<input type="hidden" class="form-control" id="gp_name" name="gp_name" 
value="<?php echo $gp_name;?>">
<input type="hidden" class="form-control" id="date" name="date" value="<? 
php 
echo $deday;?>">
        <input type="hidden" class="form-control" id="type" name="type" 
value="Coach">
</div>
<input type="button" name="save" class="btn btn-primary" 
 value="Add Coach" id="butsave2">
</form></div>

<script>
$(document).ready(function() {
$('#butsave').on('click', function() {
    $("#butsave").attr("disabled", "disabled");
    var gp_name = $('#gp_name').val();
    var date = $('#date').val();
    var type = $('#type').val();
    if(gp_name!="" && date!="" && type!=""){
        $.ajax({
            url: "save.php",
            type: "POST",
            data: {
                gp_name: gp_name,
                date: date,
                type: type              
            },
            cache: false,
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==200){
                    $("#butsave").removeAttr("disabled");
                    $('#fupForm').find('input:text').val('');
                    $("#success").show();
                    $('#success').html('Data added successfully !');                        
                }
                else if(dataResult.statusCode==201){
                   alert("Error occured !");
                }

            }
        });
    }
    else{
        alert('Please fill all the field !');
    }
});
});
</script>

<script>
$(document).ready(function() {
$('#butsave2').on('click', function() {
    $("#butsave2").attr("disabled", "disabled");
    var gp_name = $('#gp_name').val();
    var date = $('#date').val();
    var type = $('#type').val();
    if(gp_name!="" && date!="" && type!=""){
        $.ajax({
            url: "save.php",
            type: "POST",
            data: {
                gp_name: gp_name,
                date: date,
                type: type              
            },
            cache: false,
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==200){
                    $("#butsave2").removeAttr("disabled");
                    $('#fupForm2').find('input:text').val('');
                    $("#success").show();
                    $('#success').html('Data added successfully !');                        
                }
                else if(dataResult.statusCode==201){
                   alert("Error occured !");
                }

            }
        });
    }
    else{
        alert('Please fill all the field !');
    }
});
});
</script>

我已尝试在Google上查找，但找不到针对我案的解决方案。

Answer 1

id在文档中必须唯一。使用a validator。

您每次都获得相同的数据，因为您正在使用id选择器进行搜索，并且错误恢复意味着您将始终获得第一个数据。

不使用ID
使用相对于您要处理的表单的选择器

例如：

$("form").on("submit", function(event) {
  event.preventDefault();
  const $form = $(this);
  const $input = $form.find("[name=type]");
  console.log($input.val());
});

form {
  padding: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type=hidden name=type value=foo>
  <button>Submit</button>
</form>

<form>
  <input type=hidden name=type value=bar>
  <button>Submit</button>
</form>

Answer 2

在输入元素之前添加表单ID。请记住，ID始终是唯一的，不能重复。所以在这里我将id更改为class。请检查以下代码。

<div>
<form id="fupForm" name="form1" method="post">
<div class="form-group">
<input type="hidden" class="form-control gp_name" id="" name="gp_name" 
value="<?php echo $gp_name;?>">
<input type="hidden" class="form-control date" id="" name="date" value="<? 
php 
echo $deday;?>">
<input type="hidden" class="form-control type" id="" name="type" 
value="Hotel">
</div>
<input type="button" name="save" class="btn btn-primary" 
 value="Add Hotel" id="butsave">
</form></div>

<div>
<form id="fupForm2" name="form2" method="post">
<div class="form-group">
<input type="hidden" class="form-control gp_name" id="" name="gp_name" 
value="<?php echo $gp_name;?>">
<input type="hidden" class="form-control date" id="" name="date" value="<? 
php 
echo $deday;?>">
        <input type="hidden" class="form-control type" id="" name="type" 
value="Coach">
</div>
<input type="button" name="save" class="btn btn-primary" 
 value="Add Coach" id="butsave2">
</form></div>

<script>
$(document).ready(function() {
$('#butsave').on('click', function() {
    $("#butsave").attr("disabled", "disabled");
    var gp_name = $('#fupForm .gp_name').val();
    var date = $('#fupForm .date').val();
    var type = $('#fupForm .type').val();
    if(gp_name!="" && date!="" && type!=""){
        $.ajax({
            url: "save.php",
            type: "POST",
            data: {
                gp_name: gp_name,
                date: date,
                type: type              
            },
            cache: false,
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==200){
                    $("#butsave").removeAttr("disabled");
                    $('#fupForm').find('input:text').val('');
                    $("#success").show();
                    $('#success').html('Data added successfully !');                        
                }
                else if(dataResult.statusCode==201){
                   alert("Error occured !");
                }

            }
        });
    }
    else{
        alert('Please fill all the field !');
    }
});
});
</script>

<script>
$(document).ready(function() {
$('#butsave2').on('click', function() {
    $("#butsave2").attr("disabled", "disabled");
    var gp_name = $('#fupForm2 .gp_name').val();
    var date = $('#fupForm2 .date').val();
    var type = $('#fupForm2 .type').val();
    if(gp_name!="" && date!="" && type!=""){
        $.ajax({
            url: "save.php",
            type: "POST",
            data: {
                gp_name: gp_name,
                date: date,
                type: type              
            },
            cache: false,
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==200){
                    $("#butsave2").removeAttr("disabled");
                    $('#fupForm2').find('input:text').val('');
                    $("#success").show();
                    $('#success').html('Data added successfully !');                        
                }
                else if(dataResult.statusCode==201){
                   alert("Error occured !");
                }

            }
        });
    }
    else{
        alert('Please fill all the field !');
    }
});
});
</script>

Answer 3

函数$( document ).ready( function() {} )和$( function() {} )相等。这将覆盖以前的变体。如果合并代码，它应该可以工作。

如何从第二个代码中得到结果？

3 个答案: