提交动态形式异步

-3

我希望能够动态地添加文本字段每当按钮点击提交动态形式异步
我希望能够得到从文本字段中的数据并将其插入到数据库。
由于现在一切的作品，我只是需要这个，也许我可以还添加了一个删除按钮来删除最后一个文本字段动态也
为什么我需要这是动态的原因是因为我不想刷新页面导致所有数据将丢失
我发现了一个代码，可以帮助我动态地添加文本字段但我不知道如何使它，以便我需要转到另一个页面以访问数据

<html> 
<form action="checklist3.php" method="post"> 
    <button type='submit' name='submit' id='buttonParent'>Submit</button> 
    <button type="submit" name="back">Back</button> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

    <?php 
    session_start(); 
    require_once('../mysql_connect.php'); 
    $rowarray = $_SESSION['rowarray']; 
    $dishname = $_SESSION['dishname']; 


    echo '<br>'; 
    echo "Add Procedures"; 
    echo ' <form name="addproc" id="addproc"> 
       <table class="proctable" id="proctable"> 
             <tr> 
              <td><input type="text" name="procedure[]" placeholder="Enter your Name" class="form-control name_list" /></td> 
              <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> 
             </tr> 
            </table> 
         </form>'; 


    echo "<input type='button' value='Remove Button' id='removeButton'>"; 
    echo "<body>"; 


    echo "</body>"; 

    if (isset($_POST['home'])) { 
     header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/chefmenu.php"); 
    } 
    if (isset($_POST['back'])) { 
     header("Location: http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/checklist2.php"); 
    } 

    ?> 

</form> 

<script> 
    $(document).ready(function() { 
     var i = 1; 
     $('#add').click(function() { 
      i++; 
      $('#proctable').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter Procedure" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>'); 
     }); 
     $(document).on('click', '.btn_remove', function() { 
      var button_id = $(this).attr('id'); 
      $('#row' + button_id + '').remove(); 
     }); 
     $('#submit').click(function() { 
      $.ajax({ 
       url: 'name.php', 
       method: 'POST', 
       data: $('#addproc').serialize(), 
       success: function (data) { 
        alert(data); 
        $('#addproc')[0].reset(); 
       } 
      }); 
     }); 
    }); 
</script> 

</html>

来源

2017-11-11 Zayden Lim

很容易一点点的jQuery和AJAX做：使用jQuery

创建和append场到您的表单，像
捕获与jQuery表单sumission事件收听者：$("form").live("submit", function (e){e.preventDefault()...}
将所有表单（包含新添加的字段）序列化并通过AJAX发送给他们

的代码的示例：

$("form").live("submit", function (event) { 
     event.preventDefault(); 
     var form = $(this); 
     $.ajax({ 
      url: form.attr('action'), // Get the action URL to send AJAX to 
      type: "POST", 
      data: form.serialize(), // get all form variables 
      success: function(result){ 
       // ... do your AJAX post result 
      } 
     }); 
    });

来源

2017-11-11 14:15:52 Boulboulouboule

提交动态形式异步

回答

相关问题