/    Sign up×
Community /Pin to ProfileBookmark

javascript how to iterate fields dynamically created ?

Hi all,

I want to add dynamically some fields and jquery get them and apply some auto-complete functions but not for all the new fields. That’s why i used the id selector for jquery and thats why I would like to iterate the id of some fields.I tried this :

inputnode3.innerHTML = ” <input value=” name=’nationalita’ id='”+nationatID+” type=’text’ class=’input req-same’>”;

I also tried this…

inputnode3input = inputnode3.childNodes[0];

inputnode3input.setAttribute(‘id’,nationatID);

but it doesn’t work

I paste all my code also , maybe I didnt start the good way…

<!–#begin add_new_file –>
<html>
<script type=”text/javascript” src=”{ babSkinPath }templates/addons/{ babAddonFolder }/files/scripts/add_new_file.js”> </script>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<script type=”text/javascript”>

function SaveInput(action,addFileForm)

{
document.forms[addFileForm].action.value = ‘save’;
alert(‘ben on nest dans saveinput’);
return true;
}

function addchamps(idChamp) {
try {
var conteneur = document.getElementById(idChamp);

var ligne = document.createElement(‘p’);

var champ_input = document.createElement(‘input’);
champ_input.setAttribute(‘type’,’input’);
champ_input.setAttribute(‘name’,’lastname’);

ligne.appendChild(champ_input);
conteneur.appendChild(ligne);

}
catch(e) {
alert(e);
}
}

var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert(“You have reached the limit of adding ” + counter + ” inputs”);
}
else {
//var newlastnamediv = document.createElement(‘div’);
//newlastnamediv.innerHTML = “lastname” + (counter + 1) + ” <br><input type=’text’ name=’myInputs[]’>”;
// document.getElementById(divName).appendChild(newlastnamediv);
//counter++;

tabBody=document.getElementsByTagName(“TBODY”).item(0);
row=document.createElement(“TR”);
$est_pair = counter%2;
//alert(‘la valeur est’+$est_pair);

if ($est_pair == 0)

{
//alert(‘on est dedans’+$est_pair);
row.setAttribute(“style”,”background-color: #FFFFCC”);
};

//style=”background-color: #FFFFCC

cell1 = document.createElement(“TD”);
cell2 = document.createElement(“TD”);
cell3 = document.createElement(“TD”);
cell4 = document.createElement(“TD”);

content_1 = “Firstname “+(counter);
textnode1=document.createTextNode(content_1);
var inputnode1 = document.createElement(‘div’);
inputnode1.innerHTML = ” <br><input type=’text’ name=’myInputs[]’>”;

content_3 = “Lastname “+(counter);
textnode3=document.createTextNode(content_3);
var inputnode3 = document.createElement(‘div’);

nationatID = “nationalita”+counter;
//inputnode3.innerHTML = ” <input value=” name=’nationalita’ id='”+nationatID+” type=’text’ class=’input req-same’>”;

inputnode3.innerHTML = ” <input value=” name=’nationalita’ type=’text’ class=’input req-same’>”;

//nationatID = “nationalita”+counter;
//inputnode3.childNodes[0].setAttribute(‘id’,nationatID);

inputnode3input = inputnode3.childNodes[0];

inputnode3input.setAttribute(‘id’,nationatID);

cell1.appendChild(textnode1);
cell2.appendChild(inputnode1);
cell3.appendChild(textnode3);
cell4.appendChild(inputnode3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
tabBody.appendChild(row);

//counter++;

}

jQuery(document).ready(function(){

jQuery.noConflict();

jQuery(function() {

var input = jQuery(‘#’+nationatID);

var output = jQuery(“#id_nationality”);

alert(‘ben on est dans jquery’);

jq_autocomplete(input,”index.php?tg=addon/revol/files/ajax_req_add_new_file&ajq=nationality”,output);

});

});

}
</script>
</head>

<body>

<form id=”FileValidationForm” name=”addFileForm” class=”form” method=”post” action=”{ babPhpSelf }”>

<input type=”hidden” name=”tg” value=”{ babAddonTarget }/files/file”>

<input type=”hidden” name=”action” value=””>

<table width=”100%”>
<tbody>
<tr>

<td>
<div class=”label”>{ destination_nation }<font color=”red”> *</font></div>
</td>
<td>
<div class=”input-container”><input name=”destination_nation” minlength=”2″ /></div>
</td>
<td>
<div class=”label”>{ departure_hour }<font color=”red”> *</font></div>
</td>
<td>
<input name=”departure_hour” class=”required inputAdd” minlength=”2″ />
</td>
</tr>

<tr>
<td>
<div class=”label”>{ label_nationality }<font color=”red”> *</font></div>
</td>
<td>
<div ><input value=”” name=”nationality” id=”nationality” type=”text” class=”input-req-same”></div>
</td>

</tr>

<tr>
<td>
<div class=”label”>{ label_nationality }<font color=”red”> *</font></div>
</td>
<td>
<div ><input value=”” name=”nationalito” id=”nationalito” type=”text” class=”input req-same”></div>
</td>

</tr>

<div id=”champs_sup”></div>

</tbody>

</table>

<input type=”button” value=”Ajouter un nouveau champ de saisie” onclick=”addInput(‘champs_sup’)” />

<input name=”submitSave” value=”qu’est ce qui se passe ?” type=”submit” class=”sendBtn” onclick=”SaveInput(‘save’, ‘addFileForm’);”/>

</form>

</body>
</html>
<!–#end add_new_file –>

thank you.

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @pablogodoy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...