Develop Reference

how to disappear input field in java script(not the value)

i have bootstrap model it have drop down .according to the drop down result i have display different input text field .my problem is if the select some option close the model and then open previous selected item input field is still in here .how do i remove it?
$(document).on('click', '.month_ot_resqust', function(){
$('#overtime_requset').modal('show');
clear_field();
});
clear function
this will reset the all the form data.but not remove in input field
function clear_field()
{
$('#overtime_requset_form')[0].reset();
$('#error_from_date').text('');
$('#error_type').text('');
$('#total_number_employee').text('');
$('#total_number_hours').text('');
$('#hours').val('');//this id input field i want disappear
}
input field
<input type="text" name="hours" id="hours" class="form-control" value="00:00:00" />

AngularJS: Populate a text box with the ID from a dropdownlist

In the following code, the repeated input textbox CountryID is affected selection of the Country text box. When the page is inspected after a selection, the only visible text box has the value with the correct value, but this value is not displayed on the page. When the submit button is pressed, the Item.CountryID is blank. But if the one visible text box is populated manually, Item.CountryID becomes populated. How do I get the required value into the visible text box which already seems to have its value set?
<tr><td>Country:</td><td>
<select name="country" class="select" id="country" ng-model="Category.Country" >
<option ng-repeat="Item in SPCountryListItems | orderBy:'Country'" id="{{Category.CountryID}}">{{Item.Country}}</option>
</select>
</td></tr>
<tr><td>County ID</td>
<td>
<span ng-repeat="Item in SPCountryListItems | filter:Category.Country">
<input type="text" ng-model="Category.CountryID" value="{{Item.CountryID}}" id="CountryID" />
</span>
From the Inspect window (the value is not visible on the page):
<input type="text" ng-model="Category.CountryID" value="10" id="CountryID" class="ng-valid ng-touched ng-dirty ng-valid-parse">

Can not show changed value to hidden field with javascript

I have a checkbox and 2 number input fields:
<input name="exercise[hold]" type="hidden" value="0"><input class="te-cb" id="exercise_hold" name="exercise[hold]" type="checkbox" value="1">
<input class="exerciseReps input-mini" id="exercise_number_of_reps_in_set" min="0" name="exercise[number_of_reps_in_set]" placeholder="Reps" type="number" style="display: none; ">
<div class="input-append te-len" style="display: inline-block; ">
<input class="exerciseLength input-mini" id="exercise_length" min="0" name="exercise[length]" placeholder="Length" type="number">
<span class="add-on">sec</span>
</div>
One input field is hidden with js:
$('.te-len').hide()
In form above there is also text input field with auto competition which gets the data with ajax (that is not relevant here). With jquery I am setting the values of input fields of form with data I got from server.
I also show hidden field if value for checkbox is true:
if data[selected].hold
$('.exerciseReps').hide()
$('.te-len').show()
and that works
Every field is set correctly accept the hidden field, that field is empty.
The weird thing is that I placed alert of that hidden field's value after it has been set and alert shows the value that should have been set but the value is not visible
$('.te-len').val( data[selected].length )
alert $('.te-len').val()
Note: the js code is actually coffescript.

I think the problem is because you are setting value to a div. Although use of val works, this function is primarily used on form elements such as input, select and textarea.
If you mean to replace the content of the div.te-len then you could use either html or text:
$('.te-len').html( data[selected].length )
But it sounds like you are trying to show data[selected].length value in the input.exerciseLength numeric field. For that you should be using:
$('#exercise_length').val( data[selected].length )

Cannot Fill Textbox with Javascript After Editing

I have a simple drop-down box and I am successfully using Javascript to automatically fill a textbox when a drop-down item is selected.
Once I edit any of the textbox's automatically filled text, or use a "Clear" button to erase textbox, the drop-down list no longer replaces fills the textbox.
How can I continue to use the drop-down box once the user has altered the textbox?
JSFiddle Version
HTML code:
<select id="dropdown" onchange="preset();">
<option value="">Select a person:</option>
<option value="Abe" >Abe</option>
<option value="Bob" >Bob</option>
<option value="Cal" >Cal</option>
<option value="Dan" >Dan</option>
</select>
<input type=Submit value="Clear" onclick="document.getElementById('mytext').value='';">
<textarea id="mytext"></textarea>
Javascript code:
function preset() {
document.getElementById("mytext").innerHTML=document.getElementById("dropdown").value
}

You use innerHTML in one place, and value in another. Using value in both fixes it.
Demo

Update the submit button to this:
<input type=Submit value="Clear" onclick="document.getElementById('mytext').innerHTML='';">

two submits buttons ,but the first returns empty

i have the first select options
<form id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" >
<option value="0" >Please Select your article</option>
<option value="3" selected='selected' > value 1</option>
<option value="2" > value 2</option>
<option value="18" > value 3</option>
<option value="16" > value 4</option>
</select>
<input type="hidden" name="hiddenselect" value="3" />
</form>
and the second is
<form action="" method="POST" id="form0">
<input type="text" name="date0" class="tcal" value="" readonly="readonly" /><br />
<input type="image" src="../submit.png"/>
<input type="hidden" name="submit0" />
</form>
this my javascript
function displayv() {
var singleValues = $("select option:selected").text();
$("#hiddenselect").val(singleValues);
$("select > option:first").prop("disabled", "disabled")
}
$(document).ready(function(){
$("select").change(function() {
displayv();
});
displayv();
$("select#infmenu").change(function() {
$("#infform").submit();
});
});
now when i select the first option the page refresh and i get the value selected.
and when i submit the second submit the page refreshes and the first select option returns empty Please Select your article.
so how should this be fixed please .
EDIT :
this the php how i handle between them.
if (isset($_POST['infmenu'])){
$infmenu = $_POST['infmenu'];
// some sql of updating here
}
if (isset($_POST['submit0'])){
//some updating sql here
}

It's not really clear to me what your question really is.
If you're saying you're not seeing your select item value when you submit the second form, then that is normal and expected. You have two independent forms so when you submit the second form, the data from the first form will not be sent to the server.
The submit button /image only sends data for the inputs within it's own form, not data from any other forms within your html body tag.
Edited to add: you could:
have a single form tag instead of two
modify your jquery so that it puts the select value into the hidden field of the second form s well as the hidden field of the first. Then when second form is submitted, have your PHP script read the hidden field value and use that when rendering the HTML to decide which option has the selected attribute.
use cookies with some JavaScript to set the cookie when the value of select changesuse Ajax to do a partial submit - assuming server doesn't need to know value of select item when dealing with second form

There is no action="" assigned to the first button.

You have two forms.
When you click the submit in the second form, of course the data of the first form is not submitted.
Also, the submit button in the second form has no name, so you perhaps cannot evaluate in PHP if the button is clicked. But that's a different story
You should make the two forms one.
If they are too far apart on your page. You should save the value of the select box in the hidden field in the second form with php