클릭시 생성 된 입력 필드의 값을 얻습니다.

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, @ 아무것도 사용할 수 있습니까? – Arvind

나는 워드 프레스를 사용하여 뭐든지 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)); 
}

바이올린은 귀하의 질문에 대답 것이다 .. 그것은 추가하고 행을 삭제합니다.이 Fiddle

이 작전이 코멘트에 요청 대답

UPDATE (당신은 형태로 변경할 수 있습니다.)

출처

2014-06-18 05:07:48 Yaje

+1과 함께 할 수있다. BTW : 함수'calculateRow' 중복됩니다. – Abhitalks

u awesome buddy 나는 그것과 함께 갈 것이지만, 나는 이것이 어떻게 진행되고 있는지 이해할 필요가있다. – Nothing

안녕하세요, @Ejay http://jsfiddle.net/2jsjw/ 개까지 개조했는데 문제는 그 줄을 제거 할 때, 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

클릭시 생성 된 입력 필드의 값을 얻습니다.

답변

관련 문제