I am looking to see if it's possible to submit a form automatically when a field is not empty. I have a 1 input fielded form which is a date picker. I am hoping that when the user selects a date it submits this value automatically.
Is this possible?
Cheers
I found a solution to it:
<script>
function myFunction() {
var el = document.getElementById('input-datepick').value;
if (el!=""){
document.getElementById('datepick').submit();
}
}
</script>
then on my HTML
<input onchange="myFunction()" name ="input-datepick" id="input-datepick"
type="text" class="form-control datepicker">
You can simply add an EventListener to your input field and submit the associated form when the input field changes:
document.getElementById('id of your input field').addEventListener('change',function(){
document.getElementById('id of your form').submit()
}
hood a function on date picker enter button.
use jquery .submit function if your input is warped in a form.
Another way could be use .ajax call pass your input value as ajax data. is not needed in this approch
Related
Alright for some reason I need to have an input field, which fills when a checkbox is ticked. The input field takes the value of the checkbox as input. After that I need to put the value in another input field which is readonly and is styled to NOT look like input (don't ask), but if the value is longer than the field, the text is partially shown.
Now I have seen some code, which helps in similar situations like here, but it helps only when text is entered in the field. I need it to change according to the already entered value.
I have this:
<input type="checkbox" id="single_room" value="Single room"/>
<input type="text" name="single_room_input" id="single_room_input" style="display: none;">
The value is then submitted and processed with php and displayed again in the other input field:
<span class="text">
{$single_room_input}
</span>
<input class="overview-data" name="single_room_input" value="{$single_room_input}" readonly>
and if I use
$(function () {
$('.overview-data').on('input', function ()
{ $('.text').text($('.overview-data').val()); });
});
It does not resize the input field unless you actually input something in.
If someone can please tell me if it is possible and if yes - how to do what I need to do I would be rally grateful.
So if I understand it correctly you have a checkbox that contains a value. When you click that checkbox an input field is filled with the value of the checkbox and also another READONLY input field is filled with that same value?
You could just do the following then:
$(document).on("click", "#single-room", function() {
var checkboxValue = $(this).val();
$("#single-room-input").val(checkboxValue);
$("#your second input field id").val(checkboxValue)
//then do .css to style the length
});
I have a form which dynamically adds or removes input fields depending on certain selections which have been made by the user.
The basic form looks like this, simplified:
<form action="...some/path..." id="MyForm" method="post">
<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->
<select name="selectList">
<option>#1</option>
<option>#2</option>
<option>#3</option>
<option>...</option>
</select>
<div id="UpdateThisSection"></div>
<input type="submit" value="Submit">
</form>
Depending on which option the user picks from the select list, the user will be presented with different input fields, which are rendered in the #UpdateThisSection div.
The input fields for option #1 would be:
Date Field (required), so the required attribute is set to the input field, as well as the custom data-type="Date" attribute
Text (optional), no required attribute is set
The input fields for option #2 would be:
Text (optional), no required attribute set
Text (optional), no required attribute set
The input fields for option #3 would be:
Text (optional), no required attribute set
Numeric (optional), required attribute set, as well as the custom data-type="Numeric" attribute
The jquery validation is implemented like this:
$("#MyForm").validate();
$.validator.addMethod("usDate",
function (value, element) {
return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
},
"Please enter a valid date."
);
$("input[data-type='Date']").each(function () {
if ($(this).prop("required")) {
$(this).rules("add",
{
usDate: true
});
}
});
$("input[data-type='Numeric']").each(function () {
$(this).rules("add",
{
number: true
});
});
Validation works perfectly fine if I open the form and select any option. The form is being validated the way it should. However, if I change my mind and select a different option from the dropdown, the form is not validating correctly anymore. On submit, I see that the form is being validated with the previous form's requirements.
Looking at the $("#MyForm").validate() object on the console the invalid as well as the submitted property are still holding information of the previous form. What is the easiest way to reset the validator whenever a new ajax call load a new form element?
I tried to reset the form using $("#MyForm").validate().resetForm(); but it didn't clear the properties mentioned above.
Trying to clear the validation as suggested in this stackoverflow-post didn't resolve the issue for me either.
What is the easiest way to reset the validator whenever a new ajax call load a new form element?
In the Ajax success callback, remove all static rules from an element
$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...
Sorry... can't easilly recreate that for a demo.
I have an input field that has today's date appearing onload. I also have a checkbox that clears the input field onclick. However, I'm hoping to have the original date field return if a user unchecks that box. Is this possible?
Checkbox HTML:
<span class = "required">*</span>$[SP]$[SP]<input type="checkbox" id="e_not_enroll" name="e_not_enroll"/>$[SP]$[SP] I do NOT want to enroll.
Date input box code:
<input type="text" id="d_date_of_event" value = "${jvar_employment_start_date}" style="background-color:#ddd" readonly="readonly"/>
if (document.getElementById("e_not_enroll").checked){
document.getElementById('d_date_of_event').value='';
} else {
document.getElementById('d_date_of_event').value = ?? ;
}
If you know the date before the JavaScript you can set a variable outside of the function to the original date. When the checkbox is unlocked simply put the original variable set outside back into the input field. The other alternative is to have another input field which is hidden. Called temp date or original day and use that to populate the original input on untick.
I'm running into an issue where the value grabbed by jQuery, and what's actually in the input text field, are different.
A form with a variety of inputs are populated when the page loads with information from our database. Thus, the input text fields all have a value.
When the form is submitted, I have a function that runs first to check for text inputs. This is a portion of that function:
$("form#accountSettingsForm input").each(function(){
var input = $(this);
var value = input.attr("value");
}
Lets say the input value is 12 when the page had initially loaded. If I delete the 12 in the textbox and leave the field blank, and submit the form, the above code retrieved "value" is still 12, not empty.
How can I detect what's actually the textbox's value? Thanks in advance.
This is a situation where there's a difference between the value attribute and the value property. The attribute comes from the HTML, the property is from the dynamic state of the DOM. To get the current value of an input after the user has modified it, use the jQuery .val() method.
$("#accountSettingsForm").submit(function() {
$(this).find("input").each(function() {
var input = $(this);
var value = input.val();
console.log(this.name + " = " + value);
});
return false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="accountSettingsForm">
Input 1:
<input name="field1" type="text">
<br>Input 2:
<input name="field2" type="text">
<br>
<input name="submit" type="submit">
</form>
The following appears to work well. If you want to regularly remember/store the value, register for the on('input') event. With this, you get an event every time the user types in the textbox:
$("#accountSettingsForm :input").on('input', function() {
console.log($(this).val());
});
As far as I can tell, the $(this).val() method of access works fine.
Here's a JSFiddle: https://jsfiddle.net/uz8k7rjp/
And the original post where I got this method: JQuery: detect change in input field
I'm trying to dynamically set a an input value("choice" in my case) inside a form based on user inputs. After setting the desired value, I want to disable the field so that user cannot change it. Here is the code i'm using.
// HTML
<select name="0-choices" id="id_0-choices">
<option value="Phone">Phone</option>
<option value="Fax">Fax</option>
<option value="Voicemail">Voicemail</option>
</select>
//Javascript
$(cfield).children().first().removeAttr('selected');
$(cfield).children('option[value="Voicemail"]').attr('selected','selected');
//$(cfield).val('Voicemail');
$(cfield).attr('disabled','disabled');
The problem is, if I disable the field, the field is not available in the posted data. So my validation function complains of data not available. How can I "freeze" the input field and yet be able to post it.
I got to this problem too, and guess you try to disable the fields while sending Ajax request, the best solution i found was using readonly instead:
$(cfield).attr('readonly', true);
Users can't modify the field's value but they are still read
You can disable the field, and then copy its value into a hidden form field.
HTML
<input type="hidden" name="cfield_hidden"/>
JavaScript
// snip...
$(cfield).attr('disabled','disabled');
$('#cfield_hidden').val($(cfield.val());
Or, you could enable the options immediately before submitting the form:
$('some-form-selector').submit(function ()
{
$(this).find('option').attr('disabled', false);
});
make a hidden input field like
$('.your-form').append("<input type='hidden' name='0-choices' value='"+$('cfield option:selected).val()+"' />")
as disabled inputs won't be submitted ..
You can use a hidden field to store the value you whant to send once you disable the input field.
Something like this:
$(cfield).append('<input type="hidden" id="hiddenField" value="'+$(cfield).val()+'"/>');
$(cfield).attr('disabled','disabled');
as you say disabled inputs are not included in the post data, your best option is to either fix your server side logic or to store a input hidden field with name 0-choices and the value you want posted.
i would clone the field on submit and set remove the disabled attr. And append it to your form as display none.
Or simply remove the disabled onsubmit.
PS: your username would be cooler with a M instead of the N ;)