Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jackie Jen
2,723 PointsHow to stay on current page if all the checkbox is unchecked
<form onsubmit="checkbox()" action = "testing4.php" method="post" >
<fieldset><legend>Select as Many Desserts as You Like!</legend>
<p>Choose Desserts:</p>
Cake: <input type="checkbox" name="cake" value="1" id="cake"><br />
Pie: <input type="checkbox" name="pie" value="yes" id="pie"><br />
</fieldset>
<input type="submit" value="Don't be Modest!">
</form>
<script>
function checkbox()
{
var allchecked=0;
if(document.getElementById('cake').checked)allchecked=1;
if(document.getElementById('pie').checked)allchecked=1;
if(allchecked==0)alert('Very well. I\'ll be right back with the check!');
else alert('We\'ll bring that right out!');
}
</script>
Hi,
Above is my javascript and html code. if i did not checked all the checkbox it will prompt out the msg box. But after that it will bring me go to testing4.php page.
How can i stay on the current page if all the checkbox is unchecked and if one of the checkbox checked will bring me forward to testing4.php page.
Regards Kenny
4 Answers
Jackie Jen
2,723 PointsHi George, You have giving me great idea about the "return false" I have a better way not to use onsubmit and onclick method at the same time.
Below is my code if the validation is false will stay on the current page. else will move to testing4.php page.
<form onsubmit="return validate()" action = "testing4.php" method="post" id="my_form" >
<fieldset><legend>Select as Many Desserts as You Like!</legend>
<p>Choose Desserts:</p>
Cake: <input type="checkbox" name="cake" value="1" id="cake"><br />
Pie: <input type="checkbox" name="pie" value="yes" id="pie"><br />
</fieldset>
<input type="submit" value="Don't be Modest!" >
</form>
<script>
function validate()
{
var allchecked=0;
if(document.getElementById('cake').checked || document.getElementById('pie').checked){
allchecked=1;
alert('We\'ll bring that right out!');
return true
}else{
alert('Very well. I\'ll be right back with the check!');
return false;
}
}
</script>
Best Regards
George Cristian Manea
30,787 PointsYou could change the input type submit into a input type button and on it you can use the onclick attribute. After that you can add this code in the else state document.getElementById('my-form').onsubmit = function() {
return false;
}
Jackie Jen
2,723 PointsHi George,
i'm still new with javascript can you guide me? I have few question 1) in Form i have onsubmit function how can i add a onclick attribute? 2) what the return false doing?
George Cristian Manea
30,787 PointsThe return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
George Cristian Manea
30,787 PointsIf you put an onclick attribute on the form that means when a user tries to fill an input it will trigger the onclick event so it is not a good a ideea. You could put the onclick attribute on a button or anchor or input or span etc..