We Keep Coding

How to click a HTML element with javascript

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;})();

Change element ID using Javascript?

<div id="content">
Content
</div>
How would I change the ID of this div using Javascript?

Found this on the first result on a Google search:
document.getElementById("originalDivId").setAttribute("id", "newDivId");
getElementById does exactly what it says, it obtains the information of an element with the Id specified. setAttribute changes a HTML element's attribute, that is the stuff inside of the HTML tags (e.g. class="", id="", style="", etc).

You can replace a <div> element's ID with .setAttribute("id", "newID"). This replaces the ID attribute of the target element with the value specified in the second parameter.
Here's an example showcasing this, changing the ID original to modified, and logging the change to the console:
console.log(document.getElementById("original").id);
document.getElementById("original").setAttribute("id", "modified");
console.log(document.getElementById("modified").id); // The same element
<div id="original">
Content
</div>
Note that you have to re-target with document.getElementById("modified") once the change has been applied.
Hope this helps! :)

javascript split the element id from window.getSelection().anchorNode.parentNode.innerHTML

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

Insert javascript (jquery) variable in html input field (textbox)

With span and div this works
jQuery
$('#exchange_rate1').html(data[0].FinalCurrencyRate);
HTML
<span id="exchange_rate1"></span>
But if the HTML is an input element such as <input type='text' name='exchange_rate1' id='exchange_rate1' value='<?php echo $post_exchange_rate; ?>> then nothing happens.
Removed php code from value the same nothing.
I also tried document.getElementById("exchange_rate1").html(data[0].FinalCurrencyRate); but I also see nothing.
Now clear, that need to use val. I just searched google for how to insert jquery variable in input field. Could not find.

Use jQueryObject.val(some_value) to set the value of an input, not html().

To be more specific:
// store the value you're looking to assign
var data = [
{ FinalCurrencyRate: <?= $post_echange_rate; ?> }
];
the jQuery way:
$('#exchange_rate1') // grab the <input>
.val(data[0].FinalCurrencyRate); // and assign it from the variable
the straight js way:
// normal JS version:
document.getElementById('exchange_rate1') // grab the <input>
.value = data[0].FinalCurrencyRate; // assign it
Any kind of form fields (<input>,<select>,<textarea>) use .val() to get/set since they don't contain child elements. .html() should be used for structural elements.

In case of text use as
$("#exchange_rate1").val('Hello');

This is because you aren't supposed to be setting the innerHTML of the input element, but the value.
In jQuery you use the .val() method:
$('#exchange_rate1').val(data[0].FinalCurrencyRate);
Or with plain JavaScript, you're changing the value property of the HTMLInputElement object:
document.getElementById('exchange_rate1').value = data[0].FinalCurrencyRate;

For textual input boxes, use .val(), for textareas, use .text(), and for non-input type elements, use .html().

All you need is
$("#exchange_rate1").val('Hello');

How do I change the value of an input element?

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');
});
});