dynamische Form Senden asynchron

-3

ich dynamisch in der Lage sein, um Textfelder hinzufügen, wenn die Schaltfläche geklickt wirddynamische Form Senden asynchron
Ich möchte die Daten aus den Textfeldern erhalten können, und setzen Sie sie in die Datenbank.
Ab jetzt ist alles andere funktioniert und ich dies nur brauchen, vielleicht kann ich auch eine Schaltfläche Entfernen fügen Sie das letzte Textfeld zu entfernen dynamisch auch
der Grund, warum ich brauche diese Dynamik zu sein, weil Ich möchte nicht die Seite aktualisieren, weil alle Daten verloren gehen
Ich habe einen Code gefunden, der mir helfen würde, Textfelder dynamisch hinzuzufügen , aber ich weiß nicht, wie man es so macht, dass ich müsste Gehen Sie zu einer anderen Seite, nur um auf Daten zuzugreifen

<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>

Quelle

2017-11-11 Zayden Lim

Es ist einfach, mit ein wenig von jQuery und AJAX zu tun:

Erstellen und append ein Feld in Ihrem Formular jquery verwenden, so etwas wie
Erfassen Sie Ihre Form sumission mit jquery Ereignis-Listener: $("form").live("submit", function (e){e.preventDefault()...}
Serialisieren Sie alle Ihre Form (mit den neu hinzugefügten Feldern) und senden Sie sie über AJAX

Ein Beispiel für Code:

$("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 
      } 
     }); 
    });

Quelle

2017-11-11 14:15:52 Boulboulouboule

dynamische Form Senden asynchron

Antwort

Verwandte Themen