獲取在點擊事件中創建的輸入字段的值

我正在研究類似的表單fiddle
它創建了我所需要的動態表單字段。
現在我需要當用戶填寫這些字段上的on-change事件的數據時，我想檢索字段來總結所有字段的值。
或
每次用戶填寫或更改這些字段的值時，都需要從此字段值進一步計算。獲取在點擊事件中創建的輸入字段的值

var count = 0; 
window.createinput = function(){ 
    field_area = document.getElementById('fields') 
    var li = document.createElement("li"); 
    var input = document.createElement("input"); 
    input.id = 'field'+count; 
    input.name = 'field'+count; 
    input.size = "30"; 
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. 
    li.appendChild(input); 
    var input2 = document.createElement("input"); 
    input2.id = 'field2'+count; 
    input2.name = 'field2'+count; 
    input2.size = "10"; 
    input2.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. 
    li.appendChild(input2); 
    var input3 = document.createElement("input"); 
    input3.id = 'field3'+count; 
    input3.name = 'field3'+count; 
    input3.size = "20"; 
    input3.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. 
    li.appendChild(input3); 
    field_area.appendChild(li); 
    //create the removal link 
    var removalLink = document.createElement('a'); 
    removalLink.className = "remove"; 
    removalLink.onclick = function(){ 
     this.parentNode.parentNode.removeChild(this.parentNode) 
    } 
    var removalText = document.createTextNode('Remove Field Group'); 
    removalLink.appendChild(removalText); 
    li.appendChild(removalLink); 
    count++ 
}

來源

2014-06-18 Nothing

使用更改/輸入事件來完成您的任務..！ –

您允許使用JQuery，@Nothing嗎？ – Arvind

我使用wordpress任何東西都可以使用我可以用dat jquery/js – Nothing

This

它有這個腳本（需要的jQuery）：

$(document).ready(function() { 
    var counter = 0; 

    $("#addrow").on("click", function() { 

     counter = $('#myTable tr').length - 2; 

     var newRow = $("<tr>"); 
     var cols = ""; 

     cols += '<td><input type="text" name="name' + counter + '"/></td>'; 
     cols += '<td><input type="text" name="price' + counter + '"/></td>'; 

     cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>'; 
     newRow.append(cols); 

     $("table.order-list").append(newRow); 
     counter++; 
    }); 

    $("table.order-list").on("change", 'input[name^="price"]', function (event) { 
     calculateRow($(this).closest("tr")); 
     calculateGrandTotal();     
    }); 


    $("table.order-list").on("click", ".ibtnDel", function (event) { 
     $(this).closest("tr").remove(); 
     calculateGrandTotal(); 

     counter -= 1 

    }); 


}); 



function calculateRow(row) { 
    var price = +row.find('input[name^="price"]').val(); 

} 

function calculateGrandTotal() { 
    var grandTotal = 0; 
    $("table.order-list").find('input[name^="price"]').each(function() { 
     grandTotal += +$(this).val(); 
    }); 
    $("#grandtotal").text(grandTotal.toFixed(2)); 
}

撥弄會回答你的問題..它添加和刪除行。（你可以把它改成形式）

UPDATE：

這Fiddle回答了有機磷農藥的評論請求。

來源

2014-06-18 05:07:48 Yaje

+1。順便說一句：函數'calculateRow'是多餘的。 – Abhitalks

ü真棒哥們我會去用它，但首先我需要了解如何這是怎麼回事謝謝 – Nothing

嗨@Ejay我修改了它http://jsfiddle.net/2jsjw/但問題是，當我刪除線它doesn' t減去價值可以幫助我請 – Nothing

<html> 
<head> 
<title> Dynamically create input fields- using jQuery </title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     var addDiv = $('#addinput'); 
     var i = $('#addinput p').size() + 1;   
     $('#addNew').live('click', function() { 
       $('<p><input type="text" size="40" name="fname' + i +'" value="" placeholder="enter the first name" /> &nbsp; <input type="text" size="40" name="lname' + i +'" value="" placeholder="enter the last name" /> &nbsp; <input type="text" size="20" name="age' + i +'" value="" placeholder="enter the age" /><input type="button" id="remNew" value="Remove"> </p>').appendTo(addDiv); 
       i++;     
       return false; 
     }); 

     $('#remNew').live('click', function() { 
       if(i > 2) { 
         $(this).parents('p').remove(); 
         //i--; 
       } 
       return false; 
     }); 
}); 

</script> 

</head> 
<body> 
<h2>Dynammically Add New Input Box</h2> 
<div id="addinput"> 
    <p> 
    <input type="button" id="addNew" value="Add New fields"> 

    </p> 
</div> 

</body> 
</html>

來源

2014-06-18 05:32:56

獲取在點擊事件中創建的輸入字段的值

回答

相關問題