I've 3 different options (artigo, revista, livro)
Each one has a unique form, some with required fields others not
I have to choose only one option, fill the respective form and submit.
The problem is that it doesnt let me submit because there are others required fields in the other divs.
What I want is if I select tipo_artigo1 it sets tipo_livro as not required so I can finally submit the final form.
I already have this code
<script>
$(".js-select2").each(function(){
$(this).select2({
minimumResultsForSearch: 20,
dropdownParent: $(this).next('.dropDownSelect2')
});
$(".js-select2").each(function(){
$(this).on('select2:close', function (e){
if($(this).val() == "tipo_artigo1") {
$('.tipo_artigo').slideDown();
$('.tipo_livro').slideUp();
$('.tipo_revista').slideUp();
}
else if($(this).val() == "tipo_revista2"){
$('.tipo_artigo').slideUp();
$('.tipo_livro').slideUp();
$('.tipo_revista').slideDown();
}
else if($(this).val() == "tipo_livro3"){
$('.tipo_artigo').slideUp();
$('.tipo_revista').slideUp();
$('.tipo_livro').slideDown();
}
});
});
})
</script>
Hopefully, I explained explicitly. Sorry for any grammatical mistakes
You can set the required attribute of an element thanks to $.fn.prop:
if ($(this).val() == "tipo_artigo1") {
// other code
// Unrequires all <.tipo_livro> elements.
$('.tipo_livro').prop('required', false);
}
But since .tipo_livro is a <div>:
if ($(this).val() == "tipo_artigo1") {
// other code
// Unrequires all <div.tipo_livro> sub-elements which are required.
$('.tipo_livro').find('[required]').prop('required', false);
}
If you have the id's of the fields you want to mark as not required, you can use :
$('#input_field').removeAttr('required');
Related
I have a page with a list of check boxes, when a check box is checked I am updating the number of check boxes selected in side a p tag. This is all working.
The problem I have is when the user selects more than 5 checkboxes I want to use Jquery to unselect it.
This is what I have so far, the first if else works but the first part of the if doe
$("input").click(function () {
if ($("input:checked").size() > 5) {
this.attr('checked', false) // Unchecks it
}
else {
$("#numberOfSelectedOptions").html("Selected: " + $("input:checked").size());
}
});
Any ideas?
Firstly you should use the change event when dealing with checkboxes so that it caters for users who navigate via the keyboard only. Secondly, if the number of selected checkboxes is already 5 or greater you can stop the selection of the current checkbox by using preventDefault(). Try this:
$("input").change(function (e) {
var $inputs = $('input:checked');
if ($inputs.length > 5 && this.checked) {
this.checked = false;
e.preventDefault();
} else {
$("#numberOfSelectedOptions").html("Selected: " + $inputs.length);
}
});
Example fiddle
Note I restricted the fiddle to 2 selections so that it's easier to test.
You need this $(this).prop('checked', false);
You should be saying
$(this).attr('checked', false)
instead of
this.attr('checked', false)
You need this $(this).prop('checked', false);
Also this is a javascript object, if you want to use jquery you should prefer $(this).
I want my form to meet a set of criterias before the submit button gets enabled, my form is in this order:
Text field, value has to be over 150
Set of radio selects, 1 has to be selected
TOS box, has to be checked
So far I have this:
if ((parseInt($('#amount').val(), 10) > 149) && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
{
// Enable Button here
}
Do I have to add this to everything I'm checking, for example keyup on the textfield, change on the select and checkbox and set true in variables that those fields are "OK" or how do I do it ?
You need to create a custom validate function, which you have to run onchange of your text field, and on click of your radio and checkbox click event.
Following psudo code might help you.
var textFieldValidationPassed = false;
function validateFormFields() {
//First checks if text field length is not less then 150.
// then check if one of the radio button is selected.
// then check for TOS box checked state;
if (textFieldValidationPassed && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
// enable submit button;
}
}
$('input:radio[name="radioset1"]', 'input.checkbox_check').click(function() {
validateFormFields();
})
$('#amount').keyup(function(){
if($(this).val().length > 149) {
textFieldValidationPassed =true;
validateFormFields();
}
})
it is a workaround but will work, make submit button initially...
$(":submit").on('focus',Validate);
function Validate(){
if ((parseInt($('#amount').val(), 10) > 149) && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
{
// Enable Button here
}
else
{
//Disable button
}
}
You can just add click, change events at once like this
$("input").on("change, click", function(){
});
Write your logic within this.
Also you've checkbox validation wrong. Check box will be clicked.
$('input.checkbox_check').prop('checked')
Here is the complete code
$(function(){
$("input").on("change, click", function(){
if ((parseInt($('#UserName').val(), 10) > 149) && $('input:radio[name="gender"]').is(':checked') && $("#remember").prop('checked'))
{
$("#submit").removeAttr("disabled");
}
else{
$("#submit").attr("disabled", "disabled");
}
});
});
WORKING FIDDLE
You can use jQuery.validate. You can define custom validation methods too.
http://jqueryvalidation.org
You can use HTML5 validation. For example:
<input type="checkbox" required name="checkbox1" />
<input type="text" min="150" name="input1" />
You can see another example here http://www.w3schools.com/html/html5_form_attributes.asp
You can call it at textbox, radiobutton and checkbox onchange events.
EDIT:
$(document).ready(function () {
$("input").change(function () {
//call function.
});
});
I have a box with one select with two options.
Depending on the options i need to display a different set of checkboxes.
Depending on what the user choose on the select i will display a set of checkboxes or another.
Here i have made here an example:
http://jsbin.com/acOXisI/20/edit
How can i grab the option selected in the selector?
And subsequently how can i display or not the checkboxes fieldset?
Thank you very much!
The javascript you need is:
// hide the fieldsets on page load
$(".otion1, .otion2").hide();
$("select").change(function() {
var $this = $(this);
if($this.val() === "1") {
$(".otion1").show();
$(".otion2").hide();
} else if($this.val() === "2") {
$(".otion1").hide();
$(".otion2").show();
} else {
$(".otion1, .otion2").hide();
}
});
// prevent hidden checkboxes from being submitted
$("form").submit(function() {
$(this).find("input[type='checkbox']").filter(":hidden").each(function() {
this.checked = false;
});
});
and add some values to your select options:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
See edited demo: http://jsbin.com/acOXisI/23/edit
Try:
jQuery("#selector option:selected").val();
Or to get the text of the option, use text():
jQuery("#selector option:selected").text();
More Info:
http://api.jquery.com/val/
http://api.jquery.com/text/
First off, you shouldn't have duplicate ids on the page.
Also, I'd suggest you put unique input names for all the checkboxes and always submit all of them from a single form (and you'd ignore those you don't need). The functionality you want can be achieved in many ways, one of them being hiding both fieldsets and setting a listener to the select element - you can use the onchange event, and check which one is selected and according to that show the appropriate fieldset.
When you check the submitted data, first check the select value, and then only the appropriate checkboxes.
You have to use jQuery:
$().ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").text();
console.log(value)
if (value == 'Option 1'){
$('.otion1').show()
$('.otion2').hide()
}
else{
$('.otion1').hide()
$('.otion2').show()
}
})
})
There is your bin cloned and working:
http://jsbin.com/UcaWUCA/1/edit
You can do this with jQuery. Note that hidden fields will still get submitted so they need disabling too:
$(function(){
$("#selector").on("change", function(){
$(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
$("."+$(this).val()).show().find("input").removeAttr("disabled");
});
$("#selector").trigger("change");//run on load
});
http://jsbin.com/aVihIJOr/1/edit
Hi you can use $("#selector").val() to get the selected option.
$("#selector").change(function(){
option = $(this).val();
if(option == 1){
$(".option1").show();
$(".option2").hide();
} else if(option == 2) {
$(".option2").show();
$(".option1").hide();
} else {
$(".option2").hide();
$(".option1").hide();
}
});
Working example:
http://jsbin.com/acOXisI/10/edit?html,js,output
I have added unique Div Ids to your options sets and then have linked them with the exact selected value.
Example:
http://jsbin.com/acOXisI/18/edit
$(document).ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").val();
if (value == 'option1'){
$('#option1').show();
$('#option2').hide();
}
else if(value == 'option2'){
$('#option1').hide();
$('#option2').show();
}else{
$('#option1').show();
$('#option2').show();
}
});
});
I would like to be able to have an input field (initially hidden and disabled) to be shown and enabled every time the "Other" radio button is selected, and ofcoure to be hidden and disabled when a different radio button is selected . I have gotten this script to show and hide the textfield appropriately, but Id like to know how I can get enabling and disabling to happen with it
$('input[name="x_description"]').bind('change',function(){
var showOrHide = ($(this).val() == "Other") ? true : false;
$('#other_program_text').toggle(showOrHide);
});
I know that this is how to show the field and enable the textfield, but cant figure out how to put it all together,
$(this).show().prop('disabled', false);
Thanks in advance,
Dan
$('input[name="x_description"]').bind('change',function(){
if ( showOrHide == true ) {
$('#other_program_text').show().prop('disabled',false);
} else if ( showOrHide == false ) {
$('#other_program_text').hide().prop('disabled',true);
}
});
You want to use the $(this).attr() function to set properties on an HTML element. With one parameter it'll read the passed param, with two it'll set it.
Like $(this).attr("enabled", true)
You can use "click" method
$('input[name="x_description"]').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
If your content are dynamically generated then use "live" method
$('input[name="x_description"]').live('click',function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
I am trying to implement some Jquery that basically says "If this text field is filled in then disable the submit button so that the form cannot be delivered/submitted"
So far I have come up with this, but it is not working
$(document).ready(function(){
$this = $("#inputValue");
if($this.val().length>0){
$('input[type=submit]').attr('disabled', 'disabled');
}
});
When i fill in the form and include text within the field I am not supposed to the form still gets submitted, what am i doing wrong?
Thanks
Your code only runs once on runtime. After that, it doesn't get checked again.
$(document).ready(function (){
$("#inputValue").on('change', function (){
if($(this).val().length > 0){
$('input[type=submit]').attr('disabled', 'disabled');
} else {
$('input[type=submit]').removeAttr('disabled');
}
});
});
Or, as #thomasfedb suggested:
$(document).ready(function (){
$('#inputValue').on('change', function() {
$("input[type=submit]").prop('disabled', $(this).val().length > 0);
});
});
I'd suggest you to bind a keyup event to do the check every time when user enters something to #inputValue field:
$(document).ready(function() {
$("#inputValue").on("keyup", function() {
$("input[type=submit]").prop("disabled", !!$.trim(this.value).length);
}).trigger("keyup");
});
Since you're using a hidden field it might be better to bind the change event:
$('#inputValue').on('change', function() {
$('input[type="submit"]').prop('disabled', this.value.length > 0);
}).change();
Try using this code.
$('input[type=submit]').attr("disabled", true);