I am using the following code
<tr id="row">
<td><input type="text" name ="first" id="first" onclick="goto("row")"/>
</td>
<td><input type="text" name ="second" id="second"/>
</td>
</tr>
<script>
function goto(row)
{
var row=document.getElementById("row");
}
</script>
here in the goto() function i am getting the table row by using id.I need to get the second text box inside this row when i clicking the first text box.How can i get the second text box using the table row id. Any idea ?.
First off, you're missing some equals (=) signs in your HTML. You might want to change that to name="first" and name="second". Secondly, I'm not sure why you have two elements with the same id of "second" when you could have changed one of them to "first" so they don't collide, and then you could easily select the second one with getElementById("second"). Simple mistake, right?
Change the ids, make them unique and you could directly access the input textbox like:
var txtbox = document.getElementById("YourTextboxId");
Related
I am trying to execute the below JS. I have a radio button , which on click should set a property of variable RefreshMapping to child as specified in the below code. however, this doesnt seem to be working. I have set the default value of RefreshMapping to template, every time i select the radio button the value should change to child, which does not. Any help would be appreciated.
</script>
<SPAN nowrap>
<body>
<table cellpadding='0' cellspacing='0' width=''>
<tr>
<td class='{DataValueWrite}' nowrap='nowrap' width='' align="top">
<input <pega:include name="ClientValidation"/> type="radio" class="Radio" name="<pega:reference name="$this-name" />" onclick="document.getElementById('RefreshMapping').value='child';document.getElementById('RefreshMapping').click();" id="<pega:reference name="$THIS-DEFINITION(pyPropertyName)" />"
<pega:when java="<%= tools.getProperty("SelectedProduct.ChildProd").toString().equals("child") %>"> checked
</pega:when>
<pega:when java="<%= tools.getProperty("SelectedProduct.PROD_LEVEL").toString().equals("5") %>">
disabled
</pega:when>
value="true"><font class = "LabelName">Child Sub-Product/ Services</font>
</td>
</tr>
</table>
</body>
</SPAN>
P.S: This is in a tool called Pega PRPC, so ignore the syntax as it is specific to PEGA
First, your html seems malformed, why are there body tags inside of spans.
Second, are you sure there is an html element on the page with the id 'RefreshMapping'? Verify that is the result of if you are trying to get this radio button.
Third, the value for your input is currently set to "true" via 'value="true"', to select a radio button in javascript you must set the element to checked. This will give the property specified in the name attribute the value of the inputs' value attribute. Radio buttons usually have multiple input tags to the same radiobutton group, in order to select a button in that group, you get that specific element and set it to checked via document.getElementByID("id").checked = "true";
I'm a beginner in js and jquery library. I'd like to get an array of input fields with a particular name, and validate input. Each of my input fields have a name like NS[0], NS[1] etc. The total number of fields will have to be determined by the code, since the fields are generated by javascript.
I know that I can have jquery address the individual object like this:
$("input[name=NS\\[0\\]]").val() for <input type="text" name="NS[0]">.
However, how can I get an array of all these similiar elements, from NS[0] to NS[x] where x has to be determined based on how many fields have been generated? I already have other fields with different name patterns sharing the same css class, so using class is not an option. These boxes are in a particular div area, but in the same area are other input fields, so choosing all input boxes of the same area selects them as well.
In other words, how do I use jquery to check the name of each input field, after getting the entire array of input fields, to check each individual name?
Since I have input fields of various names in the area determined by the table id CNTR1, I would select them with $('#CNTR1 input'). I can also select individual fields by using $("input[name=]"). However, what I want to do, is to select everything under $('#CNTR1 input'), and then run a loop on their names, checking whether the names match a predetermined criteria. How can I do that?
The html code:
<table class="table" id="cnservers">
<thead>
<tr>
<th>Type</th>
<th>Preference</th>
<th>Value</th>
<th>Name</th>
</tr>
</thead>
<tr id="CNTR0">
<td>CNAME</td><td><input type="text" name="CN_PREF[0]" value=""></td><td>
<input type="text" name="CN_VAL[0]" value=""></td><td>
<input type="text" name="CN_NAME[0]" value="">
<a class="btn btn-danger" onclick="DelField(this.id);" id="CN_D0" >
<span class="btn-label">Delete
</span>
</a>
<a class="btn btn-primary" onclick="addField('cnservers','CN',10);" id="CN_A0" >
<span class="btn-label">Add
</span>
</td></tr>
</table>
[1]: http://i.stack.imgur.com/bm0Jq.jpg
I must be missing something. Is there a reason you can't use the http://api.jquery.com/attribute-starts-with-selector/?
$('#CNTR1').find('input[name^="NS"]')
Regarding,
However, what I want to do, is to select everything under $('#CNTR1 input'), and then run a loop on their names, checking whether the names match a predetermined criteria. How can I do that?
$("#CNTR1 input").each(function(index, elem) {
var $elem = $(elem),
name = $elem.attr('name');
var nameMatchesCondition = true; // replace with your condition
if (nameMatchesCondition) {
// do something!
}
});
EDIT 1:
Well, id is still an attribute of an html element. So you could do $('[id^="CNTR1"]') ... The value of the id attribute of an element doesn't contain the #. It's only part of the css/jquery selector. When using attribute style selectors, you don't need it. Though I can't comment on the performance of this.
Ideally, you want to attach a second class, say js-cntr to all elements that you created with an id starting with CNTR. Even though different name pattern elements may already have one class, that class is for styling. There is no stopping you from attaching custom classes purely for selection via js. This is an accepted thing to do and which is why the class name starts with js-, to denote that its purely for use via js for selection.
Try this
HTML
<table id="CNTR1">
<tr>
<td>CNAME</td>
<td><input type="text" name="CN_PREF[1]" id="CN_IN[1]"></td>
<td><input type="text" name="CN_VAL[1]"></td>
<td><input type="text" name="CN_NAME[1]"></td>
</tr>
</table>
JS
$(document).ready(function(){
$("#CNTR1 input").each(function() {
console.log($(this).attr("name"));
// Match With predetermined criteria
});
});
Use jQuery's .filter method, with a filter function:
filterCritera = /^CN_NAME\[/; // or whatever your criteria is
var inputs = $('#CNTR0 input');
// you could also cache this filter in a variable
inputs.filter(function(index){
return filterCritera.test(this.name);
}).css('background','red');
jsbin
The markup you posted does not the markup described in your question ( it does not contain NS[0]) but you can substitute it in the reguluar expression above.
I have this html code :
<div id="jiraTicketAccordion">
<div>
<h3>key</h3>
<div>
<form>
<div id="jiraTable">
<table>
<tr>
<td class="label"><label for="arrival">ARRIVAL :</label></td>
<td><input type="text" name="arrival" class="arrival"
onblur="checkTime(this.value);"/></td>
<td class="label"><label for="newarrival">NEW ARRIVAL :</label></td>
<td><input type="text" name="newarrival" class="arrival"
onblur="checkTime(this.value);"/></td>
</tr>
</table>
</form>
</div>
</div>
</div><!-- end of accordion div -->
As you can see I have javascript function checkTime for onblur() event in that input box.
Earlier I had that text box with a unique id so I used document.getElementById for accessing it in my javascript function.
But now as there are many of accordion with same structure so I don't want to use unique ids for as there can be a large number.
So now I have a class for all those text boxes that require that validation.
But now I have to change my javascript functions where ever I used document.getElementById.
I know we can select elements by class in jquery, I also tried that but didn't get required results.
This is what I have tried in jquery:
function checkTime(dateTime){
alert("inside check time");
var errorMsg="";
regex = /^(\d{2})\/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\/\d{2} \d{2}:\d{2} [AP]M$/;
if(dateTime != ''){
if(!regex.test(dateTime)){
errorMsg = "Please enter date and time in the format: \n dd/MMM/YY HH:MM AM/PM";
alert(errorMsg);
//how to make the element that called this function to
//blank value it it failed validation
}
}
}
I wanted to access the element that called this method, so that I can manipulate that text box value.
And also I want to access other element by class in same accordion within that checkDate function.
I don't know how to make the text box vaalue to blank it it failed validation.
Earlier when I was having id ,I was doing it as :
document.getElementById('arrival').value='';
Shortest path from your current code is just passing the element instead of the value:
onblur="checkTime(this);"
Then on your function:
function checkTime(el){
var dateTime = el.value;
// rest of function
}
Personally, I'd avoid using inline event handlers like onblur="...", and use addEventListener to bind the handlers directly from JavaScript. That would be one step further towards decoupling logic, structure and presentation.
I have a contact table, this table contains a first name, a last name, and multiple phone numbers. So my model is something like
Contact {
String firstName;
String lastName;
List phones;
}
Phone {
String category; //home, work, mobile, etc
String phoneNumber;
}
So it will have web page contains two input text for first name and last name, and an add phone button. When add button is clicked, it will generate two input text again for category and phone number, and an delete button to that row.
I have tried using indexed=true, it will generate an html like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
The problem is, i dont know how to write the javascript, because i dont know what is current index if user click add button, how about if user have clicked delete button and then add button, what index it will be? It is ok if i have missing index? Something like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
<input type="text" name="phone[3].category" ... />
<input type="text" name="phone[3].phoneNumber" ... />
Note: please consider for the edit scenario too.
The first thing here is to use well the indexed and logic:iterate tags to generate the code. If having doubts about this, check out this answer given by me, which explains in detail how to use indexed attributes in struts: indexed and logic:iterate
Then, you have to consider the scenario where an user wants to add or delete rows, and update indexes correctly so struts will be able to retrieve data as you submit the form. I encountered this problem once and what I did was:
on add: using javascript, find out what is the last line of the table and, by looking at the generated code of the page, generate a new table row with empty contents, the index inside the square brackets. Finally, add to table
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf</td></tr>
<tr><td name='whatever[1].something'>asdf</td></tr>
<tr><td name='whatever[2].something'>asdf</td></tr>
</table>
to add a row, create it in javascript like this:
var newRow = '<tr><td name='whatever[3].something'>asdf</td></tr>
and append it to the table.
on del:Using the same technique as above find out which line (or corresponding index) was deleted. Then, edit the indexes of the remaining rows so that it matches the order of elements for the subsequent rows.
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf1</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
let's say you delete asdf1 by removing it from the dom. then, the new table will look like this:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
now we have to update indexes so it matches the right order, by changing the name of the second td to have an index of 1, that way, the table is back to a struts indexed format:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf2</td></tr>
</table>
I hope it's clear enough. I obviously can't write all the js functions, since they require some work, but with this information you can make it on your own.
Here am trying to add a html rows by clicking on the add button and delete the added rows on clicking on the delete button.
Its working fine with adding rows as expected. But the problem is the delete function deletes the last row of the table instead of deleting that corresponding row.
As there is delete button in every row, only that corresponding row should be deleted when the delete button is clicked.
Here is the jsfiddle which demonstrates the situation better.
if the fiddle above failed to load as it does, Please refer the code below.
Thanks in advance
JAVSCRIPT
//function to add a row
function insSpec()
{
rl=document.getElementById("insSpecc").rows.length;
var a=document.getElementById("insSpecc").insertRow(rl);
var h=a.insertCell(0);
var f=a.insertCell(1);
var m=a.insertCell(2);
var n=a.insertCell(3);
h.innerHTML='<div class="separator"><input type="text" name="client_prod[]" class="separator" id="competitor_prod'+rl+'" style="width:150px" >';
f.innerHTML='<input type="text" name="client_nrx[]" id="client_nrx'+rl+'" size="5" />';
m.innerHTML='<input type="text" name="client_rrx[]" id="client_rrx'+rl+'" size="5" />';
n.innerHTML='<button class="del_img" onClick="delSpec('+rl+')">Delete</button></div>';
}
//function to delete a row
function delSpec(rl)
{
r=document.getElementById("insSpecc").rows.length;
if(r!=2)
{
document.getElementById("insSpecc").deleteRow(r-1)
}
}
HTML
<table id="insSpecc" width="100%;">
<div class="separator">
<tr>
<td><span>Product</span></td>
<td><span>NRX(Qty)</span></td>
<td><span>RRX(Qty)</span></td></tr></div>
<tr>
<td><input type="text" id="client_prod" name="client_prod[]" style="width:150px;" class="validate[required] text-input"></td>
<td>
<input type="text" id="client_nrx" name="client_nrx[]" size="5" class="validate[required] text-input">
</td>
<td>
<input type="text" id="client_rrx" name="client_rrx[]" size="5">
</td>
<td>
<button id="add_img" id='insSpecimg' style='display:block;' onClick="insSpec()" align="center">Add</button>
</td>
</tr>
</table>
Try to use
n.innerHTML='<button class="del_img" onClick="delSpec(this)">Delete</button></div>';
and later
function delSpec(node)
{
r=node.parentNode.parentNode;
r.parentNode.removeChild(r);
}
in such case delSpec will receive pointer to the button, and will be able to delete the necessary row.
document.getElementById("insSpecc").deleteRow(r-1)
which should be
document.getElementById("insSpecc").deleteRow(rl);
You should use id for each row, and u can delete that row with the ID... There are several ways to get a DOM element object in jQuery and other libraries.
All you need to do is, use getElementById("the id of the row") and store that element in a variable, or make it's innerHTML=""; or delete it like xdazz suggested.
You can also get elements with class names... so, if your row is using any css class, you can get that row like you did with the ID.
Aquatic is also right: you either need to access all the DOM, traverse it, and reach ur desired element and do whatever with it, or access it with element's id or class name.
You can also change ur html markup for each row to have a check box which tells which rows to delete... and for each row if a checkbox is selected, delete the row.
Vote up if you got the point.