как я могу получить результат из второго кода?

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 должно быть уникальным в документе. Используйте валидатор .

Вы получаете одни и те же данные каждый раз, потому что вы выполняете поиск с помощью селектора идентификаторов, а восстановление после ошибок означает, что вы всегда получите первый.

• Не использовать идентификаторы
• Используйте селекторы относительно формы, с которой вы имеете дело

Например:

$("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 на класс.Пожалуйста, проверьте ниже код.

<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() {} ) равны.Это перезапишет предыдущий вариант.Если вы объедините код, он должен работать.