Disabling a link until a series of checkboxes are checked - javascript

I'm trying to figure out how to disable the following link until a series of 4 or 5 checkboxes have been selected.
<input type="image" src="/wp-content/themes/happy/images/add-to-cart.png" name="Buy" class="wpsc_buy_button" id="product_<?php echo wpsc_the_product_id(); ?>_submit_button" onclick="window.location='http://example.com/store/checkout/';"/>
Thanks!
I'm also kind of retarded when it comes to js and jquery, so the simpler the better, please. I would like to have all the code right there near the element, and not off in a different location, even though that might be the "preferred" method.
Thanks a lot.

You can do something like this
<input type="image" src="/wp-content/themes/happy/images/add-to-cart.png" name="Buy" class="wpsc_buy_button" id="product_<?php echo wpsc_the_product_id(); ?>_submit_button" onclick="if($(this).data("enabled")){window.location='http://example.com/store/checkout/';}"/>
And on check box click do this
$("input").click(function(){
//Here check for this checkbox and all other series of checkbox, if they are checked then
$("img[name=Buy]").data("enabled", true);
//else
$("img[name=Buy]").data("enabled", false);
});

Assuming you have jquery referenced, change your onclick method to something like;
onclick="if($('.checkboxClass').not(':checked').length > 0) window.location='http://example.com/store/checkout/'; else {alert('please tick all the checkboxes'); return 0};
Then add the "checkboxClass" (or whatever class you choose) to all of your checkboxes
<input type="checkbox" class="checkboxClass" value="1" />
<input type="checkbox" class="checkboxClass" value="2" />
And so on.

If you have the following form:
<form method="post" action="" class="my-form">
<p>
<input type="checkbox" /> First item
</p>
<p>
<input type="checkbox" /> Second item
</p>
<p>
<input type="image" src="..." />
</p>
</form>
Use jQuery to check on form submit
$(function() {
$(".my-form").submit(function() {
if ($(".my-form input[type=checkbox]:checked").length < 1)
{
alert("You must select at least one checkbox to proceed.");
return false;
}
}
}

Related

Clear textbox and radio buttons onclick with Javascript

<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />
So basically, this is my html. What I want to do now, is to use JavaScript, not jQuery, to clear the text input field (if something had previously been entered) whenever the radio buttons are clicked and to uncheck the radio buttons whenever someone clicks onto the text field. I quickly found a jQuery solution, but got the task to use JavaScript instead. As I'm not having very much experience with JS, I can't wrap my head around it to get it to work.
Any thoughts?
Would appreciate very much.
You can use .querySelectorAll() and .querySelector() in order to find the elemnts and .addEventListener() to attach the event handlers:
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.addEventListener('change', function(e) {
document.querySelector('#locationName').value = '';
});
});
document.querySelector('#locationName').addEventListener('input', function(e) {
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.checked=false;
});
})
<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />

Using isset from a name of an input

I am not sure if I am going about this correctly. I have a set of checkbox inputs. If someone selects the last check box all_users_check, I want a new form to appear where I will be listing all of the users in a drop down (haven't added the drop down yet). I thought I could do this by using the name of the input, but I am mistaken apparently as I am getting this error..
How else could I structure what I am doing so that if someone checks that option the new form displays?
<div class="user_dropdown">
<form action="">
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value="" checked> Team Members<br>
<input type="checkbox" name="commissioner_check" value="" checked> Commissioner(s)<br>
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value="" checked> Individual User<br>
</label>
</form>
</div>
<script>
$(".user_dropdown").hide();
$(".all_users_check").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
This is how the page looks on load. Those fields are already checked for some reason.
Issues in your code.
.all_users_check that is looking for a class. Your element doesn't have a class so this isn't found. You can use a different selector to use the name attribute, https://api.jquery.com/attribute-equals-selector/.
This $(".user_dropdown").hide(); hides your whole form. You might want to move around your divs, or remove that altogether.
The checked attribute checks the field it is on. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Use the checked attribute to indicate whether this item is selected
<div class="user_dropdown">
<form>
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value=""> Team Members<br>
<input type="checkbox" name="commissioner_check" value=""> Commissioner(s)<br>
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value=""> Individual User<br>
</label>
</form>
</div>
<script>
//$(".user_dropdown").hide();
$("input[name='all_users_check']").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
isset is a language construct and can't accept anything other than a variable as indicated by this warning on the linked to manual page:
Warning isset() only works with variables as passing anything else will result in a parse error.
You are not passing in a variable to the isset function, you are passing in a constant value, basically an array with a single string all_users_check. This is not a variable because you are not assigning it to a variable name. Try this instead:
if(isset($_POST['all_users_check']))
Here the variable being passed in is the superglobal $_POST, and you are checking to see if the index all_users_check is set inside of that array.
Update
To check if an input is empty or not via javascript, take a look at this question.
Try using this script, you have set the state of check boxes as checked by default.
<div class="user_dropdown">
<form action="">
<input type="checkbox" name="spectator_check" value=""> Spectators<br>
<input type="checkbox" name="member_check" value=""> Team Members<br><!-- removed 'checked' from this line -->
<input type="checkbox" name="commissioner_check" value=""> Commissioner(s)<br><!-- removed 'checked' from this line -->
<label for="all_users_check">
<input type="checkbox" name="all_users_check" value="" > Individual User<br> <!-- removed 'checked' from this line -->
</label>
</form>
</div>
<script>
$(".user_dropdown").hide();
$(".all_users_check").click(function() {
if($(this).is(":checked")) {
$(".user_dropdown").show();
} else {
$(".user_dropdown").hide();
}
});
</script>
For the other issue of showing the hidden section again, try whether class all_users_check is visible to click.

jQuery Radio Button function not working properly

I have a form with two radio buttons and a submit button which leads to a specific form based upon the user's selection.
I wanted to use jQuery to change between the two buttons but have gotten myself a bit lost.
Here is my javascript from another file in the proj:
function goTo()
{
var yesButton = $('#yesRad');
var noButton = $('#noRad');
if (yesButton[0].checked)
{
submitForm('yesForm') && noButton.Checked==false;
}
else (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}
Inside the jsp I have the following code:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name="radio" id="noRad" value="noForm" />No<br>
</form:form>
Submit
<script>
$("#yesRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked'))
$("#yesRad").prop("checked", false);
else if($input.is(':checked'))
$("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);
});
</script>
I have gotten some functionality out of my jQuery but it's definitely far from correct..
I hope I was clear and thorough in my question. Thanks in advance!!
To begin with, don't use prop, use attr. prop is slower.
You've defined variables so let's not look them up again. In your if/else statement just use the variables.
I'm not entirely sure what you're trying to do with the &&. I suspect you're trying to set the value of the two inputs. If so, they should be separate statements. If inputb is checked there is no reason to set it to checked, so we can remove that piece.
You probably want this change to fire on both inputs.
$("#yesRad, #noRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked')){
$input.attr("checked", false);
} else if($input.is(':checked')){
$inputb.attr("checked",false);
}
});
Solved: Using javascript and taking the radio buttons out of the separate form elements.
First let's take a look at the JSP form elements involved:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>
What I did here was simply take the radio buttons out of the separate forms and grouped them together...pretty obvious; now let's look at the javascript file.
function goHere()
{
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked)
{
submitForm('yesForm');
}
else if (noButton[0].checked)
{
submitForm('noForm');
}
else
{
document.write(str.fontcolor.font("red"));
}
}
As you can see the function 'goHere();' is going to tell the submit button in the following code where we want to go based on the user's selection on our radio buttons.
Here's the call from our javascript function in a submit button on the form...
<div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" name="submitBtn" onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>
That's it!! Simply put; sometimes, while it's invaluable to learn something new, if it's not broke--etc. Hope this helps someone later on down the line!

Javascript: Checked radio button

In one page I have two form for search:
<form class="search-panel" method="post" action="" onsubmit="return searchRedirect(this)">
<input type="test" name="searchFor" />
<div class="additional-search-button"></div>
<div id="additional-search-box">
<div class="as-cont">
Books<input type="radio" name="category" value="Books" checked="1" /><br/>
School<input type="radio" name="category" value="School" /><br/>
Music<input type="radio" name="category" value="Music" />
</div>
</div>
<input type="submit" name="search" />
</form>
<form class="search-panel" method="post" action="" onsubmit="return searchRedirect(this)">
<input type="test" name="searchFor" />
Games<input type="radio" name="category" value="Games" checked="1" />
<input type="submit" name="search" />
</form>
My problem is that if I click search for Games in searchRedirect always alert Books, School or Music if they checked:
That is my javascript function:
function searchRedirect(form) {
alert($(form['category']+':checked').val());
if($(form['category']+':checked').val() == 'Форум')
window.location.href = '/forum/search.php?keywords='+form['searchFor'].value;
else {
window.location.href = '/Search/'+$(form['category']+':checked').val()+'/'+form['searchFor'].value;
}
return false;
}
I need if I click to search games - search only for games, if click to search books,school or music - searching only for them. But now search form for games always use first form checked buttons.
form['category'] will give you a NodeList of all form elements whose name is category, thus you can't use it as a selector by concatenating it with :checked. It'd be the equivalent of $("[object NodeList]:checked").
Since you are already using jQuery, you can use the following instead:
alert($(form).find("input[name='category']:checked").val());
That is, within the context of form, find every input element with name category that is checked, and get its value.
you can't real do form["category"] + ":checked", instead use jQuery's filter method and than use 'this' to reference the form. Also, you can/should use jQuery .submit() to catch the event instead of an inline handler and just for clearer code (and also for better performance) put the $(form['category']+':checked') into a variable so jquery won't need to search for the element again and again.
This is a sample:
$('form').submit(function(e){
var checked = $(this['category']).filter(':checked');
var value = checked.val();
alert(value);
})​
This is a fiddle so you can fiddle (the e passed to the submit callback is the event object and e.preventDefault is like returning false so the form won't submit):
http://jsfiddle.net/SJ7Vd/

jquery remove check box on condition

In a div there are these check boxes(name="val1") and after a certain operation these check boxes are removed
<div name="navigation_b">
<label id="selectall">
select all
<input type="checkbox" name="selectall" />
</label>
<input type="checkbox" name="val1" />
<input type="checkbox" name="val1" />
<input type="checkbox" name="val1" />
<input type="checkbox" name="val1" />
<input type="checkbox" name="val1" />
</div>
If all the checkboxes(name =val1) are removed then the selectall should not be visible.How to do this using jquery
if( $("input:checkbox[name='val1']").length==0)
{
$("input:checkbox[name='selectall']")
.hide();
}
Source is here, and here
Edit
You could hide the entire label which contains selectall -
if( $("input:checkbox[name='val1']").length==0)
{
$("label#selectall")
.hide();
}
You could check to see if there are any of the checkboxes and if not then remove the label
if($('input:checkbox[name="val1"]').length) {
// do something
}
else {
// do something else
}
the above is untested but i think it's pretty close.
If your question is to auto-show the select all checkbox, when the others are removed, I don't think that is possible with jQuery, unless there is an event that jQuery sports which would fire when an element is removed. You'll have to show the select all checkbox manually may be by using one of the fine solutions provided in the other answers.

Categories