We Keep Coding

post form on any input change it contains the input type hidden which changes dynamically

<form id="pricecal">
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required />
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" value="" placeholder="Check Out" required />
<input type="hidden" onchange="calprice()" id="noroom" value="" name="room" />
<input type="hidden" onchange="calprice()" id="noguest" value="" name="guest" />
</form>
my code perfectly works on input text but not on input type hidden
i tried following ways i dont want to loop for every input
function calprice(){
alert('Textarea Change');
}
$(document).on('change', 'form#pricecal input', function(){
alert('Textarea Change');
});
$("form#pricecal input").bind("change", function() {
alert('Textarea Change');
});

As you have bound event on the elements that can be triggered whenever you update your input's value:
$('input[type="hidden"]').trigger('change');
Put this line just after that line of code which causes the value change.

type=hidden
These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".
Refer this link

Getting input value with javascript when it's not part of the form?

I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks

Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case

How to disable only one field in form using javascript?

I have a form with multiple text fields.
In the form at the top is a question of two radio buttons:
Go direct or go public.
Go direct means you have to supply an email address.
Go public means the email box is disabled.
<input type="radio" name="target" value="public" />
<label for "public">Open to anyone </label></br>
<input type="radio" name="target" value="direct"/>
<label for="newEmail">Email address of the person:</label>
<input type="text" name="newEmail" id='newEmail'>
</br>
</br>
</br>
<label for="title">Book title:</label>
<input type="text" name="title" id='title'></br>
<label for="location">Location:</label>
<input type="text" name="location" id='location'>
No other form fields must be affected

You can do stuff like this
$('input:radio').on('click',function(){
if(this.checked && this.value == "public") // this.checked is not necessary as checking value already
$("#newEmail").prop("disabled",true);
else
$("#newEmail").prop("disabled",false);
});
Fiddle
Side Note: I would suggest click instead change() because radio buttons are often toggled in a group, you do not need to add more than one case or conditional logic like you do with checkboxes. though change can also be used

This will trigger the disabled state of the email input based on which radio button is selected.
var $radios = $('input[type="radio"]');
$radios.change(function() {
$('#newEmail').prop('disabled', $radios.first().is(':checked'));
});
JSFiddle

change value of 2 fields depending on dropdown and radio button selection

I am trying to replicate the sort of functionality which is present on this website. The price, mentioned above the 'Get a Protective Plan' button, updates with respect to different options selected from the dropdown and the radio button selected.
Now I have a form which has 2 read-only input field's for 'Price' and 'Price-2' and I want the value of those fields to be updated depending on the selection of the dropdown options and the radio button by the user. So basically, the values of the read-only input fields, which needs to be updated, will be an addition of the values of the selected dropdown option and the radio button.
Here's a rough example of the form which I've created along with the dropdown and the radio buttons:
<form action="#" method="post">
<label>Last Name*</label>
<input type="text" name="lastname" value="" required="true">
<select id="p1">
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
<option value="4">$4</option>
<option value="5">$5</option>
</select>
<input id="p2" type="radio" name="price2" value="50">$50<br/>
<input id="p2" type="radio" name="price2" value="100">$100
<label>Price</label>
<input type="text" name="Price" readonly="readonly" value="">
<input type="text" name="Price-2" readonly="readonly" value="">
<input type="submit" value="Submit">
</form>
So in this form if I select the second option from the dropdown whose value is '2' and then I select the first radio button whose value is '50', I'd want the value of the 'Price' and the 'Price-2' fields to automatically become '$52'. I know this can be achieved using jQuery but I cannot really figure out how as I am still learning it. Looking forward to get a solution. Thanks.

you can accomplish using JQuery,
Here is a Fiddle Demo for your desired result.

MVC Moving data form Table to Input

I'm trying to move data from a selected row in a table to a form in MVC. I'm using a jquery click event to retrieve the data from my table and move it to my form. The click event is working but it is moving the data to the wrong fields. Heres the click function:
$(document).ready(function () {
$(".innerTbltr").click(function () {
alert("Event handle.");
//this.css("background-color", "#E8EEF4");
$("#firstName").val(this.childNodes[0].innerHTML);
$("#lastName").val(this.childNodes[1].innerHTML);
$("#address1").val(this.childNodes[2].innerHTML);
$("#address2").val(this.childNodes[3].innerHTML);
$("#city").val(this.childNodes[4].innerHTML);
$("#state").val(this.childNodes[5].innerHTML);
$("#zip").val(this.childNodes[6].innerHTML);
$("#birthDate").val(this.childNodes[7].innerHTML);
});
});
The form is set up like this:
<form>
<input id="firstName" type="text"/>
<input id="lastName" type="text"/>
<input id="address1" type="text"/>
<input id="address2" type="text"/>
<input id="city" type="text"/>
<input id="state" type="text"/>
<input id="zip" type="text"/>
<input id="birthDate" type="text"/>
</form>
Currently the first name is put into the last name field. The last name is put into the address 1 field. The address 1 is put into the state field and the remaining two fields are left blank. As well as the fields in between the fields that have data are blank.

It might be that not all the DOM is loaded Try putting the click event in a jQuery
$(document).ready(function(){
//the click event here
});