Develop Reference

input type text value showing undefined in javascript / jquery

I have one input type textbox, passing value from that textbox to the controller in .net mvc via javascript. Now, my problem is that in textbox I put the value but in javascript/jquery alert it showing me undefined.
Here is my code,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="SVG00001" name="referencecode" id="referencecode" />
<button class="Referencebutton" onclick="AddReferenceCode()"><span>Submit</span></button>
<script>
function AddReferenceCode() {
alert($('#referencecode').val());
}
</script>
I used javascript as well as jquery type also to get the value from input text. But nothing work.
As per the code seen, I dont think so is there any problem in code still shows the undefined value. Surprised...!!!

Cannot get attribute value

I have the following HTML:
<input class="file_upload" type="file" multiple="true" data-photoShootId="#item.PhotoShootItemId" />
And the following jQuery:
<script type="text/javascript">
$(function() {
$('.file_upload').uploadifive({
//*snip*
'formData': {
'PhotoShootItemId': $(this).data('photoShootId')
},
//*snip*
});
});
</script>
The script itself functions with no issues.
My problem is I cannot seem to get the data-photoShootId value from the file_upload element. I simply get undefined in my POST data. If I replace the .data call with a constant value, it works fine.
If I use $(this).attr and photoShootId="#item.PhotoShootItemId", I get the same result.

The issue is because this in your code does not refer to the element you are instatiating the plugin on, but the window.
To get an attribute from the element to use in the plugin call you need to loop over each individually:
$('.file_upload').each(function() {
$(this).uploadifive({
//*snip*
'formData': {
'PhotoShootItemId': $(this).data('photoShootId')
},
//*snip*
});
});

Please set the data attribute like this :-
<input class="file_upload" type="file" multiple="true" data-photoshootid="#item.PhotoShootItemId" />
And get the attribute like this
$(this).data('photoshootid')
Avoid using uppercase letters for data attributes

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.

Populate form field with javascript

I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function.
document.getElementById('var1').innerHTML = test;
alert(test);
I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:
#helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="#name" id="#id" #toHtmlArgs(args)> }

innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:
<input ...>test</input>
I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.
document.getElementById('var1').value = test;

If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.
Such as various JS two-way component template binding libraries.
For instance, you can simply do the following:
HTML:
<div id="myapp">
<input id="var1"/>
<button>Submit</button>
</div>
JS:
mag.module('myapp',{
view : function(state){
var test= 'tester';
state.button= {
_onclick:function(){
state.var1=test
}
}
}
});
Here is working example of the above example:
http://jsbin.com/ciregogaso/edit?html,js,output
Hope that helps!

change value of h:outputtext using jquery

i have one component OutputText , i want to change its value using jquery,
my component is,
<h:outputText id="txt_pay_days" value="0"
binding="#{Attendance_Calculation.txt_pay_days}"/>
thanks for any help...

<h:outputText> will be converted to <span> in raw HTML So,
Use id of the DOM and play with jQuery
${"#txt_pay_days"}.text("New Value To Set");

The <h:outputText> renders a HTML <span> with the value as its body.
<span id="txt_pay_days">0</span>
The jQuery .val() function works on HTML input elements like <input type="text"> only. The <span> isn't an input element at all. Instead, you need to use the jQuery .text() function.
$("#txt_pay_days").text("123");

try this..
$('#txt_pay_days').val('valueYouWantToInsert');