Click here to Skip to main content
15,878,852 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
please who can help i want create input field whenever a button is click but i don't kown how do that.

What I have tried:

i try to google it out but no answer yet
Posted
Updated 2-May-17 19:55pm
Comments
j snooze 2-May-17 17:41pm    
If you're using jquery its pretty simple. on your button click event, grab the parent (div or table) where you want this text field to be. Then append the html for your input field.

function buttonclicked(){
$("#divTextFieldHolder").append('');
}

1 solution

Hi alertfrancis,

You can use createElement and appendChild JavaScript methods to do this.
JavaScript
<div id="dynamicCheck">
   <input type="button" value="Create Element" onclick="createNewElement();"/>
</div>

<div id="newElementId">New inputbox goes here:</div>
JavaScript
==========
JavaScript
<script type="text/JavaScript">
function createNewElement() {
    // First create a DIV element.
	var txtNewInputBox = document.createElement('div');

    // Then add the content (a new input box) of the element.
	txtNewInputBox.innerHTML = "<input type='text' id='newInputBox'>";

    // Finally put it where it is supposed to appear.
	document.getElementById("newElementId").appendChild(txtNewInputBox);
}
</script>
Please read more on them on the net.
 
Share this answer
 
Comments
alertfrancis 3-May-17 8:45am    
thanks it work well,but is there way i can make simply calculation between the new created input field with the already existing i also need this help thanks in advance.
Mehedi Shams 4-May-17 0:15am    
Hi Francis,

That would be simple as well. As soon as you create an element, that will be available in DOM. You can refer to it using 'document.getElementById'. E.g.:

input type="button" value="Calculate" onclick="calculateWithTheNewInput();"

function calculateWithTheNewInput() {
alert(document.getElementById("newInputBox").value + " This is the other existing input.");
}

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900