I have a scenario where, on select of an option in select drop down, the form should submit.
For that I have written a Jquery function
function xxx(val) {
$("#form").submit();}
And the tag is as follows
<input type="text" name="xxx_txt" id="id_xxx" title="xxx" placeholder="xxx" value="$!{query}" ">
And I am populating my text field dynamically with values
$("#id_xxx").autocomplete({
source: sourcedata,
minLength: 1
})
But on select, nothing happens because, the field is not a select dropdown, but a normal text field , to which values are assigned, thus making it a select dropdown.
Basically I am writing a search function similar to google, where the search triggers , on a selection.
Kindly suggest.
try onChange event on your input element
$("input#id_xxx").change(function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
This will trigger when input element lost focus
for every change on input element:
$("input#id_xxx").on("input", function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
Related
I have a form, and want to change the background color of the submit button whenever all form inputs are filled out. I've started testing this with just 1 input field, but the button color doesn't change in real time as I add content to the input. How can I adjust my code so that as soon as I type anything in the input box, it recognizes it and changes the button color in real time?
jQuery(function($){
var teamname = $('#acff-post-acfef_2207cc4_title').val();
if(teamname !== ''){
$('.acff-submit-button').css('background-color', 'red');
}
});
You have to listen to change event on the input field in order to check the value every time it changes. What you are doing right now is checking the value of the field when the page loads.
jQuery(function($){
$('#acff-post-acfef_2207cc4_title').change(() => {
if ($(this).val() !== '') { // check input value
$('.acff-submit-button').css('background-color', 'red');
}
})
});
I have a field called Block material which needs to be a mandatory field, so i wrote a condition to notify user to select the value from dropdown. I would like to highlight this field when it gives an alert. How do i do this? The below code doesnt work for dropdown but works for a text field.
var blockMaterial = document.getElementById("BLOCK_MATERIAL");
if (blockMaterial.value == "") {
$("#STATUSDIVID").removeAttr('class').addClass('div-error').html("Please select an option from the Block Material dropdown");
$("#testingDynoForm #BLOCK_MATERIAL").css("background-color","#F6CED8");
$(window).scrollTop(0);
}
Try
if(blockMaterial.options[blockMaterial.selectedIndex].value == "") {
// your code
}
I have some buttons that are dynamically created. When they are pressed, the .disabled class is added to them and the text() is entered into an input field. I want to remove the disabled class when the input field is empty. I am checking this on the keyup. I have not been successful in doing this and would like some help.
Here is my jQuery:
Binded event:
$languageInput.on('keyup', _resetLanguageTags)
Function:
function _resetLanguageTags(){
if($(this).val() == ''){
console.log('empty');
$('button').each(function(){
$(this).removeClass('disabled');
});
}
}
As you can see, I have a console.log('empty'); to make sure that the input is empty and it is working when the input is, in fact, empty.
I this this example will help using the disabled property :
<button disabled>a</button>
And remove disabled with:
$(this).prop('disabled', false);
enter link description here
I use meiomask for time masking.masking is working perfectlly on keypress event.
Now the problem is when i am in first textbox and then i press tab so now the focus is on second textbox and it's value is selected(as you see in image).now if i try to enter some value in this textbox then the focus is out of this textbox.so to enter value in this textbox every time i remove value using backspace then enter value in the textbox.
so basically i am trying to do is on focus of textbox, if textbox value is selected and user try to enter some thing(on keypress event) then make it null.so how to achieve this thing?
Thanks in advance.
code:
$(document).on('focus','.masktime',function(){
// $(this).val("");
});
You can either use placeholders...so,
<input class="masktime" type="text" placeholder="00:00">
instead of
<input class="masktime" type="text" value="00:00">
Or, if you wish to use the value of the input tag at all times, you can emulate the behaviour of an input[placeholder] using a combination of focus and blur.
$('.masktime').on('focus', function () {
$(this).attr('oldVal', $(this).val());
$(this).val('');
});
$('.masktime').on('blur', function () {
if($(this).val()=='') {
$(this).val($(this).attr('oldVal'));
}
});
DEMO
totally a newbie...
I just want to know how to dynamically disable an input field when the second input field is filled
eg:
<td><input type="text" name="num-input1" id="dis_rm" value=""></input></td>
<td><input type="text" name="num-input2" id="dis_per" value="" ></input></td>
pls... any links and hints will do...
You simply need to give it a disabled property:
document.getElementById("dis_rm").disabled = true;
document.getElementById("dis_per").disabled = true;
you can use the on change event to see if one of them is filled:
var dis1 = document.getElementById("dis_rm");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("dis_per").disabled = true;
}
}
so if the first one is filled, the second one will be disabled
$('#dis_per').blur(function(){
if($(this).val().length != 0){
$('#dis_rm').attr('disabled', 'disabled');
}
});
http://jsfiddle.net/jasongennaro/D7p6U/
Explanation:
when the second input loses focus... .blur()
check to see if it has something inside it. Do this by making sure its length is not zero !=0
if it has something in it, add the attribute disabled and set it to disabled
$('#secondinput').live('blur',function(){
$('#firstinput').attr('disabled', true);
});
tihs works when you filled the second input field and click else where ..........
Just ad this to your 2nd text box:
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);"
http://jsfiddle.net/vbKjx/
Set the disabled flag on the field you want to disable when the OnBlur event fires (for exiting the field) or when the OnChanged event fires (with, of course, validation on the change).
We can ommit some steps, refering to the form as object.
document.form1.num-input2.onchange = function() {
if ( this.value != "" || this.value.length > 0 ) {
document.form1.num-input1.disabled = true;
}
}
I like this answer, using Jquery:
$('#seconddiv').live('focus',function(){
$('#firstdiv').attr('disabled', true);
});
I have a search bar that gives search results with every key press, if it returns no results then the user is presented with a form to ask for help. But if they fill out the "ask form" then type in the search bar again it will erase everything they entered in the ask form. So to solve this, I gave all the inputs in the ask form an id of "second div" and the search field id="firstdiv". Now, if they click or tab to one of the input fields of the ask form it will disable to search bar so their data will never be over written.
I will also add a button that will re-enable the search form if they change their mind.
And for the newbies - I put the code in the head of the document like this:
<html>
<head>
<script type="text/javascript">
$('#seconddiv').live('focus',function(){
$('#firstdiv').attr('disabled', true);
});
</script>
</head>
<body>
....