I want to disabled the button to send the form until the checkbox is set and i want to solve it with a nice short jQuery Code. But there has to be a bug, nothing happens. Does anyone have an idea?
JS:
$(document).ready(function(){
$('#terms').keyup(function(){
if($('#terms').is(':checked')){
$('#btn').removeAttr('disabled');
}else{
$('#btn').attr('disabled');
}})}
HTML:
<input id="terms" type="checkbox" value="" name="terms">
<input id="btn" name="register" type="button" value="Register" disabled/>
Actually it's really simple:
$('#terms').on("change", function() {
$("#btn").prop("disabled", !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="terms" type="checkbox" value="" name="terms">
<input id="btn" name="register" type="button" value="Register" disabled/>
where the !this.checked is the boolean value of the current checkbox state.
Naturally there's a jQuery way: $(this).is(":not(:checked)") but there's no need to, since you should get used to understand the this environment and the DOM Properties you have available using simple vanilla JS read more.
Use prop() instead of attr:
e.g.
$('#btn').prop('disabled', true);
Properties generally affect the dynamic state of a DOM element without
changing the serialized HTML attribute. Examples include the value
property of input elements, the disabled property of inputs and
buttons, or the checked property of a checkbox. The .prop() method
should be used to set disabled and checked instead of the .attr()
method. The .val() method should be used for getting and setting
value.
Note: You are using keyup instead of the change event for a checkbox.
Note your example can be simplified to just pass a boolean expression for on/off:
$(function(){
$('#terms').change(function(){
$('#btn').prop('disabled', !$(this).is(':checked'));
});
});
Related
I've got a form which has all inputs disabled. There's also a button within that form which, if clicked, is supposed to enable the inputs.
I know how to disable and enable the inputs using something like this:
$('#form :input'):prop('disabled',false).
This is all fine but I'd like to have an implementation that is abstract enough to work in all forms that have such a toggle button. Therefore I tried this:
$('.toggle-btn').click(function(){
$(this).parents('form :input').prop('disabled','false');
}
But it's not working.
I'm looking for a way to access input fields of a form when it's selected as a parent. Does anyone know how to go about it?
You need to use the parent function with find if your input is directly in your form , Try this for example:
$('.toggle-btn').click(function(){
$(this).parent().find(':input').prop('disabled', false);
}
If the input is in other elements that are inside your form, you need to use the jQuery parents function like this:
$('.toggle-btn').click(function(){
$(this).parents('form').find(':input').prop('disabled', false);
}
it is false not "false" - "false" is truthy
you need find() and .closest() which in my opinion is better than parent(s) since it does not care if the button is wrapped in anything
you need .prop and not :prop
$(function() {
$('.toggle-btn').on("click", function() {
$(this).closest("form").find(":input").prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="text" disabled />
<input type="button" class="toggle-btn" />
</form>
The elements & the code.
HTML
<input value="" name="data[Filter][address]" type="text" />
<input value="" name="data[Filter][client]" type="text" />
<input value="" name="data[Filter][tenant]" type="text" />
<input value="" name="data[Filter][contract_end_date]" type="text" />
Javascript
console.log($("[name*='data\\[Filter\\]'][value!='']").serialize());
The problem: even if they are all empty, they are serialized.
Why?
You're looking at the value attribute. You can filter off of the value property instead:
http://jsfiddle.net/Y2P6w/
var $filledElems = $("[name*='data\\[Filter\\]']").filter(function () {
return $.trim(this.value).length;
});
The point is when the input tag gets inserted to the page, no matter it is in the page load or in your dynamic JavaScript codes, if it has the value attribute your selector query would use it or if you change your input's value using setAttribute in JavaScript or .attr() in jQuery, their value attribute actually gets changed, but if you change it with .value in JavaScript or .val() in jQuery or simply change the value in the page as a textbox, the attribute won't change, so you better not use value attributes in your selectors, because they are not reliable, an instead use $("[name*='data\\[Filter\\]']") and filter it as #JasonP has pointed out.
Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.
I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.
So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).
Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.
Here is the relevant source code:
<script>
function swap(){
if(document.getElementById('must').checked){
document.getElementById("element1").setAttribute("required", "true");
}else{
document.getElementById("element1").setAttribute("required", "false");
}
}
</script>
<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>
Any assistance would be greatly appreciated.
Best way I know to check if checkbox is checked, it to use jQuery is() method (documentation). It handles x-browser differences for you. Also best way to add attribute to HTML element is to use attr() method.
if($("#must").is(":checked")) {
$("#element1").attr('required', 'required');
} else {
$("#element1").removeAttr();
}
You can check in DOM inspector that attribute is added.
Required attribute documentation is here.
Try this, in xhtml we specify required="required" and there no required="false", a better way is to remove attribute required on else
<script type="text/javascript">
function swap(){
if(document.getElementById('must').checked){
document.getElementById("element1").setAttribute("required", "required");
}else{
document.getElementById("element1").removeAttribute("required");
}
}
</script>
The required attribute is a boolean attribute, it presence means that the field is required and its absence means the field isn't required. It has only 3 valid forms 1. required alone by itself 2. required="" equal to an empty string 3. required="required"
I am trying to disable some input fields using jQuery 1.4.2. This is a part of the HTML code:
<input type="text" disabled="disabled" name="nume" value="Text" />
This is the Javascript:
$('.salveaza').live('click', function(e){
$.get(ajaxURL, $('form', itemCurent).serialize()+'&id='+itemCurent.data('id')+'&optiune=editeaza-categorie');
// This is the code for disabeling inputs
$('input', itemCurent).attr('disabled', 'disabled');
itemCurent.removeClass('curent');
$('.optiuniEditeaza', itemCurent).remove();
e.preventDefault();
});
The above code doesn't work. Note that the inputs are added with jQuery, that's why I am using live, I tried all sorts of stuff.
I also tried firebug console to disable all input fields on the page and it's not working:
$('input').attr('disabled', 'disabled');
Any help will be apreciated,
Thanks
This should do the trick:
Disable: $('#the-field-id').attr('disabled', true);
Enable: $('#the-field-id').removeAttr('disabled');
Use true instead of disabled:
$("input").attr("disabled", true);
Working example:
http://jsfiddle.net/bEC8L/ (input is set to disable after 5 seconds)
jQuery sets properties instead of attributes if the given attribute is actually a property name, and "disabled" isn't a valid value for the disabled property.
Your piece of code seems ok, so the problem must be coming from another part of code. Put a break on the line where you disable and then run step by step.
Try this code. Onclick of button the textbox will be disabled.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fname").attr("disabled",false);
$("#idDisable").click(function(){
$("#fname").attr("disabled",true);
});
});
</script>
<input type="button" id="idDisable" value="click to disable" name="Click"/>
<input type="text" id="fname" />