使用jquery和mysql保存多个文本框的值

Question

如何使用mysql将动态生成的字段值插入到后端。

我试图用文本框添加行，并使用jQuery下拉并自动保存 字段值的定期。

所以我需要取出文本框的ID并下拉，但目前我只有第一个文本框的ID和下拉。

$(function() { 
 
    $("#btnAdd").bind("click", function() { 
 
     AddControl(); 
 
    }); 
 

 
    $("#btnGet").bind("click", function() { 
 
     var values = ""; 
 
     $("input[name=DynamicTextBox]").each(function() { 
 
      values += $(this).val() + "\n"; 
 
     }); 
 
     alert(values); 
 
    }); 
 

 
    $("body").on("click", ".remove", function() { 
 
     $(this).closest("div").remove(); 
 
     var i = 1; 
 
     var Ids = []; 
 
     $('[id*=ddl]').each(function() { 
 
      $(this).attr("id", "ddl" + i); 
 
      Ids.push(i); 
 
      i++; 
 
     }); 
 
     $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1); 
 
      var resultIds = Ids.join(','); 
 
      $('[id*=hfDropDownIds]').val(resultIds); 
 
     }); 
 
    }); 
 

 
    function AddControl() { 
 
     var Id = parseInt($('[id*=hfDDLId]').val()) + 1; 
 
     var ddlId = "ddl" + (Id); 
 
     var div = $("<div />"); 
 
     div.html(getDropDownList(ddlId, ddlId)); 
 
     div.append(GetDynamicTextBox('')); 
 
     $("#TextBoxContainer").append(div); 
 
     $('[id*=hfDDLId]').val(Id); 
 

 
     var previousDropDownId = $('[id*=hfDropDownIds]').val(); 
 
     if (previousDropDownId != '') { 
 
      $('[id*=hfDropDownIds]').val(previousDropDownId + ',' + Id); 
 
     } else { 
 
      $('[id*=hfDropDownIds]').val(Id); 
 
     } 
 
     return false; 
 
    } 
 

 
    function getDropDownList(name, id) { 
 
     var combo = $("<select></select>").attr("id", id).attr("name", name).attr("runat", "server").attr("class", "class").attr("required", "required"); 
 
     combo.append("<option value=" + "" + ">" + "Select Category" + "</option>"); 
 
     combo.append("<option value=" + "1" + ">" + "1" + "</option>"); 
 
     combo.append("<option value=" + "2" + ">" + "2" + "</option>"); 
 
     combo.append("<option value=" + "3" + ">" + "3" + "</option>"); 
 
     return combo; 
 
    } 
 

 
    function GetDynamicTextBox(value) { 
 
     return '<input name = "DynamicTextBox" id="ingr_name" type="text" value = "' + value + '" required/>&nbsp' + '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp' + '<input type="button" value="Remove" class="remove" />' 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <div> 
 
     <input id="btnAdd" type="button" value="Add" /> 
 
     <br/> 
 
     <br/> 
 
     <div id="TextBoxContainer"> 
 
      <!--Textboxes will be added here --> 
 
     </div> 
 
     <br/> 
 
     <input type="hidden" id="hfSelectedValue" runat="server" /> 
 
     <input type="hidden" id="hfDropDownIds" value="" runat="server" /> 
 
     <input id="btnGet" type="button" value="Get Values" /> 
 
     <input type="hidden" id="hfDDLId" value="0" /> 
 
    </div> 
 
</form>

代码在后端

Assunimg插入我已经给id为文本框为 'ingr_name' 聊天室张贴一样：

<?php 

$con=mysqli_connect("localhost","root","pass","DB"); 

if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

if (isset($_POST['txt_area']) && $_POST['txt_area'] != '') {  

$ingr_name = mysqli_real_escape_string($con,$_POST['ingr_name']); 
$qry = "Select count(*) as cnt from table"; 
$res = mysqli_query($con,$qry);  
$row = mysqli_fetch_array($res); 
if ($row['cnt'] == 0) { 
    $qry_ins = 'my insert query'; 
} 
?> 

Answer 1

@SachinSachin如果你只想插入一个文本框的值，请尝试下面的代码

function insert_data(){ 
      var url = "insert.php"; 
      $.ajax({ 
        url : url, 
        type: "POST", 
        data: $('#formid').serialize(), 

        success: function(data) 
        { 
         alert(data); 

        } 
       }); 
     } 

在提交按钮上调用此函数，并在insert.php中，像往常一样使用post方法获取值并将它们插入到mysql中。如果是成功打印echo "inserted";其他打印echo "failed";您将在上述insert_data()函数中的警报消息中获得此状态。在这里，我假设你使用PHP作为后端，如果不使用你的语言相同的过程。