I am implementing an extend form function, in which there is a label text (marked in html) that I hope to include a number to increment.
So every time when a form is extended/cloned, the label text in the extended form shows Student 1, Student 2... accordingly. Can I be advised how to do that?
var counter = 0;
function moreFields(val1, val2, val3) {
counter++;
var newField = document.getElementById(val1).cloneNode(true);
newField.id = '';
newField.style.display = 'block';
var newFields = newField.querySelectorAll('[name], [id], [for]');
for (var i=0;i<newFields.length;i++) {
var theNames = newFields[i].name
if (theNames)
newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]";
var theNames2 = newFields[i].id;
if (theNames2)
newFields[i].id = theNames2 + counter;
var theNames3 = newFields[i].htmlFor;
if (theNames3)
newFields[i].htmlFor = theNames3 + counter;
}
var insertHere = document.getElementById(val2);
insertHere.parentNode.insertBefore(newField,insertHere);
}
<span id="readroot" style="display: none">
<div class="row">
<div class="col-lg-3">
Grade 6
</div>
<div class="col-lg-3">
Male
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<!-- Student number needs to increase when a new form is extended. -->
<label>Student 1</label>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label for="display_student_1_grade">Grade</label>
<div id="display_student_1_grade"></div>
</div>
<div class="col-lg-6">
<label for="display_student_1_gender">Gender</label>
<div id="display_student_1_gender"></div>
</div>
</div>
</div>
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</span>
<span id="writeroot"></span>
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="One More Student" />
To answer the question directly, you just need to find the appropriate <label> and update the innerHTML (see below).
However, what you are doing here can be achieved using the new HTML5 template element without having to hide <span> elements. Additionally, you have to remember that when you remove a student, the counter isn't going to decrease, nor are the already added students going to update. If you want that kind of functionality, you may want to look into a Javascript MVVM, like Angular.
var counter = 0;
function moreFields(val1, val2, val3) {
counter++;
var newField = document.getElementById(val1).cloneNode(true);
newField.id = '';
newField.style.display = 'block';
// Find the label here and update the innerHTML appropriately
newField.querySelector(".col-lg-12 label").innerHTML = "Student " + counter;
var newFields = newField.querySelectorAll('[name], [id], [for]');
for (var i=0;i<newFields.length;i++) {
var theNames = newFields[i].name
if (theNames)
newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]";
var theNames2 = newFields[i].id;
if (theNames2)
newFields[i].id = theNames2 + counter;
var theNames3 = newFields[i].htmlFor;
if (theNames3)
newFields[i].htmlFor = theNames3 + counter;
}
var insertHere = document.getElementById(val2);
insertHere.parentNode.insertBefore(newField,insertHere);
}
<span id="readroot" style="display: none">
<div class="row">
<div class="col-lg-3">
Grade 6
</div>
<div class="col-lg-3">
Male
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<!-- Student number needs to increase when a new form is extended. -->
<label>Student 1</label>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label for="display_student_1_grade">Grade</label>
<div id="display_student_1_grade"></div>
</div>
<div class="col-lg-6">
<label for="display_student_1_gender">Gender</label>
<div id="display_student_1_gender"></div>
</div>
</div>
</div>
</div>
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</span>
<span id="writeroot"></span>
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="One More Student" />
Related
I am trying to learn some javascript in web programming. Starting with a simple school registration webpage: the webpage allows to dynamically create any number of grades by clicking "Grade+" button; under each grade, any number of students can be created by clicking "Student+" button. "Grade+" button works as expected, however clicking "Student+" button does not present the student information, not sure what is happening. Any help will be highly appreciated. Thanks in advance.
The reference codes:
<!DOCTYPE html>
<html>
<body>
<div>
<label>Registration</label>
<div class="form-inline justify-content-center" id="school" style="display:none">
<label for="fname">Grade:</label>
<input type="text" id="grade" name="Grade"><br><br>
<div id="students">
<div id="student">
<label for="fname">First:</label>
<input type="text" id="first" name="First"><br><br>
<label for="lname">Last:</label>
<input type="text" id="last" name="Last"><br><br>
</div>
<div class="text-center" id="add_student">
<span id="idStudentRootCopy">----S----</span>
<button type="button" onclick="addItem('student', 'idGradeRootCopy', false)">Student+</button>
</div>
</div>
</div>
<div class="text-center" id="add_grade">
<span id="idGradeRootCopy">----G----</span>
<button type="button" onclick="addItem('school', 'idGradeRootCopy', true)">Grade+</button>
</div>
</div>
<script>
var count = 0;
function addItem(id, index, root) {
var original = document.getElementById(id);
var before = document.getElementById(index);
var clone = original.cloneNode(true);
clone.style.display='block';
clone.id = id + ++count;
var newFields = clone.childNodes;
for (var i = 0; i < newFields.length; i++) {
var fieldName = newFields[i].name;
if (fieldName)
newFields[i].name = fieldName + count;
}
if (root) {
original.parentNode.insertBefore(clone, before.parentNode);
} else {
original.insertBefore(clone, before);
}
}
</script>
</body>
</html>
If you open up the developer tools of your browsers and click the Student+ button you'll get an error message like:
Uncaught DOMException: Node.insertBefore: Child to insert before is
not a child of this node
So you're actually trying to put the cloned node into the wrong spot. Either way things are a bit confusing. Let's say you have clicked the Grade+ button three times and now you decide to click on Student+ of the first clone - how should it know where to put the student as there are three grades?
Well there's a fix of course. Each Student+ button is a child of an unique clone of the school <div> which you also gave an unique id yet (school1, school2,...). So if you pass the addItem() function a reference to the button you actually clicked, we can get it's parent div like:
clickedElement.parentNode.parentNode.parentNode
and add the cloned node using appendChild() instead of insertBefore().
Here's an example (just click on 'Run code snippet'):
var count = 0;
function addItem(id, index, root, clickedElement) {
var original = document.getElementById(id);
var before = document.getElementById(index);
var clone = original.cloneNode(true);
clone.style.display = 'block';
clone.id = id + ++count;
var newFields = clone.childNodes;
for (var i = 0; i < newFields.length; i++) {
var fieldName = newFields[i].name;
if (fieldName)
newFields[i].name = fieldName + count;
}
if (root) {
original.parentNode.insertBefore(clone, before.parentNode);
} else {
clickedElement.parentNode.parentNode.parentNode.appendChild(clone);
}
}
<div>
<label>Registration</label>
<div class="form-inline justify-content-center" id="school" style="display:none">
<label for="fname">Grade:</label>
<input type="text" id="grade" name="Grade"><br><br>
<div id="students">
<div id="student">
<label for="fname">First:</label>
<input type="text" id="first" name="First"><br><br>
<label for="lname">Last:</label>
<input type="text" id="last" name="Last"><br><br>
</div>
<div class="text-center" id="add_student">
<span id="idStudentRootCopy">----S----</span>
<button type="button" onclick="addItem('student', 'idGradeRootCopy', false,this)">Student+</button>
</div>
</div>
</div>
<div class="text-center" id="add_grade">
<span id="idGradeRootCopy">----G----</span>
<button type="button" onclick="addItem('school', 'idGradeRootCopy', true,this)">Grade+</button>
</div>
</div>
Update
If you click on the Grade+ button, it will automatically also 'create' a student input field as it's div is part of the school div. So move it out of the school div and change it's display mode to none.
If you want the new student input field to appear right before the Student+ button, we indeed need to use .insertBefore().
Here's the modified example:
var count = 0;
function addItem(id, index, root, clickedElement) {
var original = document.getElementById(id);
var before = document.getElementById(index);
var clone = original.cloneNode(true);
clone.style.display = 'block';
clone.id = id + ++count;
var newFields = clone.childNodes;
for (var i = 0; i < newFields.length; i++) {
var fieldName = newFields[i].name;
if (fieldName)
newFields[i].name = fieldName + count;
}
if (root) {
original.parentNode.insertBefore(clone, before.parentNode);
} else {
clickedElement.parentNode.insertBefore(clone, clickedElement);
}
}
<div>
<label>Registration</label>
<div id="student" style="display:none">
<label for="fname">First:</label>
<input type="text" id="first" name="First"><br><br>
<label for="lname">Last:</label>
<input type="text" id="last" name="Last"><br><br>
</div>
<div class="form-inline justify-content-center" id="school" style="display:none">
<label for="fname">Grade:</label>
<input type="text" id="grade" name="Grade"><br><br>
<div id="students">
<div class="text-center" id="add_student">
<span id="idStudentRootCopy">----S----</span>
<button type="button" onclick="addItem('student', 'idStudentRootCopy', false,this)">Student+</button>
</div>
</div>
</div>
<div class="text-center" id="add_grade">
<span id="idGradeRootCopy">----G----</span>
<button type="button" onclick="addItem('school', 'idGradeRootCopy', true,this)">Grade+</button>
</div>
</div>
I'm trying to duplicate a element that contains part of a HTML form. I already got it to work, but can't manage to clone that part without the values typed in the one that is being cloned. I show my code below.
document.getElementById('showmore').onclick = duplicate;
var i = 1;
var original = document.getElementById('fieldset1');
var boton = document.getElementById("showmore");
function duplicate() {
if (i = 1) {
var clone = original.cloneNode(true);
clone.id = "fieldset" + ++i;
original.parentNode.insertBefore(clone, boton.previousSibling);
}
}
<div id='fieldset1'>
<hr>
<div class='control-group form-group'>
<div class='controls'>
<label>Cause</label>
<textarea name='cause[]' maxlength='100' class='form-control' required></textarea>
</div>
</div>
<div class='control-group form-group'>
<div class='controls'>
<label>Effect</label>
<textarea name='effect[]' maxlength='100' class='form-control' required></textarea>
</div>
</div>
<div class='control-group form-group'>
<div class='controls'>
<label>Knowledge</label>
<textarea name='knowledge[]' maxlength='300' class='form-control'></textarea>
</div>
</div>
<div class='control-group form-group'>
<div class='controls'>
<label>Actions</label>
<textarea name='actions[]' maxlength='300' class='form-control'></textarea>
</div>
</div>
</div>
<button type='button' onlick='duplicate()' class='btn btn-warning' id='showmore'> Add more</button>
You have two option one is to manually empty the value after the clone, which is unnecessary.
secound is to make a default clone at first run, se the code below.
document.getElementById('showmore').onclick = duplicate;
var i = 1;
var original = document.getElementById('fieldset1');
var boton = document.getElementById("showmore");
// make an empty default clonad form
// before the user type anything
var emptyForm = original.cloneNode(true);
function duplicate() {
if (i = 1) {
// then only clone this empty form
var clone = emptyForm.cloneNode(true);
clone.id = "fieldset" + ++i;
original.parentNode.insertBefore(clone,boton.previousSibling);
}
}
<div id='fieldset1'>
<hr>
<div class='control-group form-group'>
<div class='controls'>
<label>Cause</label>
<textarea name='cause[]' maxlength='100' class='form-control' required></textarea>
</div>
</div>
<div class='control-group form-group'>
<div class='controls'>
<label>Effect</label>
<textarea name='effect[]' maxlength='100' class='form-control' required></textarea>
</div>
</div>
<div class='control-group form-group'>
<div class='controls'>
<label>Knowledge</label>
<textarea name='knowledge[]' maxlength='300' class='form-control'></textarea>
</div>
</div>
<div class='control-group form-group'>
<div class='controls'>
<label>Actions</label>
<textarea name='actions[]' maxlength='300' class='form-control'></textarea>
</div>
</div>
</div>
<button type='button' onlick='duplicate()' class='btn btn-warning' id='showmore'> Add more</button>
Something like this should do the trick! You also want to iterate over all the <textarea> elements in the new form and remove their values.
var i = 1;
var original = document.getElementById('fieldset1');
var boton = document.getElementById("showmore");
boton.onclick = function(){
if(i == 1){ // also, it should be 'i == 1' not 'i = 1' :)
var clone = original.cloneNode(true);
clone.id = "fieldset" + i++;
var textarea = clone.getElementsByTagName("textarea");
for(var j = 0; j < textarea.length; j++)
textarea[j].value= "";
original.parentNode.insertBefore(clone, boton.previousSibling);
}
}
This is run automatic. i need it run when call window.onload, not run before call window.onload, because i want to create function as a template code to embed other side, just change id, or className input
Thanks
function changeResultBox(resultTextClassName,inputSearchToggleId){
var inputSearchToggle=document.getElementById(inputSearchToggleId),
resultText=document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML='"'+inputSearchToggle.value+'"';
resultText[1].innerHTML='"'+inputSearchToggle.value+'"';
}
window.onload=function(){
document.getElementById('Store-Page-Search-Input').onkeyup =
changeResultBox('search-bar-item__text','Store-Page-Search-Input');
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value=""/>
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
Bind event on the input itself onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')".
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
function changeResultBox(resultTextClassName, inputSearchToggleId) {
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
function changeResultBox(resultTextClassName, inputSearchToggleId) {
//var resultTextClassName = 'search-bar-item__text';
//var inputSearchToggleId = 'Store-Page-Search-Input';
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
window.onload = function() {
document.getElementById("Store-Page-Search-Input").addEventListener("keyup", changeResultBox.bind(event, 'search-bar-item__text', 'Store-Page-Search-Input'));
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
Jsfiddle here.
This is a simple example to reproduce my problem. Basically, I have a form (to read in data about multiple candidates), in which I have a fieldset (which takes input of data for one candidate), and then I have a button labelled ADD CANDIDATE. When it is clicked, the above fieldset should be cloned and copied below the above fieldset, so that the data about another candidate can be entered.
For the first candidate, each data field in the form is of the form allCandidatesArray[candidateNumber][fieldName], e.g. allCandidatesArray[0][nameInput] to facilitate the reading and further analysis of data submitted when the form is submitted. So in the Click handler/listener of ADD CANDIDATE button, I also do some programming to increment the candidateNumber in allCandidatesArray[candidateNumber][fieldName] when a new candidate is added.
But the main idea is to clone the previous fieldset and append the cloned fieldset below the previous fieldset. The problem is that the new thing which is appended is Not a fieldset. It is just three input elements. No labels, no nothing! What was cloned was a fieldset containing inputs and labels.
The question is WHY? And how do I fix this?
$(document).on("click", ".addMobileButton", function() {
//alert(".addMobileButton clicked.");//check
var parentRow = $(this).closest(".row");
var idOfThis = $(this).attr('id');
//alert(idOfThis);//check
//alert(idOfThis.length);//check
var candidateNumber = idOfThis.slice(idOfThis.length-2, idOfThis.length-1);
//alert("candidateNumber: " + candidateNumber);//check
var nthMobileNumberOfThisCandidate = idOfThis.slice(-1);
//alert("nthMobileNumberOfThiscandidate: " + nthMobileNumberOfThiscandidate);//check
var newNthMobileOfThiscandidate = ++nthMobileNumberOfThisCandidate;
//alert("newNthMobileNumberOfThisCandidate: " + newNthMobileOfThisCandidate);//check
parentRow.after('<div id="rowAddedForCandidatesMobile" class="row valign-wrapper"><div class="input-field col l3"><input type="text" id="mobileInput'+candidateNumber+'" class="validate" name="allCandidatesArray['+candidateNumber+'][mobileInput][]"/><label for="mobileInput'+candidateNumber+'">Mobile</label></div><div class="col l1 addMobileButtonWrapper"><a id="addMobileButton'+candidateNumber+''+newNthMobileOfThisCandidate+'" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a></div></div>');
});
$(document).ready(function() {
/*
*
*/
$("a#addNewCandidateButton").on("click", function() {
alert("#addNewCandidateButton clicked.");//check
var previousFieldset = $(this).parent(".row").prevAll("fieldset.wrapper:first");
//alert(previousFieldset[0].outerHTML);//check
var fieldsetToClone = previousFieldset.clone();
//alert(fieldsetToClone[0].outerHTML);//check
var idOfAddMobileButton = fieldsetToClone.find(".addMobileButton").attr('id');
//alert('idOfAddMobileButton: ' + idOfAddMobileButton);
var candidateNumber = idOfAddMobileButton.slice(idOfAddMobileButton.length-2, idOfAddMobileButton.length-1);
//alert("candidateNumber: " + candidateNumber);//check
var candidateNumberIncremented = ++candidateNumber;
//alert('candidateNumberIncremented: ' + candidateNumberIncremented);//check
fieldsetToClone.find('input[type=text]').each(function(index) {
var inputNameAttribute = $(this).attr('name');
//alert('inputNameAttribute: ' + inputNameAttribute);//check
var indexOfFirstOpeningBracket = inputNameAttribute.indexOf('[');
//alert('indexOfFirstOpeningBracket: ' + indexOfFirstOpeningBracket);//check
var indexOfFirstClosingBracket = inputNameAttribute.indexOf(']');
//alert('indexOfFirstClosingBracket') + indexOfFirstClosingBracket;//check
var inputNameAttributeArray = inputNameAttribute.split('');
//alert('inputNameAttributeArray: ' + inputNameAttributeArray);//check
//inputNameAttributeArray.splice(indexOfFirstOpeningBracket, indexOfFirstClosingBracket, candidateNumberIncremented);
var lengthOfCandidate = (indexOfFirstClosingBracket - indexOfFirstOpeningBracket) -1;
//alert('lengthOfCandidate: ' + lengthOfCandidate);//check
inputNameAttributeArray.splice((indexOfFirstOpeningBracket+1), lengthOfCandidate, candidateNumberIncremented);
//alert('inputNameAttributeArray after SPLICING:' + inputNameAttributeArray);//check
inputNameAttributeModified = inputNameAttributeArray.join('');
//alert('inputNameAttributeModified: ' + inputNameAttributeModified);//check
$(this).attr('name', inputNameAttributeModified);
});
fieldsetToClone = fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');
fieldsetToClone = fieldsetToClone.find("input[type=text]").val('');
previousFieldset.after(fieldsetToClone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<form id="credentialsForm" action="" method="get">
<fieldset class="container wrapper">
<div class="row valign-wrapper">
<div class="input-field col l3 offset-l1">
<input type="text" id="nameInput0" class="validate" name="allCandidatesArray[0][nameInput]"/>
<label class="blue-text" for="nameInput0">Name</label>
</div>
<div class="input-field col l3 offset-l1">
<input type="text" id="ssnValueInput0" class="validate" name="allCandidatesArray[0][ssnValueInput]"/>
<label class="blue-text" for="ssnValueInput0">SSN</label>
</div>
</div><!--.row-->
<div class="row valign-wrapper">
<div class="input-field col l3">
<input type="text" id="mobileInput0" class="validate" name="allCandidatesArray[0][mobileInput][]"/>
<label class="blue-text" for="mobileInput0">Mobile</label>
</div>
<div class="col l1 offset-l1 addMobileButtonWrapper">
<a id="addMobileButton00" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a>
</div>
</div><!--.row-->
<!--<div class="container"><div class="divider"></div></div>-->
</fieldset><!--#wrapper-->
<div class="row valign-wrapper">
<a id="addNewCandidateButton" class="btn-flat waves-effect waves-light blue white-text col l2">Add Candidate</a>
</div><!--.row-->
<div class="row" id="submitFormRow">
<div class="col l4 offset-l4">
<button type="submit" class="btn waves-light waves-effect">Add Candidates</button>
</div>
</div><!--.row #s -->
</form>
You are overwriting cloned object in the following statements thus only inputs are appended.
fieldsetToClone = fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');
fieldsetToClone = fieldsetToClone.find("input[type=text]").val('');
Use
fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');
fieldsetToClone.find("input[type=text]").val('');
$(document).on("click", ".addMobileButton", function() {
var parentRow = $(this).closest(".row");
var idOfThis = $(this).attr('id');
var candidateNumber = idOfThis.slice(idOfThis.length - 2, idOfThis.length - 1);
var nthMobileNumberOfThisCandidate = idOfThis.slice(-1);
var newNthMobileOfThiscandidate = ++nthMobileNumberOfThisCandidate;
parentRow.after('<div id="rowAddedForCandidatesMobile" class="row valign-wrapper"><div class="input-field col l3"><input type="text" id="mobileInput' + candidateNumber + '" class="validate" name="allCandidatesArray[' + candidateNumber + '][mobileInput][]"/><label for="mobileInput' + candidateNumber + '">Mobile</label></div><div class="col l1 addMobileButtonWrapper"><a id="addMobileButton' + candidateNumber + '' + newNthMobileOfThisCandidate + '" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a></div></div>');
});
$("a#addNewCandidateButton").on("click", function() {
var previousFieldset = $(this).parent(".row").prevAll("fieldset.wrapper:first");
var fieldsetToClone = previousFieldset.clone();
var idOfAddMobileButton = fieldsetToClone.find(".addMobileButton").attr('id');
var candidateNumber = idOfAddMobileButton.slice(idOfAddMobileButton.length - 2, idOfAddMobileButton.length - 1);
var candidateNumberIncremented = ++candidateNumber;
fieldsetToClone.find('input[type=text]').each(function(index) {
var inputNameAttribute = $(this).attr('name');
var indexOfFirstOpeningBracket = inputNameAttribute.indexOf('[');
var indexOfFirstClosingBracket = inputNameAttribute.indexOf(']');
var inputNameAttributeArray = inputNameAttribute.split('');
var lengthOfCandidate = (indexOfFirstClosingBracket - indexOfFirstOpeningBracket) - 1;
inputNameAttributeArray.splice((indexOfFirstOpeningBracket + 1), lengthOfCandidate, candidateNumberIncremented);
inputNameAttributeModified = inputNameAttributeArray.join('');
$(this).attr('name', inputNameAttributeModified);
});
fieldsetToClone.prepend('<div class="container"><div class="divider"></div></div>');
fieldsetToClone.find("input[type=text]").val('');
previousFieldset.after(fieldsetToClone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet" />
<form id="credentialsForm" action="" method="get">
<fieldset class="container wrapper">
<div class="row valign-wrapper">
<div class="input-field col l3 offset-l1">
<input type="text" id="nameInput0" class="validate" name="allCandidatesArray[0][nameInput]" />
<label class="blue-text" for="nameInput0">Name</label>
</div>
<div class="input-field col l3 offset-l1">
<input type="text" id="ssnValueInput0" class="validate" name="allCandidatesArray[0][ssnValueInput]" />
<label class="blue-text" for="ssnValueInput0">SSN</label>
</div>
</div>
<!--.row-->
<div class="row valign-wrapper">
<div class="input-field col l3">
<input type="text" id="mobileInput0" class="validate" name="allCandidatesArray[0][mobileInput][]" />
<label class="blue-text" for="mobileInput0">Mobile</label>
</div>
<div class="col l1 offset-l1 addMobileButtonWrapper">
<a id="addMobileButton00" class="btn-floating btn waves-light waves-effect blue white-text addMobileButton"><i class="material-icons">add</i></a>
</div>
</div>
<!--.row-->
<!--<div class="container"><div class="divider"></div></div>-->
</fieldset>
<!--#wrapper-->
<div class="row valign-wrapper">
<a id="addNewCandidateButton" class="btn-flat waves-effect waves-light blue white-text col l2">Add Candidate</a>
</div>
<!--.row-->
<div class="row" id="submitFormRow">
<div class="col l4 offset-l4">
<button type="submit" class="btn waves-light waves-effect">Add Candidates</button>
</div>
</div>
<!--.row #s -->
</form>
The requirement is to dynamically add each li element as and when user click on "add row" button". And when User enters any value in field1, an ajax call with this value as parameter is made to server and the return value is set in the next 2 fields.
In focus lost method, when I try to retrieve the user entered value, the input field value is always returned as EMPTY or the default value which I set in the source code and not the user modified value.
The row ids are given unique like f1_edit_row1, f1_edit_row2 etc. Please let me know on why I dont get the value.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script src="js/jquery-1.12.4.js"></script>
<title>Insert title here</title>
</head>
<body>
<ul id="Rows_Edit">
<li id="EditRow1">
<div class="row">
<div class="col-md-3 Field1">
<span>Field1</span><input type="text" class="form-control field1"
id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
placeholder="1234">
</div>
<div class="col-md-3 Field2">
<span>Field2</span><input type="text" class="form-control"
id="f2_edit_row1" name="field2" placeholder="123"
disabled="disabled">
</div>
<div class="col-md-5 name">
<input type="text" class="form-control" id="field3_edit_row1"
placeholder="ABC" disabled="disabled">
</div>
<div class="col-md-1 icons" id="btn_row1">
<input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
<!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
</div>
</div>
</li>
</ul>
<div></div>
<div></div>
<div></div>
<div class="updatebutton">
<input type="submit" id='submit-button_edit' class="btn btn-default" value="Update" onclick="updateBtnClick()">
</div>
<div class="cancelbutton">
<input type="button" id='cancel-button_edit' class="btn btn-default" value="Cancel">
</div>
</body>
</html>
<script type="text/javascript">
function focusLost_edit(rowNo){
var id = "f1_edit_row" + rowNo;
var value = document.getElementById(id).value;
console.log(id, " Value:[", value, "]");
// API Code here
var returnvalue = "TEST";
var id1 = "#f2_edit_row" + rowNo;
$(id1).val(returnvalue);
console.log(id1, " Return Value:[", returnvalue, "]");
var returnvalue1 = "TESTING";
var id2 = "#field3_edit_row" + rowNo;
$(id2).val(returnvalue1);
console.log(id2, " Return Value1:[", returnvalue1, "]");
}
function addButtonClick(){
console.log("Add Button Click");
// Code to add rows here
}
function updateBtnClick(){
console.log("Update Button Click");
$('ul#Rows_Edit li').each(function() {
var id = $(this).attr('id');
var rowNo = id.substring(7);
var id1 = "#f1_edit_row" + rowNo;
var value1 = $(id1).val();
var id2 = "#f2_edit_row" + rowNo;
var value2 = $(id2).val();
var id3 = "#field3_edit_row" + rowNo;
var value3 = $(id3).val();
console.log("Value1:[", value1, "] Value2:[", value2, "]Value3:[", value3), "]";
});
// Code to send value to server here
}
</script>
Use this in your function call.
function focusLost_edit(rowNo){
var id = "f1_edit_row" + rowNo;
var value = document.getElementById(id).value;
console.log(id, " Value:[", value, "]");
// API Code here
var returnvalue = "TEST";
var id1 = "#f2_edit_row" + rowNo;
$(id1).val(returnvalue);
console.log(id1, " Return Value:[", returnvalue, "]");
var returnvalue1 = value;
var id2 = "#field3_edit_row" + rowNo;
$(id2).val(returnvalue1);
console.log(id2, " Return Value1:[", returnvalue1, "]");
}
function addButtonClick(){
console.log("Add Button Click");
// Code to add rows here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="shipToRows_Edit">
<li id="EditRow1">
<div class="row">
<div class="col-md-3 Field1">
<span>Field1</span><input type="text" class="form-control field1"
id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
placeholder="1234">
</div>
<div class="col-md-3 Field2">
<span>Field2</span><input type="text" class="form-control"
id="f2_edit_row1" name="field2" placeholder="123"
disabled="disabled">
</div>
<div class="col-md-5 name">
<input type="text" class="form-control" id="field3_edit_row1"
placeholder="ABC" disabled="disabled">
</div>
<div class="col-md-1 icons" id="btn_row1">
<input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
<!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
</div>
</div>
</li>
</ul>