Javascript 动态生成的单选按钮名称属性数组索引增量

我希望在单击save1按钮时提交表单数据，而不使用ajax和jquery刷新页面。我是新手，请帮忙。 这是我的jquery和ajax脚本。在这里，我将数组中的所有数据字段存储为可以动态生成的表单字段。 当我跳过jquery和ajax部分，并使用formaction='savedata.php'提交表单数据时，数据就被插入到数据库中。但随后页面被重定向到savedata.php文件

<script type="text/javascript">
  $(document).ready(function()

$（文档）.ready（函数（）

{

$（'input[name=“instituteName[]”）。每个（函数（）{
instituteName.push（$（this.text（））；
});
var universityName=[]；
$（'input[name=“universityName[]”]）。每个（函数（）{
universityName.push（$（this.text（））；
});
var持续时间=[]；
$（'input[name=“duration[]”）。每个（函数（）{
duration.push（$（this.text（））；
});
var除法=[]；
$（'input[name=“division[]”）。每个（函数（）{
division.push（$（this.text（））；
});
获得的var=[]；
$（'input[name=“govered[]”）。每个（函数（）{
获取.push（$（this.text（））；
});
var课程类型=[]；
$（'input[name=“course_type[]”）。每个（函数（）{
course_type.push（$（this.text（））；
});
主要风险值=[]；
$（'input[name=“major[]”）。每个（函数（）{
major.push（$（this.text（））；
});
var roll_no=[]；
$（'input[name=“roll_no[]”]）。每个（函数（）{
滚动号推送（$（this.text（））；
});
var建筑物编号=[]；
$（'input[name=“building_no[]”“]）。每个（函数（）{
大楼号推送（$（this.text（））；
});
var city=[]；
$（'input[name=“city[]”）。每个（函数（）{
city.push（$（this.text（））；
});
var状态=[]；
$（'input[name=“state[]”）。每个（函数（）{
state.push（$（this.text（））；
});
var pin=[]；
$（'input[name=“pin[]”）。每个（函数（）{
pin.push（$（this.text（））；
});
var固定线路=[]；
$（'input[name=“landline[]”）。每个（函数（）{
landline.push（$（this.text（））；
});
var mark_表=[]；
$（'input[name=“mark_sheets[]”）。每个（函数（）{
mark_sheets.push（$（this.text（））；
});
var学位证书=[]；
$（'input[name=“degree_certificate[]”）。每个（函数（）{
学位证书.push（$（this.text（））；
});
var_度=[]；
$（'input[name=“temporative_degree[]”]）。每个（函数（）{
临时度推送（$（this.text（））；
});
$.ajax({
url:“save_secondary_details.php”，
方法：“张贴”，
数据：{学院名称：学院名称：大学名称：大学名称，持续时间：持续时间，部门：部门，获得：获得，课程类型：课程类型，专业：专业，卷号：卷号，楼号：楼号，城市：城市，州：州，pin:pin，固定电话：固定电话，马克表：马克表，学位证书：学位证书，临时学位：临时ee}，
成功：功能（数据）
{
警报（数据）；
}
});
});
});

我试图将表单输入中存储的所有值传递给ajax，然后将其存储到数据库中

这是我的PHP代码：

<?php 
              include('../includes/dbconnection.php');
              //error_reporting(0);
              if(isset($_POST['save1']))
              {
                $email="farhan.khan@ifim.edu.in";
                $instituteName= $_POST['instituteName'];
                $universityName= $_POST['universityName'];
                $duration= $_POST['duration'];
                $division= $_POST['division'];
                $obtained= $_POST['obtained'];
                $course_type= $_POST['course_type'];
                $major= $_POST['major'];
                $roll_no= $_POST['roll_no'];
                $building_no= $_POST['building_no'];
                $city= $_POST['city'];
                $state= $_POST['state'];
                $pin= $_POST['pin'];
                $landline= $_POST['landline'];
                $mark_sheets= $_POST['mark_sheets'];
                $degree_certificate= $_POST['degree_certificate'];
                $provisional_degree= $_POST['provisional_degree'];

                foreach ($instituteName as $key => $value) {
                  $save= "INSERT INTO `candidate_secondary_education`(`email`,`inst_name`,`board`,`duration`,`percentage`,`obtained`,`course_type`,`majored_in`,`reg_no`,`street`,`city`,`state`,`pin`,`contact`,`mark_sheet`,`degree`,`provisional_degree`) VALUES ('$email','$value','$universityName[$key]','$duration[$key]','$division[$key]','$obtained[$key]','$course_type[$key]','$major[$key]','$roll_no[$key]','$building_no[$key]','$city[$key]','$state[$key]','$pin[$key]','$landline[$key]','$mark_sheets[$key]','$degree_certificate[$key]','$provisional_degree[$key]')";

                  $query = mysqli_query($con, $save);
                  if(!$query)
                  {
                    echo mysqli_error($con);
                  }
                  else
                  {

                    echo '<script type="text/javascript">'; 
                    echo 'alert("Saved.");'; 
                    
                    echo '</script>';
                  }
                }
              }
            ?>

将按钮类型更改为“按钮”：

---

保存

一个简单的AJAX调用就可以做到

//another way to write $(document).ready(function() {
$(function() {
    $('form').on('submit', function(event) {
        //stop default form submission
        event.preventDefault();
        //submit form via AJAX
        $.post('savedata.php', $(this).serialize())
        //show response when done
        .done(function(data) {
            console.log( data );
         });
    });
});

参考

演示

我现在包括了一个带有3个表单的演示—当然，您可以有任意多个表单—但只有第一个表单有一个事件处理程序。由于我们有

event.preventDefault（）

提交时将不会重定向。但是，其他两个表单将尝试重定向，因为它们没有带有

event.preventDefault（）

的事件处理程序

$（函数（）{
$（'#form1'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
常量数据=$（this）.serialize（）；
log（“准备通过AJAX提交表单1数据”）；
控制台日志（数据）；
//AJAX调用
});
});

名字：



姓氏：




性别：

男性

女性

其他



名字：



姓氏：




性别：

男性

女性

其他



名字：



姓氏：




性别：

男性

女性

其他


欢迎来到！我们希望你喜欢这里。请选择教程：stackoverflow.com/Tour，并提供一个最小的、可复制的示例：stackoverflow.com/help/Minimal-repeatable-Example。
savedata.php
和
save\u secondary\u details.php
之间有什么区别？警告：您完全可以使用参数化的预处理语句，而不是手动生成查询。它们由或提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行。实际上它只是save_secondary_details.php，没有像savedata.php这样的文件。我尝试过将action=”“属性保持为空，在这种情况下，在我单击submit按钮后，页面将重新加载，并且数据库中没有插入任何数据。当我将action=“save_secondary_details.php”属性保持为这样时，表单被重定向到php页面，数据被插入数据库。但我不想要它
<div class="row">


                    <div class="col-md-12 col-sm-12 ">
                    <div class="x_panel tile " > 
                    <div class="x_title">
                      <h2>Secondary Education Details</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>    </li>
                      </li>
                    </ul>
                      <div class="clearfix"></div>
                      </div>
                        <div class="x_content">
                        
                        <form class="form-horizontal form-label-left" method="post" id="secondary_education_details" action="save_secondary_details.php">

                        <div class="form-group row">
                        
                          <label class="col-form-label col-md-3 col-sm-3 label-align" for="institute-name">Name of the Institute/School/College: <span class="required">*</span>
                          </label>
                          <div class="col-md-6 col-sm-6 ">
                          <input type="text" name="instituteName[]" required="required" class="form-control  ">
                          </div>  

                        </div>


                        <div class="form-group row">
                          <label class="col-form-label col-md-3 col-sm-3 label-align" for="university-name">Board/University: <span class="required">*</span>
                          </label>
                          <div class="col-md-6 col-sm-6 ">
                          <input type="text"  name="universityName[]" required="required" class="form-control ">
                          </div>
                        </div>


                      <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="duration">Duration of Study (specify month & year): <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text"  name="duration[]" required="required" class="form-control ">
                        </div>
                      </div>

                      <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="division">Division/Class/% : <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text"  name="division[]" required="required" class="form-control  ">
                        </div>  
                      </div>

                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="degree-obtained">Degree Obtained : <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                            <p style="
                            margin-top:8px;">
                                Yes:
                                <input type="radio" class="flat" name="obtained[0]"  value="yes" required="required" /> 
                                No:
                                <input type="radio" class="flat" name="obtained[0]"  value="no" />
                            </p>
                        </div>  
                      </div>

                      <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="course-type">Course Type: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                            <p style="
                            margin-top:8px;">
                                Regular:
                                <input type="radio" class="flat" name="course_type[0]"  value="regular" required="required" /> 
                                Distance:
                                <input type="radio" class="flat" name="course_type[0]"  value="distance" />
                            </p>
                        </div>  
                      </div>

                      <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="major">Majored in:<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text"  name="major[]" required="required" class="form-control  ">
                        </div>  
                      </div>

                      <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="roll-no">Student ID/Enrolment/Registration/Roll No: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text"  name="roll_no[]" required="required" class="form-control  ">
                        </div>  
                      </div>
                      <br><h4><center>Address of Institute/School/College</center></h4><br>
                      <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="building-no">Building No & Street: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <textarea class="form-control"  name="building_no[]" required="required" ></textarea>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="city">City: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text" class="form-control"  name="city[]" required="required" >
                        </div>
                        </div>
                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="state">State: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text" class="form-control"  name="state[]" required="required" >
                        </div>
                        </div>
                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="pin">PIN: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text" class="form-control"  name="pin[]" required="required" >
                        </div>
                        </div>
                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="landline">Landline: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="text" class="form-control"  name="landline[]" required="required" >
                        </div>
                        </div>
                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="mark-sheets">Mark Sheets: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="file"  name="mark_sheets[]" required="required" >
                        </div>
                        </div>
                        <div class="form-group row">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="degree-certificate">Degree Certificate: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="file"  name="degree_certificate[]" required="required" >
                        </div>
                        </div>
                        <div class="form-group row" >
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="provisional-degree">Provisional Degree certificate: <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                          <input type="file"  name="provisional_degree[]" required="required" >
                        </div>
                        </div>
                      <div id="001">
                        
                      </div>
                      <div class="row">
                      <span id="result"></span>
                      </div>
                      <div class="row" style="margin-top:40px;">
                        <div class="col-md-6 offset-md-9">
                          <button type="button" name="add1" value="Add more" id="add1" class="btn btn-success btn-lg" style=" padding: 12px;
                                width: 154px;border-radius: 10px;
                                ">Add more</button>
                          <button type="submit" name="save1" id="save1" value="Save1"  class="btn btn-info btn-lg" style=" padding: 12px;
                                width: 154px;border-radius: 10px;background-color: #3f51b5;
                                ">Save</button>
                        </div>
                      </div>
                      
                        
                          
                        
                      

                      </form>
                      
                    
                    </div>
                  </div>
                </div>

//another way to write $(document).ready(function() {
$(function() {
    $('form').on('submit', function(event) {
        //stop default form submission
        event.preventDefault();
        //submit form via AJAX
        $.post('savedata.php', $(this).serialize())
        //show response when done
        .done(function(data) {
            console.log( data );
         });
    });
});