jquery - Hinzufügen von Feldern zu einem Formular dynamisch - Postdaten fehlt, wenn Sie Formular

Question

Hintergrundinformationen

Ich habe ein Formular, dass unter anderem der Benutzer Vorname/Name Textfelder dynamisch hinzufügen können mit jquery.

Problem

Wenn der Benutzer die Daten einreicht, die zusätzlichen Felder & Daten, die über Jquery erstellt wurde aus dem POST fehlt.

Testdetails

Mit der „Addname“ -Taste, füge ich zwei oder drei weitere Namen neben den Standard fname/lname Felder, die auf dem Formular sind. Und dann reiche ich die Daten ein. Den Daten fehlen die dynamisch hinzugefügten Felder.

Was ich/Karo Versuchte

1. dafür gesorgt, dass ich neue Zeilen von „Vornamen“/„Nachname“ Textfelder hinzufügen, jeder Kontrolle einen einzigartigen „name“ hat. Wie Sie sehen können, weise ich dem ersten Namensfeld einen benutzerdefinierten Klassennamen zu, und dann nehme ich in jQuery an, wie viele Vornamenfelder ich bereits habe. Ich erhöhe diesen Wert um 1 und backe dann die neue Zahl in die Namen der neuen Textfelder, die ich erstellt habe. Mit dem F12-Debug-Fenster kann ich sehen, dass der HTML-Code diese Counter in die Namen eingebacken hat.

2. dafür gesorgt, dass die Reihen der dynamisch hinzugefügten Daten sind in den <FORM>

3. dafür gesorgt, dass ich eine Schaltfläche im Formular einreichen.

Ich bin mir nicht sicher, was ich sonst noch überprüfen sollte.

Wenn Sie irgendwelche Vorschläge haben, würde ich es begrüßen.

//Here's of the two jquery methods I have that allows users to dynamically add new fields/data to the form: 
 

 
$("#addname").click(function() { 
 
    var numItems = $('.widgetname').length; //count all items with widgetname class 
 
    numItems += 1; 
 
    htmlstring = "<tr>"; 
 
    htmlstring += "<td><input class='form-control widgetname' type='input' placeholder='First Name' name='fname" + numItems + "'/></td>"; 
 
    htmlstring += "<td colspan='2'><input class='form-control' type='input' placeholder='Last Name' name='lname" + numItems + "' /></td>"; 
 
    htmlstring += "</tr>"; 
 
    $("#tcsection").before(htmlstring); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <tr> 
 
    <td colspan="3" class="btn-warning"> 
 
     <?php echo validation_errors(); ?> 
 
    </td> 
 
    <tr> 
 
     <?php echo form_open('widget/assign'); ?> 
 
     <tr> 
 
     <td colspan="3"> 
 
      <div class="form-group"> 
 
      <select class="form-control" name="widgetlist" id="widgetnum"> 
 
      </select> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="3"> 
 
      <div class="form-group"> 
 
      <select class="form-control" placeholder="Site:" name="site" id="site"> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="3"> 
 
      <input class="form-control" type="input" placeholder="Location" name="location" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="3"> 
 
      <input class="form-control" type="input" placeholder="Department" name="department" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="listofnames"> 
 
     <td> 
 
      <input class="form-control widgetname" type="input" placeholder="First Name" name="fname" /> 
 
     </td> 
 
     <td> 
 
      <input class="form-control" type="input" placeholder="Last Name" name="lname" /> 
 
     </td> 
 
     <td> 
 
      <button id='addname' type="button" class="btn btn-info btn-circle"><i class="fa fa-plus"></i> 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr id="tcsection"> 
 
     <td colspan="3">&nbsp;</td> 
 
     </tr> 
 
</table> 
 
<table class="table table-bordered table-hover"> 
 
    <tr> 
 
    <td colspan="5"> 
 
     <h2>TC</h2> 
 
    </td> 
 
    </tr> 
 
    <tr id="tcs"> 
 
    <td> 
 
     <input class="form-control starttc" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime" /> 
 
    </td> 
 
    <td> 
 
     <input class="form-control" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime" /> 
 
    </td> 
 
    <td> 
 
     <input class="form-control" type="input" placeholder="Extension" name="extension" /> 
 
    </td> 
 
    <td> 
 
     <input class="form-control" type="input" placeholder="Domain" name="domain" /> 
 
    </td> 
 
    <td> 
 
     <button id='addtc' type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i> 
 
     </button> 
 
    </td> 
 
    </tr> 
 
    <tr id="submitbtnsection"> 
 
    <td colspan="5"> 
 
     <input type="submit" name="submit" class="btn btn-primary" value="Assign Widget" /> 
 
    </td> 
 
    </tr> 
 
    </form> 
 
</table>

Answer 1

Versuchen Sie das Formular geöffnet außerhalb der Tabelle zu bewegen.

Ich sehe jetzt seltsam html:

<tr> <?php echo form_open('widget/assign'); ?> <tr> 

intead erwartete ich

<?php echo form_open('widget/assign'); ?> 
<table class="table table-bordered table-hover"> 
    <tr> 
    <td colspan="3" class="btn-warning"> 
     <?php echo validation_errors(); ?> 
    </td> 

PS: Sie sollten nie name = "Eintragen" für jedes Formularelement verwenden, wenn Sie planen, das Formular abzuschicken mit Skript. Es überschreibt alle senden Ereignishandler