Develop Reference

Jquery code doesnt work on html output from Javascript

I have this Jquery function to mask my textbox:
jQuery(function($){ //Mask textbox #hour with placeholder
$("#hour").mask("9:99",{placeholder:"0"});
$("#hourInTable").mask("9:99",{placeholder:"0"});
});
Works perfectly with this html code:
But when I try to do it in the textbox that has the ID hourInTable outputted by Jquery it doesnt mask anything:
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
This above code is called after a button press and the textbox hourInTable is placed somewhere on the page.
Placed this code direct into my html:
<input type="text" name="hourInTable" id="hourInTable" value="00:00">
And it worked, so its due to the html output in JS.
Thanks in advance.

Most likely it happens because when jQuery does the masking, the input is not yet present. Give the function a name and call it after you are sure that the innerHTML is placed.

try something like this
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
// call after text box is added
$("#hourInTable").mask("9:99",{placeholder:"0"});
because #hourInTable is not present on DOM ready so it doesn't apply mask on it
call masking function after your dynamically created input is added

Add the masking code in function. And call it on button click which adds dom <input type="text" name="hourInTable" id="hourInTable" value="00:00"> in page.

What is innerHTML on input elements?

I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.
The activeElement selector works fine, it is selecting the correct element.
Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
value applies only to objects that have the value attribute (normally, form controls).
innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).
They are not equivalent or replaceable. Depends on what you are trying to achieve

First understand where to use what.
<input type="text" value="23" id="age">
Here now
var ageElem=document.getElementById('age');
So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag
<button id='ageButton'>Display Age</button>
So here Display Age is the innerHTML content as it is written inside HTML tag button.

Using innerHTML on an input tag would just result in:
<input name="button" value="Click" ... > InnerHTML Goes Here </input>
But because an input tag doesn't need a closing tag it'll get reset to:
<input name="button" value="Click" ... />
So it's likely your browsers is applying the changes and immediatly resetting it.

do you mean something like this:
$('.activeElement').val('Some text');

<input id="input" type="number">
document.getElementById("input").addEventListener("change", GetData);
function GetData () {
var data = document.getElementById("input").value;
console.log(data);
function ModifyData () {
document.getElementById("input").value = data + "69";
};
ModifyData();
};
My comments: Here input field works as an input and as a display by changing .value

Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.
JScript
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
HTML
<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
For instance:
document.getElementById("example").innerHTML = "my string";
This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":
HTML
Change
Javascript
function change(){
document.getElementById(“example”).innerHTML = “Hello, World!”
}
After you clicked the button, Hello, World! will appear because the innerHTML insert the value (in this case, Hello, World!) into between the opening tag and closing tag with an id “example”.
So, if you inspect the element after clicking the button, you will see the following code :
<div id=”example”>Hello, World!</div>
That’s all

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
Example.
HTML
Change
Javascript
function FunctionName(){
document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}
On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.
So, on inspecting the element after clicking the button, you will notice the following code :
<div id=”example”>Hello, Kennedy!</div>

Use
document.querySelector('input').defaultValue = "sometext"
Using innerHTML does not work on input elements and also textContent

var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types

Get HTML hidden input value in inline jQuery

I want to get a value passed from the controller in jQuery.
I added a hidden input field
<input type="hidden" id="Result" value="#Model.Result" />
And I tried to get the value in Jquery as follows:
$("#Result").val()
Model.Result has values, but in Jquery it shows it has no value.
I am using inline Javascript.

Here is a fiddle and it works perfect. Did you try to put your code into $(document).ready()? For example:
$(document).ready(function{
alert($("#Result").val());
});

How to erase the text input that the user typed using JavaScript

<div class = "search ui-widget">
<label for = "keyword"></label>
<input type="text" id="keyword" onkeypress="searchKeyPress(event)" placeholder="Search here" required>
<input type="button" id="btnSearch" onclick="loadDeals('search', keyword.value,'')" />
</div>
$('.search input#keyword').Value('');
Basically what I want is to remove the user's input in the text box after the user clicks another menu tab. I tried $('.search input#keyword').Value(''); and $('.search input#keyword').css("value", ''); but it didn't work.

.val() is the right name of the jQUery method, not Value().
You can use jQuery like this:
$('#keyword').val('');
Or you can use plain javascript like this:
document.getElementById('keyword').value = '';
If there are more input fields beside the ones you posted and you want to clear all inputs you can use:
$('.search input').val('');

Here's a pure javascript solution:
document.getElementById('keyword').value = '';

Since HTML id attributes are supposed to be unique I would recommend not using the '#keyword' id in your jquery selector. The solution does work if there's only one text field, but it isn't scalable to multiple text fields. Instead, I would make 'keyword' a class for the input element and use the selector:
$('.search input.keyword').val('');
This is very similar to the solution Sergio gave except it allows you to control, via the 'keyword' class, which input elements have their values cleared.

Use this
$("the_class_or_id").val("");
Link for this: jQuery Documentation
This is introduced in jQuery API. You can use .value in JavaScript, but in jQuery its val(). It gets the value of the object and to clear the value, just add quotes!
JavaScript code would be:
document.getElementById("id_name").value = "";

Dynamically Generate Ids for jQuery Fields?

I am trying to integrate a calender view in a python based application. I Am almost done with it. now i have only a single problem of generating Ids for the calendar fields. eg If I have one calendar field then that field works fine with the below code, however if I have 2 or more calendar fields in one form how would I generate Ids for Them. and is there a need to write a separate script for every field. here is my code sample that I apply for a single field.
<script type="text/javascript">
$(function() {
$('#popupDatepicker').calendarsPicker({calendar: $.calendars.instance('islamic'), dateFormat: 'dd-mm-yyyy'});
});
</script>
And My web application code is here :-
<input type="text" **id="popupDatepicker"** name="${name}" autocomplete="OFF" size="3"
class="${css_class}" ${py.attrs(attrs, kind=kind, value=value)}/>
Now I want to generate id dynamically. The above code is called nly on my calendar type of fields. so how should i generate <input Ids > and their respective script here.

You could instead give them a class of popupDatepicker, and then change your jQuery to use .popupDatepicker instead of #popupDatepicker.
So replace your HTML with the following:
<input type="text" class="popupDatepicker" name="${name}" autocomplete="OFF" size="3" class="${css_class}" ${py.attrs(attrs, kind=kind, value=value)}/>
And your jQuery with this code:
<script type="text/javascript">
$(function() {
$('.popupDatepicker').calendarsPicker({calendar: $.calendars.instance('islamic'), dateFormat: 'dd-mm-yyyy'});
});
</script>

why not make a class only for those fields you want to have calendar then edit your selector as:
//get the element with popupDatepickerClass class and makeit a calendarsPicker()
$('.popupDatepickerClass').calendarsPicker(SOME TXTS);
notice how your '#' becomes '.'
your element looks like:
//add the popupDatepickerClass on every element you want to be converted as calendar
class="${css_class} popupDatepickerClass"
this way your script will look for all elements with the same class and make it a calendar.
//create a css class with name: popupDatepickerClass and its not necessarily to have a value
.popupDatepickerClass { }