I need to use javascript in order to click an element from element collection. As seen the code has C# but also as seen I need to use a javascript command as I do.
I am looking for this javascript code.
This element doesn't have an ID or name. Otherwise, I could have used the ID but that doesn't work in this case. How would it be possible to use the iterating elements in order to click with javascript"?
The problems are:
1. First I need to click this input/textbox to make it possible to edit.
2. Now when the input is editable. I need to put a number value to the textbox.
foreach (Gecko.GeckoHtmlElement elements in wb1.Document.GetElementsByTagName("input"))
{
if (elements != null)
{
if (elements.OuterHtml.Contains("thisstring"))
{
//This element doesn't have an ID or name. "how to use elements in order to click with javascript"?
//1. First I need to click this input/textbox to make it possilbe to edit
//2. Now when the input is editable. I need to put a value to the textbox.
webbrowser.Navigate("javascript:void(document.getElementById('someID').click())");
}
}
}
The HTML surrounding the element I want to click is below. You can see the input there:
<td class="date-cell" cm-inventory-grid-copy-action-focus data-header-date-index="0" data-cm-inventory-grid-copy-action-focus-type='availability' ng-class="{ 'zero': roomTypeDatesByRoomTypeId[roomType.id][headerDates[0].fullDate].availability <= 0, weekend: headerDates[0].weekend, 'dirty': roomTypeDatesByRoomTypeId[roomType.id][headerDates[0].fullDate].availabilityChanged, 'copy-focused': roomTypeDatesByRoomTypeId[roomType.id][headerDates[0].fullDate].copyFocused && roomTypeDatesByRoomTypeId[roomType.id][headerDates[0].fullDate].copyFocusType == 'availability' }" ng-form="cellForm">
<input name="rtd-availability" type="number" onclick="this.select()" ng-model="roomTypeDatesByRoomTypeId[roomType.id][headerDates[0].fullDate].availability" ng-change="handleRoomTypeDateChange(roomTypeDatesByRoomTypeId[roomType.id][headerDates[0].fullDate])" pattern="\d+" ng-disabled="::!allowAvailabilityEdit" required sm-no-scroll cm-inventory-grid-date-cell-validator/>
</td>
To get html element in javascript you can use "document.querySelector('input')" or if there are many input elements you can use "document.querySelectorAll('input')".
querySelector returns HTML node element and querySelectorAll returns array of elements.
By using document.qerySelector you can identify the correct input quite easily since you can use attributes and the html structure as criteria.
//select an input that is a child of a td with class date-cell who's name is rtd-availability
let input = document.querySelector('td.date-cell > input[name=rtd-availability]')
//no need to call .click(), you can use .select() directly
input.select();
input.value = 42;
javascript:(() => {let in = document.querySelector('td.date-cell > input[name=rtd-availability]'; in.select(); in.value = 42;})();
I am getting the following string from javascript innerHTML using this code.
window.getSelection().anchorNode.parentNode.innerHTML;
output is,
<input name="boxes[]" value="checkbox_1" id="box_1" type="checkbox">fgfg
How do i get the check box id from the html string.
i need to find out the id value from the checkbox.
Don't get the innerHTML, get the element you want instead.
window.getSelection().anchorNode.parentNode.getElementsByTagName('input')[0].id
hey there i am trying to create a new html attribute for which i am following this link, in which i have succeeded. i am also trying to echo the value of the attribute in a number of the same html tags, which in this case is an <a> tag, which is inside a div tag and am using the jquery .find() to get the value of those attributes in those <a> tags. but i only get one attribute value, which is the first one, but not the rest, basically i want to echo the value of the attribute in all the <a> tags. how can i do this, oh and a working fiddle
USe .each() to loop through each node
$("#gh").click(function() {
$("#new_attr").find('.showItLink').each(function(){
alert($(this).attr("textToShow"));
});
});
Fiddle
If you want to get the exact node which contains a specific attribute value, use like this
$('.showItLink[textToShow="This is the text to show0"]')
Fiddle 2
you acheive the scenario through .each() in jquery
$("#gh").click(function() {
$("#new_attr").find('.showItLink').each(function() {
if($(this).attr("textToShow") == "This is the text to show5") {
alert ('found');
}else{
alert ('not found');
}
});
});
DEMO
I am trying to set some attributes on HTML snippets. The purpose is to repopulate a form with previous inputed values. I set attributes with .attr() but after I do a .html(), I do not see my changed attributes.
I have done a basic example here http://jsfiddle.net/ejanderson4/CSYnU/
My function looks like this:
function setValue(html,value,name){
var element=$(html);
$(element).find("[name='"+name+"']").attr('value',value)
return element.html();
}
It is setting it, but for reasons unknown to me, you can't directly query the value attribute of an input element. You need to call .val() on that element to get it.
Updated your example here
parse the html string using $.parseXML and then set the attr value
var html="<div><label id='el_c5c0f78656138c39c5eb91a9bf1d3bf6'> table input 1 </label><input type='text' value='' name='table_input_1' class='select-mini' id='table_input_1' /></div>";
var value= 'xxxxxxxxxxxxx';
var name='table_input_1';
function setValue(html,value,name){
var xml = html,
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "[name='"+name+"']" );
$title.attr("value",value);
//var element=$(html);
//element.find("[name='"+name+"']").attr('value',value)
return $title.attr("value");
}
alert(setValue(html,value,name));
here is the working fiddle http://jsfiddle.net/CSYnU/4/
also this solution requires you to use jquery version 1.5.2 and higher
update
sry for overdoing it in your scenario you have to do
function setValue(html,value,name){
var element=$(html);
$(element).find("[name='"+name+"']").attr('value',value);
return $(element).find("[name='"+name+"']").attr('value');
}
here is the fiddle http://jsfiddle.net/CSYnU/5/
you are wrapping the html in $(html) then there is no need to again wrap the cached html in $
var element = $(html);
element.find ...
see here http://jsfiddle.net/CSYnU/6/
I think the short answer here is that setting an attribute on a DOM object does not necessarily change what the browser returns for innerHTML. If you want to retrieve a particular attribute, then you should just retrieve that attribute directly.
You also have an error in your code (which jQuery might be tolerating). You've already turned element into a jQuery object so you don't need to do that again with $(element).find, you can just use element.find.
function setValue(html,value,name){
var element=$(html);
element.find("[name='"+name+"']").attr('value',value)
return element.html();
}
Depend on your code, the first problem is about element variable. It doesn't denote "table_input_1" element. To get this element, you should replace by :
var element=$(html).find("[name='"+name+"']");
The second problem is in the your return statement. Since you changed the value of input element, you have to get this value by method val() or attr('value') rather than html(). The html() method is used to get the content inside tags of a element, but in this case value is a attribute, not content.
return element.attr('value'); // element.val();
Here is the complete code:
function setValue(html,value,name){
var element=$(html).find("[name='"+name+"']");
element.attr('value',value); // element.val(value);
return element.attr('value'); // element.val();
}
One reason is that the jQuery attr method gets confused between HTML attributes and DOM properties. The imlpementation of setAttribute and getAttribute was (probably still is) buggy in IE, so in general forget about HTML attributes and use DOM properties.
In most browsers, modifying the HTML attribute (say using setAttribute) will modify the related DOM property. But in many browsers, changing the DOM property will not modify the HTML attribute.
Further, some browsers will modify an element's innerHTML based on the current DOM property, others will use the HTML attribute (which might have a different value in most browsers). HTML 5 is the first attempt to standardise the behaviour of innerHTML, note that it is not a W3C standard yet and is not consistently implemented.
The best approach is to be consistent and always set DOM properties to the values you want. Expect that an element's innerHTML may be inconsistent across browsers.
Setting the current value of an input element doesn't change the initial value, which is what the value attribute is.
There is no property to change the initial value, so you can't alter the HTML code that way.
Edit:
If you want to use the elements in the page, then just make the function return a jQuery object containing the elements instead of returning HTML code:
function setValue(html, value, name){
var elements = $(html);
elements.find("[name='"+name+"']").val(value)
return elements;
}
Adding the elements to the page works the same as using a string. Example:
var html = '<div><input type="text" name="city" /></div>';
$('#SomeForm').append(setValue(html, 'York', 'city'));
is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);
If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.
You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit
//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});