this is my js fiddle link :
http://jsfiddle.net/m4tyC/
i have multiple select tags and i want to validate on submit if for example
at least if one of the size1 and color1 and Qty1 is selected in the first group and if one is selected i want to validate the others and in the same time if at least one group is selected the form can submit and if the user selected one option from the second group i do the same validation type for the second group of size2 , color2 , ...
i appreciate any help with that , i use jquery in my project
Try this (form will submit only when at least one row is completely selected)
$(function(){
$('#frm_productOrder').on('submit', function(e){
e.preventDefault();
var f=$(this);
var invalid=false, selected=0;
$('.selects').each(function(){
var row=$(this);
var items=0;
$('select', row).each(function(){
var t=$(this);
var selectedIndex=t.prop("selectedIndex");
if(selectedIndex) items++;
});
if(items==3) selected++;
if(items>0 && items<3) invalid=true;
items=0;
});
if(selected>0 && !invalid) f[0].submit();
else alert('Please fill up the form correctly');
});
});
DEMO.
Here is some JQuery code. You can figure out how to submit the form on success by yourself:
$(document).ready(function(){
$("form").submit(function(event)
{
var is_valid = true;// for avoiding alerting in loop
event.preventDefault();
$(this).find("select").each(function(){ //usually default is the first
if(!$(this).attr("selected"))
{
$("#"+$(this).attr("id")).each(function()
{
if($(this).find("option:first").attr("selected"))
{
is_valid = false;
}
});
}
});
if( !is_valid )
alert("Please make sure all values are set for row!");
});
});
See this jsFiddle. There are some bugs too, but you can work that out.
Related
I am facing a problem and I want your help please.I have created two individual forms.The 1st has two input text and the 2nd has some checkboxes.I want on load page the 2nd to be disabled and when a checkbox is checked then the form will be enabled and the 1st will be disabled.If there isn't checkbox checked then the 1st is enabled and the 2nd disable.I hope you understand.My English isn't perfect..
Here is the jQuery I use:
//eksargirwsh is the 2nd form (with checkboxes)
//prosthiki is the 1nd form (with two input text)
$(document).ready(function() {
$('#eksargirwsh :not([type=checkbox])').prop('disabled', true);
});
$(":checkbox").change(function(){
if (this.checked) {
$('#eksargirwsh :not([type=checkbox])').prop('disabled', false);
$('#prosthiki').prop('disabled', true);
}
else{
$('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
$('#prosthiki').prop('disabled', false);
}
}) ;
ERRORS
On load page the 2nd isn't disabled as expected
If I checked two or more checkbxes in row and unchecked them in the opposite way the 2nd form becomes disabled fact I don't want
This is the solution I found:
$(document).ready(function() {
$('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
});
$(":checkbox").change(function(){
//if (this.checked){
if ($('form input[type=checkbox]:checked').size()>=1){
$('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
$('#prosthiki').prop('disabled', true);
}
else{
$('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
$('#prosthiki').removeAttr('disabled');
}
});
And I put this on input :
disabled="disabled"
.prop('disabled',false) is not the right way to remove the disabled attribute. Please use .removeAttr('disabled') instead.
First of all, remember to init event handlers inside $(document).ready function
Secondly, to improve performance, remember to cache selectors.
Then, to make it cleaner to understand, move disable/enable logic to separate function:
$(document).ready(function() {
var $eksargirwsh = $('#eksargirwsh');
var $prosthiki = $('#prosthiki');
var $eksargirwshElements = $eksargirwsh.find('input:not([type=checkbox]), select, textarea, button');
var $prosthikiElements = $prosthiki.find('input, select, textarea, button');
$eksargirwsh.on('change', 'input[type=checkbox]', onCheckboxChange);
disableElements($eksargirwshElements, true);
function onCheckboxChange(){
if( $eksargirwsh.find('input:checked').size() == 0 ){ // no checked inputs
disableElements($eksargirwshElements, true); // disable #2
disableElements($prosthikiElements, false); // enable #1
} else {
disableElements($eksargirwshElements, false); // enable #2
disableElements($prosthikiElements, true); // disable #1
}
}
function disableElements($elements, state){
$elements.attr('disabled', state);
}
});
if you don't care so much for readability onCheckboxChange can be shortened to
function onCheckboxChange(){
var zeroChecked = $eksargirwsh.find('input:checked').size() == 0;
disableElements($eksargirwshElements, zeroChecked);
disableElements($prosthikiElements, !zeroChecked);
}
I have varied textareas in a form that I wish to be completed before the submit button is activated. I have researched into this and already found how to specify particular textareas/inputs however dependent on the user group will be dependent on how many text areas are shown so I need a blanket javascript to just check that any textareas shown on the page are filled before the submit button is activated.
I have looked at this: http://jsfiddle.net/qKG5F/641/ however have not managed to successfully implement it myself.
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
Could this be because of how I have created my textareas? As shown below
<textarea name="i_2" id="i_2" class="input-block-level"></textarea>
Instead of using <input> as the JSFiddle example does above.
Is there any way to disable the submit button if not all textareas have been filled (without specifying each textarea)? I have edited my submit button accordingly with the JSFiddle example.
In HTML5 you can actually use a very simple "required" command to make any form elements a required field before the submit button is activated. It removes the need for any unnecessary JavaScript.
<textarea name="i_2" id="i_2" class="input-block-level" required></textarea>
give it a try :) stuff like this is why I love HTML5
Why do you think that textarea is an input? Here is the code for the situation when you have inputs and textareas in one form, and you want the button to be disabled if one of the inputs or textareas is empty. Input and textarea are different html elements! You can't select textarea with "input".
(function() {
$('form > input, form > textarea').keyup(function() {
var empty = false;
$('form > input, form > textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
For only textareas use:
$('form > textarea')
Better approach is to use class name, for example "must_be_filled" and assign this class to any html element.
The you can select elements by:
$('form > .must_be_filled')
Try this:
http://jsfiddle.net/g0m79p81/
I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.
I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});
Can someone help me with my example on How to make input+label in a form appear one by one?
I have a <form> with some inputs and labels and i want to make them appear one by one. When the ENTER KEY will be pressed there the label #1 and the input #1 must dissapear and second label + input must appear.
My script + css and jss is up on the jsfiddle
http://jsfiddle.net/zApq4/
My js is:
$(document).ready(function() {
// First Show the First Element & Focus it
$("form.fieldContainer:first-child").fadeIn(500).focus();
// Setup a transition handler:
$("form.fieldContainer").keyup(function(ev) {
if $('#nextButton').click(show_next);
{
ev.preventDefault();
ev.stopPropagation();
var _next = $(this).parents('form.fieldContainer').next('form.fieldContainer');
_next.fadeIn(500);
_next.find("input").focus();
}
});
});
I guess i'm doing something wrong in my js but i can't realise what. Thanks to everyone
try following (is that what you want):
var $containers = $(".fieldContainer");
// First Show the First Element & Focus it
$containers.eq(0).fadeIn(500).find("input").focus();
// Setup a transition handler:
$containers.find("input").keyup(function(ev) {
ev.preventDefault();
ev.stopPropagation();
if($(this).val() == ""){
return;
}
//if enter is pressed
if(ev.which == 13){
var _next = $(this).parents().next();
_next.fadeIn(500);
_next.find("input").focus();
}
});
working fiddle here: http://jsfiddle.net/zApq4/3/
Or,
working fiddle here: http://jsfiddle.net/zApq4/4/
i hope it helps.
<script>
$(document).ready(function() {
$('form["meldaan"] input').keyup(function() {
var empty = false;
$('form["meldaan"] input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
});
</script>
This script works fine with one form, but I have two or three different forms on one page. I want each form to be treated different, if I use this code all fields in ALL forms need to be filled in, which I obviously don't want.
How can I identify the unique forms? Say one form is named name="formone" and the other name="formtwo". How would I implement that? (It's okay if I have to make more functions).
You just need to adjust your selector:
$('form[name="formone"] > input')
Update: #Andre, in your live example inputs are not direct children of the form element, so you need to use:
$('form[name="formone"] input')
Update 2: if you are using an id:
$('#formid input')