簡體   English   中英

獲取動態添加的輸入值

[英]Get value of dynamically added input

我有一個可以添加其他輸入字段的表單。 我使用 $_POST['input_name'] 獲得這些值,並且可以插入到數據庫/發送郵件。 問題是,如果留下錯誤,我希望在刷新頁面時顯示這些字段和值,但是我無法在 Jquery 代碼中獲取動態添加的輸入值 - 只是靜態添加的第一個。 是否可以在 jQuery 代碼中獲得這些值?

我的 HTML

<div class="field_wrapper">
<div>
 <input type="text" name="input_name[]" class="form-control" placeholder="Enter name" value="<?php if(isset($_POST['input_name'])) echo $_POST['input_name'][0];?>"/>
<a href="javascript:void(0);" class="add_button" title="Add field"></a>
</div>

 </div>

我的 jQuery

jQuery(document).ready(function(){

    console.log(jQuery('#contactForm').serialize()); <- getting first value

    var vals = jQuery("input[name='input_name[]']").map(function(){ return this.value}).get();
    console.log(vals); <- getting first value
    var maxField = 10; //Input fields increment limitation
    var addButton = jQuery('.add_button'); //Add button selector
    var wrapper = jQuery('.field_wrapper'); //Input field wrapper

    var x = 1; //Initial field counter is 1
    
    //Once add button is clicked
    jQuery(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            var fieldHTML = '<div><input type="text" name="input_name[]" class="form-control" placeholder="Enter name"/> \
            <a href="javascript:void(0);" class="remove_button"></a></div>'; 
            x++; //Increment field counter
            jQuery(fieldHTML).appendTo(wrapper); //Add field html
        }
    });
    
    //Once remove button is clicked
    jQuery(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        jQuery(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

最近我正在研究它。 你可以從這里獲得幫助https://github.com/arafatrahman/wp-redirect-url/blob/main/views/wpru-settings-view.php

您還需要檢查此插件https://github.com/arafatrahman/wp-redirect-url上的其他文件

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM