Forum Moderators: open

Message Too Old, No Replies

check radio button before submit action

         

smallcompany

9:11 pm on Dec 8, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have a form with radio buttons that are to select a single option to proceed with. Options are URLs that correspond to a selected product.

The form example:
<form action="#" class="myForm" id="myForm1">
<div class="radio">
<label><input type="radio" name="product" value="example.com">Product 1</label>
</div>
<div class="radio">
<label><input type="radio" name="product" value="example.com">Product 2</label>
</div>
<div class="radio">
<label><input type="radio" name="product" value="example.com">Product 3</label>
</div>
<div>
<button type="submit"> GO FURTHER</button>
</div>
</form>


JavaSript:
<script>$(function(){
$(".myForm").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
});
</script>


The trouble here is that since none of the radio buttons are initially checked, if the submit button is pressed without radio button selected, a visitor is taken to example.com/undefined page.

I know that javascript can be used to check on radio button status and issue a warning, but had difficulty implementing it. The most I got was to get it checked and the warning would show up, but the javascript would take it further to that undefined page anyway.

Here is the example of the code I came up with:
<script>

$(function() {
$(".myForm1").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
$('#myForm1').validate({
rules: {
product: {
required: true
}
},
messages: {
Product: {
required: "Please select a Product<br/>"
}
},
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo(element.parents('.myForm'));
} else { // This is the default behavior
error.insertAfter(element);
}
}
});
});</script>


The code above inserts the warning text to the place of my choice which is fine. The other way could be a pop up window, but I'm sure I could sort that out later.
I'm just curious about how to make the script work properly. It does not need to be based on my example, it can be anything. I saw there's a jQuery validation plugin, but did not know how to make it work with my existing script.

Thanks

smallcompany

1:07 am on Dec 9, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



... well, I came up with something that looks simpler, but the redirect refuses to work:

$('#nsoForm1').submit(function() {
if ($('input:radio', this).is(':checked')) {
// Do this if a button is checked
$(".nsoForm").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
})
} else {
alert('Please select something!');
return false;
}
});


Instead of redirecting, the value of URL gets appended to the existing URL, like this:

example.com/?product=example.com#

The number sign at the end looks like picked from form action value, meaning to me that my window.location directive is getting ignored. The directive itself works fine in this form:

$(function(){
$(".myForm").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
});


How do I combine the code from the above and the alert "else" part?

Thanks

Fotiman

4:35 pm on Dec 10, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




$(function(){
$(".myForm").submit(function(e) {
e.preventDefault();
var url = $(this).find('input[type="radio"]:checked').val();
if (url) {
window.location = url;
}
else {
alert('Please select something!');
}
});
});

smallcompany

9:28 pm on Dec 12, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



... and that was the one.

Thank you very much!