I first use this code to find an element with a specific text content:
$('someElement').filter(function() {
return $(this).text() == 'Some text';
});
Then, I want to find the <input> element that's inside the next <td> tag.
Below is the HTML code:
<tr>
<td>
<label for="SH_Request_First_Name">
First name <span class="required">*</span>
</label>
</td>
<td colspan="2">
<input type="text" name="SH_Request_First_Name" id="SH_Request_First_Name"
value="" size="38" maxlength="50" onchange="validatePresent(this, 'SH_Request_First_Name_Note');"
/> <span id="SH_Request_First_Name_Note"> </span>
</td>
</tr>
I first found the label with text "First name". Then I want to find the <input> that's in the next <td> tag.
Is it possible to do the above tasks in JavaScript, instead of jQuery?
When you've found the first td tag you can access the next one in JS with
yourTd.nextSibling
This will return the next tag in the document.
If you want to get there from the label you first have to get the parent and then the sibling:
yourLabel.parentElement.nextSibling
but this construct is error prone if you change the HTML construct some times. I would recommend to use jQuery and select by a specidic css class or something like that, so it doesn't have to be exactly the next element, only one of the next elements with that css class.
Related
<span>
<input name="" autocomplete="off" label="" class="form-control mandatory field-mandatory" placeholder="">
<span class="goog-combobox-button"/>
<input type="hidden" value="3" id="ctl00_cntMainBody_OBJECT_ONE__PMLookupField" name="ctl00_cntMainBody_OBJECT_ONE__PMLookupField">
</span>
I would like to find out if there is a way, using jQuery, to find if the input above the one with id=ctl00_cntMainBody_OBJECT_ONE__PMLookupField has a css class field-mandatory. There are many spans on the page with similar to this one. I am working within the existing structure of html with no option to change. Since the input has no id the only way to locate it is by using the input below it that has an id.
Find each hidden input and target the sibling you want :-
$("input[type='hidden']").each(function() {
var inputAbove = $(this).siblings('input.field-mandatory');
// DO SOMETHING
});
I have a table with tr that have this pattern
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
What I want to do is onclick on this button which will have the same sequence matching the input example button id=s1 input id =info1
I want to change the background color. I prefer jquery or javascript is fine. I thought about the regex with starting with .. ^ ..
function ChangeThis(x) {
$(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow');
}
That doesn't work, I tried tr instead of td
UPDATE/EDIT
So Essentially what I want is that When the button is clicked that there are predefined things to change in the text
Font Color
Bold or not
Background Color
UPDATE
Ok, I think I understand what you'd like.
Let me know if this fiddle solves it:
https://jsfiddle.net/14ymd0pd/
Based on your description, I'm a little confused as to what you'd like.
I've created a JSFiddle with what I think is the intended functionality.
https://jsfiddle.net/tvu08yrm/
The main differences involved separating out the JavaScript, using the jQuery on event handler:
$('.color-btn').on('click', function(){
adding a new class (color-btn) so the buttons could be targetted and changing the functions which trraverse the DOM Elements.
A couple of notes:
You should not be using inline JavaScript. I've separated out the JavaScript in my fiddle.
Since I can only see a small section of code it's hard for me to say, but if the page isn't going to be displaying tabular data then don't display it in a table...use a div or ul or another relevant element, just not a table.
I haven't done it in my fiddle, but you should also move the inline css out of the markup and into an external css file.
The JavaScript is dependant on the structure of the table, if you change its structure you'll also need to update the jQuery selectors. This can be avoided by following a naming convention in the table rows and using these to target the appropriate elements instead of their relative positions.
Let me know if the fiddle answered your question :)
There are many solutions to get your code working.
First solution: use x instead of this inside the function
pro: code works
contra: bad coding style and you should not use inline javascript.
Second solution: change onclick="changeThis(this)" to onclick="changeThis.call(this)"
pro: the code works, and you can use this in function context
contra: you use this in function context... there are only a few situation to do that. this is not such a situation. and again: inline-javascript
Third solution: don't use onclick.
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis);
you should use the third one.
I have a form with a jquery date select and radio buttons like below
<table>
<tr>
<td>
<input type="text" id="5506_datepick_1"></input>
</td>
<td>
<input id="5506_protocol_protocol_1" type="radio" value="protocol 1" name="5506[protocol]">pp1</input>
<input id="5506_protocol_protocol_2" type="radio" value="protocol 2" name="5506[protocol]">pp2</input>
</td>
</tr>
<tr>
<td>
<input type="text" id="5507_datepick_2"></input>
</td>
<td>
<input id="5507_protocol_protocol_1" type="radio" value="protocol 1" name="5507[protocol]">pp1</input>
<input id="5507_protocol_protocol_2" type="radio" value="protocol 2" name="5507[protocol]">pp2</input>
</td>
</tr>
</table>
Whenever someone selects both the inputs on each row(example: radio for 5506* and date picker for 5506*) I want to be able to trigger a function regardless of the select order.
I have tried the following (in Js Fiddle) but its useless.
Anyone have any ideas on how I can go about this unobtrusively.
Jsfiddle
Your input selector is using ^=, which matches the exact START of a value, yet your values don't start with that value. I suggest changing that to *= so it searches anywhere within the ID. Reference jQuery Docs
Second, you're forgetting a closing ' quote for that selector.
That fixes the selector issues for activation. Now you just need to trigger a common function to check if both Date and Radio (in the same line) have been filled out.
Fixed JSFiddle
This activates the checkProtocol() function when a date is selected and passes the input text element along to it.
$(this).datepicker({
onSelect: function() { checkProtocol( this ) }
});
This activates the checkProtocol() function when a radio button has been selected for that group and passes that element along as a parameter.
$("input[id*='protocol_protocol']").change( function() { checkProtocol(this) } );
I'm very new to using jQuery and JavaScript but here goes. I am trying to create a toggle function for my website. There is an input to select the name of the event which displays as default as a dropdown list of all the events in the database - but I want there to be an option to change it to manual input and type the name of the event as what ever you want.
I can get this to work fine! However I can't get the link to change the input BACK to a select box to work.
See my code below:
/// jQuery Code ///
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleEventInput() {
$("#EventNameDropDown")
.replaceWith('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
$("#EventNameChange")
.replaceWith(' (Drop Down Input)');
}
function toggleEventInputBack() {
$("#EventNameDropDown")
.replaceWith('TEST');
$("#EventNameChange")
.replaceWith(' (Manual Input)');
}
</script>
/// HTML Code ///
<table>
<tr>
<td class="label">Event:</td>
<td>
<span id="EventNameDropDown">
<select name="boxEvent" class="FieldInput" style="width:254px;" />
<?= $EventNameDropDownList ?>
</select>
</span>
<span id="EventNameChange">
(Manual Input)
</span>
</td>
</tr>
<tr>
<td class="label">Company:</td>
<td><input type="text" size="35" name="boxEvent" class="FieldInput" /></td>
</tr>
</table>
As said, when you click the original link to '(Manual Input)' it works fine and changes it to a text box. But then when you click the '(Drop Down Input)' link it does nothing.
Any help would be appreciated.
You need to use .html() instead of .replaceWith(). The former replaces the contents of the element. The latter replaces the element itself. By using .replaceWith() you are replacing the <span> that contains the <select> too.
Krishna is suggesting that rather than just replace the html for the <select>, you first store it in a variable so you can put it back later.
You could store it as data on an element, like this:
function toggleEventInput() {
// Store the html for the <select>.
$('#EventNameDropDown').data('selectHtml', $('#EventNameDropDown').html());
$("#EventNameDropDown").html('<input type="text" size="35" name="boxEvent" class="FieldInput" />');
$("#EventNameChange").html(' (Drop Down Input)');
}
function toggleEventInputBack() {
$("#EventNameDropDown").html($('#EventNameDropDown').data('selectHtml'));
$("#EventNameChange").html(' (Manual Input)');
// Clear the html for the <select>. We will get it again later if we need it.
$('#EventNameDropDown').data('selectHtml', '');
}
Its better to add the drop-down list inside a div/span and while clicking the toggle button, store the data inside the div/span to a variable and replace the content with the input box. on next toggle, replace the div/span with that data in the variable. a status variable 0/1 will help to toggle the data..
I have a table that contains in each row an input and a "save" image.
<td>
<div id="acp_1" style="margin-left:100px;display: inline">
<input size="10" type="text" value="11:00" name="acpr_1" id="acpr_1" />
<span class="modify-listener" id="ml_1">
<img id="save_1" src="/images/skin/database_save.png" alt="modify"/>
</span>
</div>
</td>
<td>
<div id="acp_2" style="margin-left:100px;display: inline">
<input size="10" type="text" value="11:00" name="acpr_2" id="acpr_2" />
<span class="modify-listener" id="ml_2">
<img id="save_2" src="/images/skin/database_save.png" alt="modify"/>
</span>
</div>
</td>
The __number pattern is used to differentiate one row's element from another.
I need to capture the click event on the image, so I can save the input's value in the backend. Something like:
Event.observe('modify-listener', 'click', function(){
....
How can I detect which row's image was clicked so I can call an Ajax function with the right values?
Thanks.
The technique you are searching for is called event delegation. It basically means that you handle an event on a higher lever of the tree so as to have only one event handler instead of many.
What you need to do is to find the container element that includes all the images (like the table that they are in), and use it as the base for event handling, and give its id to Event.observe. Then you can find out which img was clicked by using the Event.findElement method.
Event.observe('target', 'click', function(event) {
alert( Event.findElement(event, 'IMG').id ); // e.g.: save_1
});
assuming that your table has an id #target
You can find a working demo here.