We Keep Coding

How do I make an html text input readonly but be able to update with a script?

I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?

Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);

Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';

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 do I prevent a pre-set INPUT value from being changed?

I have a form where some fields are completed by loading information from a database. These fields can vary from one account to another.
When the form is submitted any database information will be sent along with new information entered in the form.
However, the user is able to change (on screen) the information entered from the database, and although these changes are not submitted (my $Xvariables from the database override the POSTed $variables), I would like them to revert the on-screen data back to the database value.
Here is an example of what I have at the moment, but it does not work ...
<input type="text" name="firstname" size="25" tabindex="4" onchange="if($xfirstname<>'') this.value=$xfirstname" value="<?php echo $firstname;?>"/>
or better still, if there is a way, how can I make them unchangable if they have a value loaded from the database ?

Just place readonly="readonly" within the input <> tags or place disabled="disabled"
Example
<input type="text" name="firstname" size="25" tabindex="4" onchange="if($xfirstname<>'') this.value=$xfirstname" value="<?php echo $firstname;?>" readonly="readonly" />

Keep this:
<input type="text" name="firstname" size="25" tabindex="4"
value="<?php echo $firstname;?>"/>
Add this: Edit: Sorry did not see it has no ID on the input element use this:
<script>
if($('input[name="firstname"]').val().length > 0)
{
$('input[name="firstname"]').attr("disabled", true);
}
</script>
Result :http://jsfiddle.net/4wt9r/6/
But keep in mind anything on the client can be changed, your true filtering/authenticating must be done on the server.

Send value with Onchange and javascript function

I'm new at JavaScript and I need some help to submit my form when anyone select anything from the dropdown list. Here is the sample code :
<form action="" method="post">
<select name="car" onChange="this.form.submit()">
<option value="car1">car1</option>
<option value="car1">car1</option>
<option value="car1">car1</option>
</select>
<!-- Some other code -->
<input type="submit" name="sentvalue">
</form>
This is my form and when anyone selects the dropdown, the form automatic submit but I also need the sentvalue when automatic submit the form. So can anyone help me to capture the sentvalue when anyone select the dropdown.

If you want to send any other data with the form submit you can send it in hidden inputs
<input type='hidden' name='data1' value='Test1' />
<input type='hidden' name='data2' value='Test2' />
//etc
And if you want the value of submit button with the form just set the value attribute into your code for submit button every this else seems fine,
<input type="submit" name="sentvalue" value="Test1" />
Hope this answers your question

Just give the <input> tag a name
<input name="submitbtn" type="submit" value="sentvalue" />
then you can get it by $_POST['submitbtn'] in case of PHP which value is "sentValue"

It sounds like you want the value of the input field (sentvalue) to be submitted as well. But how do you guarantee that the value was specified by the user? Is this supposed to be a hidden input field?
Either way your input tag is incomplete. This sounds better:
<input type="text" name="sentvalue"></input>
Also, when you submit, the value of this field (sentvalue) will be passed in too. As long as your tags are right you don't need to worry.

You will have to create a hidden input element
<input type='hidden' id='sentvalue' value='' />
and call a function on submit instead of directly submitting
Use this in the function to set the values and submit
var e = document.getElementByName("car");
document.getElementById("sentvalue").value = e.options[e.selectedIndex].value;
this.form.submit();

want my form's values to show in another div after clicking submit

I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>

Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});​

You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});