[RESOLVED] adding html controls Value problem

Justtoby · #1 11-17-2009, 04:31 PM

Hello,

i want to use the adding html controls found on the site. No is it working okay except one thing. I added another textfield. So now when i press the button there will be two textfields: Name and Email. So far so good. Now, when i fill in the two textfields and add another field by pressing the button the two fields get the same value. I coppied the text below.

As you can see i am bad at english and even worse with JS but i really want to use this in my script

function createInput(id,value) {
return "Naam: <input name='naam[]' type='text' id='naam "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'> Email: <input name='email[]' type='text' id='email "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}

i hope you can help me

**Fang** · #2 11-18-2009, 02:57 AM

How is this inserted into the document?
id must be unique in the document.
Using correct dom methods would be better:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>add remove input</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function addInput() {
var parent=document.getElementsByTagName('fieldset')[0];
var aInput=parent.getElementsByTagName('input');
var o;
var oName=aInput[0].name+aInput.length
try { //IE method
	o=document.createElement('<input type="text" name="'+oName+'">');
}
catch (error) { // DOM method
    var o=document.createElement("input");
    o.setAttribute('type', 'text');
    o.setAttribute('name', oName);
}
parent.appendChild(o);
}

function removeInput() {
var parent=document.getElementsByTagName('fieldset')[0];
var aInput=parent.getElementsByTagName('input');
if(aInput.length>1) { // leave a least 1 input
    parent.removeChild(aInput[aInput.length-1]);
    }
}
</script>

<style type="text/css">
input {display:block;} 
</style>

</head>
<body>
<form action="#" method="post" name="form1">
<fieldset><legend>list</legend>
	<input type="text" name="foo">
</fieldset>
<div>
    <button type="button" onclick="addInput()">addInput</button>
    <button type="button" onclick="removeInput()">removeInput</button>
    <button type="submit" name="list">submit</button>
</div>
</form>
</body>
</html>

Justtoby · #3 11-18-2009, 05:59 AM

Hey thanks for your reaction,

I have tried your code but now i only get one textfield. That was working with the other as well. But when i want two textfield i get the problem of the wrong value in the wrong field after pressing "add new". I will use it in PHP so i used the [] after the name so i can count() the post results.

But my problem is i cant write javascript

i try to read and understand it but when i change something it aint working anymore

so maybe someone can explain me how i can get:
Name: <textfield> Email: <textfield>
After pressing the add button and the value is not changing when i add another one.

I really hope someone understand my messedup mind

**Fang** · #4 11-18-2009, 07:13 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>clone</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function clone() {
var parent=document.getElementById('naw0');
var cloned=parent.cloneNode(true);
// unique id
var aNaam=document.getElementsByName('naam[]');
var num=aNaam.length;
cloned.id='naw'+num;
//insert after last pair
parent.parentNode.insertBefore(cloned, document.getElementById('naw'+(num-1)).nextSibling);
//clear inputs
var aInput=cloned.getElementsByTagName('input');
aInput[0].value=aInput[1].value='';
}
</script>

</head>
<body>
<form action="#" method="post" name="form1">
<div id="naw0">
<label>Naam:<input type="text" name="naam[]"></label>
<label>Email:<input type="text" name="email[]"></label>
</div>
<button type="submit" name="submit" value="done">submit</button>
<button type="button" onclick="clone();">clone</button>
</form>
</body>
</html>

Justtoby · #5 11-18-2009, 07:17 AM

That is what i want! GREAT! THANKS!

mjstam1989 · #6 11-23-2009, 06:47 AM

I'm also using this script but when i clone my input field it doesn't clear it....

This is my code:

javascript:

Code:

    <script type="text/javascript">
		function clone() {
		var parent=document.getElementById('veld0');
		var cloned=parent.cloneNode(true);
		// unique id
		var aNaam=document.getElementsByName('apparatuur[]');
		var num=aNaam.length;
		cloned.id='veld'+num;
		//insert after last pair
		parent.parentNode.insertBefore(cloned, document.getElementById('veld'+(num-1)).nextSibling);
		//clear inputs
		var aInput=cloned.getElementsByTagName('input');
		aInput[0].value=aInput[1].value='';
	}
</script>

Form:

Code:

<form name="form1" action="sql.php" method="POST">
    		<div id="veld0">
    <label>
      		<span class="tekst">Apparaatnaam:</span>
     	<input type="text" name="apparatuur[]" size="25" maxlength="25" />
    </label>
    <br />
</div>
    	<p>
      <input type="submit" name="voegtoe" value="Voeg toe" />
      <input type="button" onclick="clone();" value="extra invoerveld" />
</form>

**Fang** · #7 11-23-2009, 06:59 AM

Code:

var aInput=cloned.parentNode.getElementsByTagName('input');

mjstam1989 · #8 11-23-2009, 07:31 AM

Thanks, but when I use this it also clears the first field.... Is there any possibility that it only adds a clear field without clearing other fields(A)

**Fang** · #9 11-23-2009, 07:57 AM

Code:

//clear input
var aInput=cloned.parentNode.getElementsByTagName('input');
aInput[aInput.length-3].value='';
// or
var aInput=cloned.getElementsByTagName('input');
aInput[0].value='';

mjstam1989 · #10 11-23-2009, 08:38 AM

Thanks a lot! Everything works great now!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)