these days i read and learn more about my problem!the code is here:
<div align="right" id="parent" name="parent">
<select name="select30" id="select30" value=""/>here inside i have options values and work dynamically with query to my DB</select>
<input type="button" id="moreFields" value="+" onclick=""/> //add select tags
<input type="button" value="-" onclick="" /> //remove select tags
<div name="child" id="writeclone"></div> //here cloned the child from parent DIV
</div>
<input type="button" name="enter" id="" value="ENTER" onclick="getoptionvalues();"/>
My problem is how i can get the names or id's from child DIV when + button fired.When this button fired create child DIVs in Child DIV!!Can anybody HELP ME to correct my JAVASCRIPT code
<script>
function getoptionvalues() {
var parent=document.getElementById('parent');
for (var count=0;count<parent.childNodes.length;count++) {
if(parent.childNodes[count].tagName =='DIV') {
alert ('parent.childNodes[count]');
}
}
}
</script>
As ThiefMaster pointed out, 'parent.childNodes[count]' should be parent.childNodes[count]. Then to get the id, it is just .id and name is .name
if(parent.childNodes[count].tagName =='DIV') {
alert (parent.childNodes[count].id);
alert (parent.childNodes[count].name);
}
At the very least, you need to add a method name to your onClick:
<input type="button" id="moreFields" value="+" onclick="$:getoptionvalues()"/>
Then, using jquery, you can grab an array of components of a certain type, and then loop through w/ alerts:
function getoptionvalues() {
var dropdownMenus = $("select");
dropdownMens.each(function () {
var id = $(this).id;
alert(id);
});
}
Related
I am trying to get respective values of dynamically generated inputs. In other words, I have an X number of dynamically generated inputs; each of these inputs is bound to a button. With that being said, I would like the user to get alerted the dynamically generated input that is bound to the clicked button. What I have done so far does not sort this out and whatever button is clicked, only the first input's value is generated.
I have the following code - a dynamic input and a button:
<input type="hidden" id="job_id" name="jobIdName" value="{{ job_id }}"> // please note this input is dynamically generated....
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
As for Jquery, I have done the following:
$('#get_id_id').each(function(index) {
$(this).click(function() {
var job_ids = $("[name='jobIdName']");
console.log('Job Ids -------------- : ' + job_ids);
});
});
The above code keeps generating only the first generated input value? Any ideas or suggestions?
I have seen some posts that might seem similar to this one but they are very old; also I am looking for a more modern implementation.
Add your "input tag" into div:
var counter = 0;
$(document).ready(function(){
$("#get_id_id").click(function() {
var divChildren = $(".job_ids").children();
if(counter < divChildren.length){
if(counter == '0'){
console.log($(divChildren).eq(0).val());
}else{
console.log($(divChildren).eq(counter).val());
}
counter++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="job_ids">
<input type="hidden" name="jobIdName" value="Test01">
<input type="hidden" name="jobIdName" value="Test02">
<input type="hidden" name="jobIdName" value="Test03">
<input type="hidden" name="jobIdName" value="Test04">
<input type="hidden" name="jobIdName" value="Test05">
</div>
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
I have a table with a list of all my data. The data is printed in a for loop so there are many rows in the table. how can i get the userid in the row with the button clicked?
<table>
<td>
<input type="hidden" value="<c:out value="${user.id}" />" name="userId" />
</td>
<td>
<button class="btn btn-default fileUpload" data-toggle="modal" id="btnUpload" data-target="#file-modal" value="<c:out value="${user.id}" />">Upload</button></td>
</table>
and i have a modal container. When the upload button in the table is clicked, the modal will open up for a file upload.
<form action="${pageContext.request.contextPath}/UserServlet" enctype="multipart/form-data" method="post">
<input type="hidden" value="5519" name="OPS" />
<input type="hidden" name="uploadUserId" />
<div class="form-group">
File : <input type="file" class="file" name="uploadFile"><br />
<button type="submit" class="btn btn-default">Upload</button>
<br /><br />
</div>
</form>
What i am trying to do is on the click of btnUpload the value in the hidden input type userId will be copied over to the hidden value type uploadUserId
I have tried doing the following but neither works
1
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).closest("tr").find("#userId").text();
$("#uploadUserId").val($userId);
});
});
2
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).closest("tr").children()[2].text();
$("#uploadUserId").val($userId);
});
});
This will do the trick without changing the html
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).parent().prev("td").children("input:hidden").val();
$("#uploadUserId").val($userId);
});
});
Another solution by adding ID to the input element as shown below,
<input id="userVal" type="hidden" value="<c:out value="${user.id}" />"name="userId" />
then you can get the value from the following jquery
$("#userVal").val();
This should work. Just select and grab the user Id txt and then pass it to the uploadUserId value.
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $('#userId').text();
//$("#uploadUserId").val($userId);
$('input[name="uploadUserId"]').val($userId);
});
});
UPDATE
OK. I reviewed this again using your HTML structure and got this all worked out. The code below works.
$('[type="submit"]').on('click', function(e){
e.preventDefault(); // prevents the button default action. You can remove this if you want the form to submit after click.
var $userId = $(this).prev().prev().val(), // this gets the input value. based on your html it is the previous previous element.
fix1 = $userId.replace(/(?:\..+)$/, '').split('\\'), // this is a regex that replces the file extention then splits the string on the back slash turning it into an array.
fix2 = fix1.length -1; // gets the length of the array and subtracts 1 to get the last array index of the array. This i to get the file name.
$('[name="uploadUserId"').val(fix1[fix2]); // this assigns the uploadUserId value to the name of the file using the array and the index.
});
I am trying to create clones of a HTML div. The div has a label and two text boxes inside it. I need to change the label value of the newly created div. Here is my code.
<body>
<div id="PayDiv2">
<label id="PayLbl2">Payment No 2: </label>
<input type="text" />
<input type="text" />
</div>
<div id ="totPayForm" >
<label id="totPayLbl">Total Payment: </label>
<input type="text" />
<input type="text" />
<input type="submit" value="Add new one" onclick="addNewField();
return false;">
</div>
<input type="button" value="Clone box" id="btn" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var i=3;
//When DOM loaded we attach click event to button
$(document).ready(function() {
$('#btn').click(function() {
var cloned = $('#PayDiv2').clone();
cloned.insertBefore("#totPayForm");
$('#PayLbl2').html("Payment No "+ i++ + ':');
});
});
</script>
</body>
The problem is the place the newly created clones placed. First clone get placed before everything(even though I need to place it after the original div which I used to create divs. )
divs generated after that also get placed at first and, early divs goes down. It is hard to describe here. If you can be kind enough to run my code you will see what the issue is.
I have an another requirement to generate unique ids to cloned divs. Since I am new in JQuery, I found it difficult to generate id's.
I am pleased if you can help me in this case. Thank you all.
The problem is $('#PayLbl2').html("Payment No "+ i++ + ':'); it always changes the first element's label instead of the clone(because of the duplicated ids)...
so use class instead of id
<div class="PayDiv2">
<label class="PayLbl2">Payment No 2:</label>
<input type="text" />
<input type="text" />
</div>
then
var i = 3;
//When DOM loaded we attach click event to button
$(document).ready(function () {
$('#btn').click(function () {
var cloned = $('.PayDiv2').first().clone();
cloned.insertBefore("#totPayForm");
cloned.find('.PayLbl2').html("Payment No " + i+++':');
});
});
Demo: Fiddle
Here it is.
Demo
Make your HTML like below
<div id="PayDiv0" class="PayDiv0">
<label id="PayLbl0" class="PayLbl2">Payment No 2:</label>
<input type="text" />
<input type="text" />
</div>
<div id="totPayForm">
<label id="totPayLbl">Total Payment:</label>
<input type="text" />
<input type="text" />
<input type="submit" value="Add new one" onclick="addNewField();
return false;">
</div>
<input type="button" value="Clone box" id="btn" />
And JS should be like this
var i = 3;
$(document).ready(function () {
$('#btn').click(function () {
var cloned = $('.PayDiv0').first().clone();
var noOfDivs = $('.PayDiv0').length;
cloned.insertBefore("#totPayForm");
cloned.attr('id', 'PayDiv' + noOfDivs);
cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
cloned.find('.PayLbl2').html("Payment No " + i+++':');
});
});
As mentioned in the answer by #Arun P Johny, set the div id PayDiv0
$('#btn').click(function () {
var cloned = $('.PayDiv2').first().clone();
// find total divs with class PayDiv2
var noOfDivs = $('.PayDiv2').length;
cloned.insertBefore("#totPayForm");
// add new id to the cloned div
cloned.attr('id', 'PayDiv' + noOfDivs);
// find the label element inside new div and add the new id to it
cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
cloned.find('.PayLbl2').html("Payment No " + i+++':');
});
this way you can add the dynamic ids to your elements.
I have following html and Angularjs controller code to add rows dynamically.
<form name="{{form.name}}"
ng-repeat="form in forms">
<h2>{{form.name}}</h2>
<div ng-repeat="(i,cont) in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
<input type="text" class="xdTextBox" ng-model="cont.p_id"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
Controller code to add rowsis
$scope.addFields = function (form) {
if (typeof form.contacts == 'undefined') {
form.contacts = [];
}
form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
}
What I want to do next is after adding rows if i mouse over any row a delete link or button shows up and if one clicks it, it removes that row.
Here is the working plunker for the adding rows.
http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview
Please let me know how I can mouse over a row and click the remove button or link to remove that list.
Thanks
Take a look here:
http://plnkr.co/edit/zxjHLzqiAQnZzcaUwgBL?p=preview
I added the "contact" class to the div container so I could identify it in the CSS:
<div ng-repeat="(i,cont) in form.contacts" class="contact">
I added the remove button inside the container and gave it the "remove" class:
<button type="button" class="remove" ng-click="form.contacts.splice(i, 1);">Remove</button>
(Note: You may wish to have a function inside your scope for removing a contact if you need to do anything more complicated than just removing it from the array.)
To get the button to be hidden initially, but show up when you hover over the row, I used the following CSS:
.contact .remove { visibility: hidden; }
.contact:hover .remove { visibility: visible; }
You can do it by adding a function to your scope that recieves the form and index, then splicing the desired index out of it:
<div ng-repeat="(i,cont) in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
<input type="text" class="xdTextBox" ng-model="cont.p_id"/>
<button ng-click="delete(form, i)">Delete</button>
</div>
Then, the Javascript (add this to your controller):
$scope.delete = function(form, index) {
form.contacts.splice(index, 1);
}
http://plnkr.co/edit/2SEGDnGoE7kaw0KvOpKr?p=preview
I have the following code which I use to add text-boxes dynamically on click of button. It works.
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" onclick="addForm()"/>
The javascript for the above code is:
function addForm() {
$("#forms").append(
"<input type ='text' class='winner' name='winner[]'><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
}
I am using auto complete to get data from database in the text-box
What I want is - suppose if a user clicks on add more winner button but does not want to add any data in the textbox, I should give him a button to delete the extra text-box.
How should the JavaScript be written for this?
Do see my above code
var i=0;
function addForm() {
i++;
$("#forms").append(
"<input type ='text' id='input_'"+i+" class='winner' name='winner[]'><button onclick='delete('"+i+"')' id='button_'"+i+">delete</button><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
function delete(i)
{
$("#input_"+i).remove();
$("#button_"+i).remove();
}
simply use a counter to set an ID to inputs and buttons and send that counter to delete function;
Simply use the code below :
$("#forms").append("<p><input type ='text' class='winner' name='winner[]' ><button onclick='$(this).parent().remove()'>delete</button></p>");
Try this function.
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
Try adding a remove button while adding a text box dynamically to remove the text box if necessary
Here is the html code
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" />
Here is the jQuery code
$('#addmore').click(function () {
$('#forms').append('<input type ="text" class="winner" name="winner[]"><input type="button" onclick="$(this).prev().remove();$(this).remove();">');
});
Here is the demo