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" />
Related
Please help me....with my problem I want to make a system that add new input field and each input field have a hide element only show the element when input field is clicked.
For example I clicked the input1 the element will show and if I clicked the input2 the element will show and in the input1 the element will hide.
And additional each input field should have a remove button
I don't have a code to show because I don't any idea.
Please help me with this problem.
Thank you and God bless
//using jquery
$('.btn').click(function () {
$('.container').append('<input name="firstname" placeholder="Firt name"/>');
$('.container').append('<input name="lastname" placeholder="Last name"/>');
});
<button class="btn" >Click</button>
<div class="container"></div>
My project has a form with an input field and a button.
<input id="inputID" form="IDForm" type="text" autocomplete="off" data-ng-model="User.getInfo().ID" placeholder="Enter ID">
<button form="IDForm" type="submit" class="forward-button" ng-if="User.getID()" data-ng-click="sendID()">
Verify ID
</button>
Currently the ng-if makes the button not appear until the user enters an ID. When they enter an ID and click Verify ID, they are taken to the next page. However, if they press back from that page then the input field is automatically filled with the ID they previously entered because of the two way ng-model binding. Is there a way to prevent the input field from automatically filling in that bound attribute when the page loads?
When the button is enabled, set the current form to pristine state, $scope.form.$setPristine(); which will ensure even when you press back, the form values will not populated and would be in the initial state.
I have multiple input fields with same name
<input type="text" name="pname" />
<input type="text" name="pname" />
I'm generating these input fields by cloning the first one using jquery. Therefore there can be 'x' number of input fields.
I'm also implementing autocomplete function by targeting the 'name' attribute.
$('[name="pname"]').each(function(){
$(this).autocomplete({
source: "searchproduct.php",
minLength: 1
});
});
The autocomplete works fine for first input field. But from next input field I get same result as first one i.e I'm not shown a list of matching results but the result from the first input field only.
How to get different result in each input field?
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 )
I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">