I've looked through a lot of the questions that people have already asked on this, but I cannot find a solution that has helped me.
I'm a beginner to programming so know little about what to do, I have four check boxes and to submit the form, you have to select at least one of them, but no message comes up and the form is able to be submitted without one of the boxes being ticked.
This is my code below:
<tr>
<td align="right">
<label for="erdbeersocken"><p>Erdbeersocken<sup>*</sup>:</label>
<br>
<label for="armstulpen">Armstulpen<sup>*</sup>:</label>
<br>
<label for="cupcakes">Cupcakes<sup>*</sup>:</label>
<br>
<label for="babykleidung">Babykleidung<sup>*</sup>:</label>
<br>
</td>
<td align="left">
<form action="../" onsubmit="return checkCheckBoxes(this);">
<input type="CHECKBOX" name="CHECKBOX_1" value="Erdbeersocken">
<br>
<input type="CHECKBOX" name="CHECKBOX_2" value="Armstulpen">
<br>
<input type="CHECKBOX" name="CHECKBOX_3" value="Cupcakes">
<br>
<input type="CHECKBOX" name="CHECKBOX_4" value="Babykleidung">
<br>
<input type="SUBMIT" value="Submit!">
</td>
</tr>
</form>
<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (
theForm.CHECKBOX_1.checked == false or
theForm.CHECKBOX_2.checked == false or
theForm.CHECKBOX_3.checked == false or
theForm.CHECKBOX_4.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>
Which looks like: Text here (Checkbox here)
I'm using Notepadd++ more advanced code does not seem to work, so if anyone could help me with simplified JavaScript, I would really appreciate it. :)
function checkCheckBoxes(theForm) {
if ($("input[type='checkbox']:checked").length){
return true;
}else{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
}
For your form, you should give all the checkboxes the same name but give each checkbox a different value -- this will create an array for your checkboxes (see note at bottom of response if you don't yet know what an array is):
<input type="CHECKBOX" name="CHECKBOX" value="Erdbeersocken">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Armstulpen">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Cupcakes">
<br>
<input type="CHECKBOX" name="CHECKBOX" value="Babykleidung">
then in your confirm submit function you want to use a for loop with two nested if statements to check if a checkbox has been checked. I'll give you an example of some code I recently did:
var interestsSelected = false;
for (var i = 0; i < document.forms[0].interests.length; ++i ) {
if (document.forms[0].interests[i].checked == true) {
interestsSelected = true;
break;
//code gives go ahead for submission because at least one checkbox has been checked
}
}
if (interestsSelected !=true) {
window.alert("You must select at least one hobby or interest");
return false;
//code Woot woot woot! It all works!
}
This was my form section for the checkboxes:
<input type="checkbox" name="interests" value="technology" />Technology <br />
<input type="checkbox" name="interests" value="arts" />The Arts <br />
<input type="checkbox" name="interests" value="music" />Music <br />
<input type="checkbox" name="interests" value="film" />Movies <br/>
<input type="checkbox" name="interests" value="shopping" />Shopping <br />
<input type="checkbox" name="interests" value="outdoor" />Camping <br />
<input type="checkbox" name="interests" value="garden" />Gardening <br />
As a fellow beginner :) I often find it useful if everything is spelled out in as simple a language as possible so I'm going to provide some details here that you might or might not already know.
Anytime you create a form, an array for the form is automatically created (you won't see it listed anywhere, the browser will automatically create one when it accesses the form data BUT you can (should) refer to it in your coding). So if you have one form on your page you will have an array forms[0], if you have two different forms on your page then the first form will have an array forms[0] and the second form will have an array forms[1], each containing all of the elements in the respective forms.
If you name all your checkboxes the same name, you are essentially creating an array within an array -- the big Mama Bear array is forms[0] and nestled inside her is the Baby Bear array (your checkbox name[]).
In order to reference the Baby Bear array, you have to acknowledge the Mama Bear array first: that is why in the code example I gave above, you see "document.forms[0]" (the Mama Bear array) followed by ".interests[i]" (the Baby Bear array).
Hope this helps :)
HTML for my example
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Select a box</p>
<form id="aform">
<input type="checkbox">
<input type="checkbox">
</form>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="test.js"></script>
</body>
</html>
And the javascript in its own file (always seperate code from css and from html)
window.onload=function() {
$("#aform").change(function () {
alert('a box is checked');
})
};
Related
i make a html site. there is questions on the site. i made it with form .After clicking on the button, I want to see all of the answers on the same page.i dont want as alert. how can i do it?
I apologize for the misspellings.
<script>
function findSelection()
{
var serieList=document.getElementsByName('serie')
for (var i=0; i<serieList.length;i++)
{
if(serieList[i].checked)
{
}
}
var markaList=document.getElementsByName('marka')
for (var i=0; i<markaList.length;i++)
{
if(markaList[i].checked)
{
alert(markaList[i].value)
}
}
var yerList=document.getElementsByName('yer')
for (var i=0; i<yerList.length;i++)
{
if(yerList[i].checked)
{
alert(yerList[i].value)
}
}
var nasilList=document.getElementsByName('nasil')
for (var i=0; i<nasilList.length;i++)
{
if(nasilList[i].checked)
{
alert(nasilList[i].value)
}
}
}
</script>
<html>
<head>
<title>Web Tasarım Anketi </title>
</head>
<body style="background-color:#d3ea93">
<center> <h1 style="color:red"> ANKET </h1> </center>
<form >
<fieldset><legend>Soru 1 </legend>
En sevdiğiniz yabancı dizi? </br>
<label> <input type="radio" name="serie" value="Game of Thrones">Game of Thrones </label>
<label> <input type="radio" name="serie" value="Person of İnterest">Person of Interest </label>
<label> <input type="radio" name="serie" value="South Park">South Park </label>
<label> <input type="radio" name="serie" value="Black Mirror">Black Mirror </label>
</fieldset>
</form>
<form >
<fieldset><legend>Soru 2 </legend>
En sevdiğiniz bilgisayar markası? </br>
<label> <input type="radio" name="marka" value="Asus">Asus </label>
<label> <input type="radio" name="marka" value="HP">HP </label>
<label> <input type="radio" name="marka" value="Toshiba">Toshiba </label>
<label> <input type="radio" name="marka" value="Dell">Dell </label>
</fieldset>
</form>
<form>
<fieldset><legend>Soru 3 </legend>
Nerede yaşamak istersiniz?</br>
<label> <input type="radio" name="yer" value="Türkiye">Türkiye </label>
<label> <input type="radio" name="yer" value="Mars">Mars </label>
<label> <input type="radio" name="yer" value="Avustralya">Avustralya </label>
<label> <input type="radio" name="yer" value="Yeni Zelanda">Yeni Zelanda </label>
</fieldset>
</form>
<form>
<fieldset><legend>Soru 4 </legend>
Nasıl ölmek istersiniz?</br>
<label> <input type="radio" name="nasil" value="Araba Kazasında ">Araba Kazası </label>
<label> <input type="radio" name="nasil" value="Uzay Boşluğunda">Uzay Boşluğunda </label>
<label> <input type="radio" name="nasil" value="Ecelimle">Ecelimle </label>
<label> <input type="radio" name="nasil" value="Maganda Kurşunu">Maganda Kurşunu </label>
</fieldset>
</form>
<input type="button" id="btnKaydet" value="Kaydet" onclick="findSelection()"></input>
</body>
</html>
You can use javascript to achieve this but ultimately you want to learn a server-side programming language, like php. To me php is the best option.
If you Google form and click the mozilla device docs for it you'll see an attribute called action, this attribute tells the form where to go or what to do (with inline javascript, but I highly recommend against this). You'll also find an attribute called method. Method is responsible for how the form handles the input values. The two most common values are post and get.
I usually only ever use post, because I'm posting the data to a script.
The most common use is something like
<form method="post" action="/area/scripts/post/form.php">
However, getting really fun with an mvc, would more look like:
<form method="post" action="<?php echo $this->getFormAction(); ?>">
Then in your form.php page you handle the data. To see what I mean, place this in your form.php for now:
<?php
var_dump($_POST) ;
This will display your form data.
To link it back to your idea of displaying on same page, you can also use ajax, however this means including jquery into your site. It 100% makes life easier but it does increase your sites size. Of course you can opt for the .min script but still, you include in every page, so..
Anyway. Using pure html I'm not sure is possible, javascript is a browser side programming language and I'm not sure entirely if you can assign values dynamically, you probably can but I'm no javascript expert.
I recommend using php for this as it also makes it secure (if you follow convention and do it correctly using safe code)
Also, I prefer this as a comment as an actual answer because it doesn't directly deal with your problem or its associated tags, but the character limit is not enough for a comment like this. Feel free to downvote if preferred and I'll simply remove if it gets to -3
Update after seeing comment
To combine variables in javascript you use + to concat strings.
E.g.
var message = document.getElementById('myId') + ' ' + document.getElementById('myIdTwo');
alert(message);
This only an example of how to use, but this should be what you're looking for.
Good luck!
you can do it via jquery give all your fields id
and write like this
<script>
$(document).ready(function()
{
$("#Button1).click(function()
{
$("#abc1").val($("#abc").val());
})
</script>
<body>
<input type="text" id="abc" />
<input id="Button1" type="button" value="button" />
<input type="text" id="abc1" />
</body>
here is the html code below.
Need to export the checked value to a csv file separated by comma
Can any one help me out with any solutions.
`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>CSB Export</title>
</head>
<body>
<div class="page_wrapper">
<div class="header">
ABC news
</div>
<div class="form_holder">
<form>
<div class="form_container">
Name : <input type="text" placeholder="Enter Your Name"/><br/>
<input type="checkbox" name="newstype" value="1"/>1<br/>
<input type="checkbox" name="newstype" value="2"/>2<br/>
<input type="checkbox" name="newstype" value="3"/>3<br/>
<input type="checkbox" name="newstype" value="4"/>4<br/>
<input type="checkbox" name="newstype" value="5"/>5<br/>
<input type="submit" value="submit"/>
</div>
</form>
</div>
</div>
</body>
</html>
You do not specify what environment you're working in. Environments such as Node.js, PHP, Python, Ruby, Java, etc.
So not knowing the above, you have two options:
Handle the form data when it's submitted. You'd look for all newstype params in the submitted form data.
Add some sort of listener to the form when submit is clicked that finds all checked boxes.
Using vanilla JS:
const checkboxes = document.querySelectorAll('input[name=newstype]:checked')
Use PHP:
if (isset($_POST['newstype1'])) {
//code for checked 1
} elseif (isset($_POST['newstype2'])) {
//code for checked 2
} elseif (isset($_POST['newstype3'])) {
//code for checked 3
} elseif (isset($_POST['newstype4'])) {
//code for checked 4
} else {
//code for checked 5
}
I hope that works. (and helps)
EDIT
The checkboxes names will need to be changed:
<input type="checkbox" name="newstype1" value="1"/>1<br/>
<input type="checkbox" name="newstype2" value="2"/>2<br/>
<input type="checkbox" name="newstype3" value="3"/>3<br/>
<input type="checkbox" name="newstype4" value="4"/>4<br/>
<input type="checkbox" name="newstype5" value="5"/>5<br/>
So what I am doing is something like a simple medication reminder, so the system display a list of medications the user should be taking, and the user then tick the checkbox of the medicine they have taken, but what I want to do is if for example, the user only ticked Medicine One and Two, then I want an alert saying "Why you didn't take Medicine Three?" and a drop down box appears with a list of possible reasons of which the user can choose from. And if the user only took Medicine Three, the system will display alert saying "Why didn't you taken Medicine One and Two?", and drop down box appears with a list of possible reasons. And if user has ticked all three checkbox, then display an alert saying "That great! Well Done!"
<form>
<input type="checkbox" name="a" value="one">Medicine One<br>
<input type="checkbox" name="b" value="two">Medicine Two<br>
<input type="checkbox" name="c" value="three">Medicine Three<br>
<input id=xbutton type="button" onClick="validate()" value="Submit">
</form>
I know how to do validation for one checkbox (like a terms agreement checkbox), but I'm a bit confused as to how to incorporate so many validation rules into one function.
Use querySelectorAll to iterate all the checkbox elements and check the .checked property.
Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.
input[type="checkbox"]:not(:checked) will select only those elements which are not checked.
function validate() {
var msg = [];
[].forEach.call(document.querySelectorAll('input[type="checkbox"]:not(:checked)'), function(elem, index) {
msg.push(elem.name);
});
alert(msg.length ? 'Please check ' + msg.join(' and ') : 'All are checked!');
}
<form>
<input type="checkbox" name="a" value="one">Medicine One
<br>
<input type="checkbox" name="b" value="two">Medicine Two
<br>
<input type="checkbox" name="c" value="three">Medicine Three
<br>
<input id=xbutton type="button" onClick="validate()" value="Submit">
</form>
Fiddle here
Using jquery can help you to make things easy.
Here is the fiddle: https://jsfiddle.net/swaprks/zs7tpuo0/
HTML:
<form>
<input type="checkbox" name="a" value="one">Medicine One<br>
<input type="checkbox" name="b" value="two">Medicine Two<br>
<input type="checkbox" name="c" value="three">Medicine Three<br>
<input id=xbutton type="button" value="Submit">
</form>
JAVASCRIPT:
$("#xbutton").click(function(){
validate();
});
function validate(){
if ( $('input[type="checkbox"]:not(:checked)').length == 3 ) {
alert("Select atleast one option.");
}
}
I have the following code; I want to make sure that submit does not actually post to the page specified by action unless one of the two radio inputs has been selected. I have tried multiple variations of this and other code, and cannot seem to figure out whats wrong. Whether the radio buttons are selected or not it still posts to somepage.py.
<html>
<head>
<title>
Test Page
</title>
<script language="JavaScript">
function validate(formEntry) {
if (formEntry.Q1.q11.checked != true && formEntry.Q1.q12.checked != true)
return false;
return true;
}
</script>
</head>
<body>
<form action="somepage.py" method="POST" onsubmit="return validate(this);">
<input type="radio" name="Q1" id="q11" value="1" />
<input type="radio" name="Q1" id="q12" value="2" />
<input type="submit" name="Submit" />
</form>
</body>
</html>
If you make one button checked by defualt, then one will always be checked:
<input type="radio" name="Q1" id="q11" value="1" checked>
<input type="radio" name="Q1" id="q12" value="2" >
Or the function can be simply:
function validate(formEntry) {
return formEntry.Q1[0].checked || formEntry.Q1[1].checked ;
}
if either is checked it will return true, otherwise false.
if (!formEntry.Q1[0].checked && !formEntry.Q1[1].checked)
Trying to access input by form_name.input_name.input_id is really strange.
Use jquery validation. Checkout this link for details
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Demo page here:
http://jquery.bassistance.de/validate/demo/
It seems to work, look at:
http://jsfiddle.net/EEgea/
Maybe you'd better use a framework like JQuery to prevent javascript flaws between different browsers
Or use a validation framework like JQuery validation, I highly recommend that.
try your function like :-
function validate(formEntry) {
var radiobtn=document.getElementsByName('Q1');
if(!(radiobtn[0].checked || radiobtn[1].checked))
return false;
return true;
}
Sorry for the ambiguous title, but it's quite hard to condense what I'm trying to do into a few words. Here's exactly what I'm trying to do:
I want to have a series of groups of checkboxes. One would be gender, with checkboxes for Male and Female, one would be Region, with checkboxes for North, East, South and West and so on.
The aim is to allow the user to select say, Male or Female, but as soon as they put a check in a checkbox of another group e.g. any of the Region checkboxes, all of their previous 'checks' from all other groups are removed.
The point is to only allow the user to select from one group of checkboxes at a time.
I can only think of checking which checkboxes have been marked on click using javascript, but was wondering if there was a simpler way which I may be missing.
I've also thought that maybe a hidden radio button for each group could work.
If anyone has a more elegant solution I'm eager to hear it.
Its been a long time since I've done any pure Javascript, libraries like jQuery make this kind of thing so easy. Anyway, something a bit like the following might work, you'd need to test it in a few browsers and tweak to what you need.
<form name="theForm">
<input type="checkbox" id="male" name="theGroup" onClick="clearGroup(this);">male
<input type="checkbox" id="female" name="theGroup" onClick="clearGroup(this);">female
<br />
<input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
<input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
<input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
<input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>
<script>
function clearGroup(elem) {
var group = document.theForm.theGroup;
for (var i=0; i<group.length; i++) {
if (group[i] != elem) {
group[i].checked = false;
}
}
}
</script>
Here is a working example to play around with.
You could do the equivalent thing in jQuery as simply as
$('input:checkbox').click(function() {
$(this).siblings(':checked').attr('checked', false);
});
and you have no browser compatibility issues to worry about.
Managed to figure it out with a little help from fearofawhack planet. Seems really simple now.
Heres a link to the JSFiddle http://jsfiddle.net/aeeN4/
if you have different groups you can use this code below.
<script>
function clearGroup(elem) {
//alert(elem.name);
var group = document.getElementsByName(elem.name);
for (var i=0; i<group.length; i++) {
if (group[i] != elem) {
group[i].checked = false;
}
}
}
</script>
<form name="theForm">
<input type="checkbox" id="male" name="theGroup2" onClick="clearGroup(this);">male
<input type="checkbox" id="female" name="theGroup2" onClick="clearGroup(this);">female
<br />
<input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
<input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
<input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
<input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>