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/>
Related
I have this html:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<script src="js/filename.js"></script>
</head>
<body>
<form id = "dp5" action="" method="POST" onsubmit="Write_Text()">
<h3>5- Do you know any browsers?</h3>
<input id = "No" type="radio" name="dp5N" value="false">
<label for = "No">No </label>
<input id = "yes" type="radio" name="dp5S" value="true">
<label for = "yes">Yes</label>
<label for = "text">6 - Which?</label>
<input id = "text" type="text" name="dp5text" value="">
</form>
<div id="next">
<input id="sub" type="submit" name="submit" value="Next">
</div>
</body>
</html>
And this javascript "filename":
function Write_Text() {
let x = document.forms["dp5"]["No"].value;
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value="";
} else {
document.getElementById("text").disabled =false;
}
}
The text box should start disabled and only be able when the user choose "yes" option. The function isn't working at all.
Your submit button is outside the form. Put it inside the form and it will work.
<form id = "dp5" action="" method="POST" onsubmit="Write_Text(); return false">
<h3>5- Do you know any browsers?</h3>
<input id = "No" type="radio" name="dp5N" value="false">
<label for = "No">No </label>
<input id = "yes" type="radio" name="dp5S" value="true">
<label for = "yes">Yes</label>
<label for = "text">6 - Which?</label>
<input id = "text" type="text" name="dp5text" value="">
<div id="next">
<input id="sub" type="submit" name="submit" value="Next">
</div>
</form>
Once you fix the problem Sreekanth MK pointed out, you'll have a new problem:
Nothing is preventing the default action of the form submission, which is to send the form data to the action URL (in your case it will be the page's own URL) and replace the current page with whatever that URL returns.
You need to prevent the default action. The minimal way is:
<form id = "dp5" action="" method="POST" onsubmit="Write_Text(); return false">
or
<form id = "dp5" action="" method="POST" onsubmit="event.preventDefault(); Write_Text();">
...but I recommend using modern event handling instead by removing the onsubmit attribute and changing the JavaScript like this:
function Write_Text(event) {
event.preventDefault();
let x = document.forms["dp5"]["No"].value;
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value="";
} else {
document.getElementById("text").disabled =false;
}
}
document.getElementById("dp5").addEventListener("submit", Write_Text);
Note that you need to move your script tag. Putting script in head is an anti-pattern. Scripts go at the end of the page, right before the closing </body> tag.
Side note: You're free to do anything you like in your own code, but FWIW, the overwhelming convention in JavaScript is that function names start with a lower case letter and use camelCase, other than constructors which used initially-capped CamelCase instead. So writeText rather than Write_Text.
First of all, the submit problem can be easily solved by moving the button in the form and preventing the default behavior.
Among the submit problem, I think your code could be significantly improved by also solving the following problem: you can select both of the radio inputs: wrap them into a field-set and use the same name for them; why? it's easier to get the selected answer and can be extended to multiple inputs.
Below you have a working example with what I said.
Cheers!
function Write_Text(event) {
event.preventDefault();
let x = document.querySelector('input[name="ans"]:checked').value
console.log(x);
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value="";
} else {
document.getElementById("text").disabled =false;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
</head>
<body>
<h3>5- Do you know any browsers?</h3>
<form id="dp5" action="" method="POST" onsubmit="return Write_Text(event)">
<fieldset>
<input id="No" type="radio" name="ans" value="false">
<label for="No">No </label>
<input id="yes" type="radio" name="ans" value="true">
<label for="yes">Yes</label>
</fieldset>
<label for="text">6 - Which?</label>
<input id="text" type="text" name="dp5text" disabled value="">
<div id="next">
<input id="sub" type="submit" name="submit" value="Next">
</div>
</form>
</body>
</html>
you need to use event object here to prevent Default because page get refreshed onSubmit and then submit form in your function Write_Text()
function Write_Text(event) {
//This will prevent Default Behaviour
event.preventDefault();
let x = document.forms["dp5"]["No"].value;
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value="";
} else {
document.getElementById("text").disabled =false;
}
// then submit using JS
}
You will quickly see that I'm new to this and don't have a clue. I'm going mental trying to help a friend out with this project. He wants to have a simple quote form that generates a quote to html then he will copy/paste to a private wordpress page for his client.
The form starts with if radio button is selected, div is shown
index.html:
<html>
<body>
<head>
<title>Demo Quote Creator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='animalvillas']").click(function () {
if ($("#chkYes1").is(":checked")) {
$("#dvanimalvillas").show();
} else {
$("#dvanimalvillas").hide();
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("input[name='animalkidani']").click(function () {
if ($("#chkYes2").is(":checked")) {
$("#dvanimalkidani").show();
} else {
$("#dvanimalkidani").hide();
}
});
});
</script>
</head>
<h2>Client Name</h2>
<form name="create" action="welcome.php" method="post" onsubmit="return validateForm();">
<strong>Last</strong>: <input type="text" name="last" required />, <strong>First</strong>: <input type="text" name="first" required />
<BR />
<h2><strong>Resorts to Include in Quote</strong></h2>
<span><strong>Animal Kingdom Villas</strong></span><BR />
<label for="chkYes1">
<input type="radio" id="chkYes1" name="animalvillas" />
Include
</label>
<label for="chkNo1">
<input type="radio" id="chkNo1" name="animalvillas" />
Exclude
</label>
<hr />
<div id="dvanimalvillas" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>
<span><strong>Animal Kingdom Kidani</strong></span><BR />
<label for="chkYes2">
<input type="radio" id="chkYes2" name="animalkidani" />
Include
</label>
<label for="chkNo2">
<input type="radio" id="chkNo2" name="animalkidani" checked />
Exclude
</label>
<hr />
<div id="dvanimalkidani" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>
<BR />
<input type="submit" />
</form>
</body>
</html>
Now, on the welcome.php, he only wants the relevent that was selected on the index.html. Obviously, this is not working, but hopefully you can see what we are trying to accomplish.
welcome.php
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="dvanimalvillas" <?php
if ($("#chkNo1").is(":checked")) { echo 'style="display:none;"'; } ?>>
The quote for Animal Kingdom Villas will show here when yes is selected
</div>
<div id="dvanimalkidani" <?php
if ($("#chkNo2").is(":checked")) { echo 'style="display:none;"'; } ?>>
The quote for Animal Kingdom Kidani will show here when yes is selected
</div>
</body>
Thank you for any direction you may have!
In your index.html make following changes. You have to give some value to your radio buttons to fetch in other file
<label for="chkYes2">
<input type="radio" id="chkYes2" name="animalkidani" value="Y" />
Include
</label>
<label for="chkNo2">
<input type="radio" id="chkNo2" name="animalkidani" value="N" checked />
Exclude
</label>
In your welcome.php make following changes. We will use radio button value to hide and display div content.
<div id="dvanimalvillas" <?php echo ($_POST['animalkidani'] == "Y") ? 'style="display:none;"' : '' ; } ?>>
The quote for Animal Kingdom Villas will show here when yes is selected
</div>
<div id="dvanimalkidani" <?php echo ($_POST['animalkidani'] == "N") ? 'style="display:none;"' : '' ; } ?>>
The quote for Animal Kingdom Kidani will show here when yes is selected
</div>
There are multiple things going on here:
You're not using radio buttons properly. Each radio selection needs a different value within each radio group having the same name. This value is what is sent with the form when it is submitted. See this link: http://www.echoecho.com/htmlforms10.htm
In welcome.php, you need to look at the form data that is sent from index.html, not at the actual checkboxes from the form. See this link: http://www.tutorialspoint.com/php/php_get_post.htm
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');
})
};
I got stuck to what I think is silly. But now I have tried every combination but not able to find out what is going on.
onclick inside input type radio is not working when I put input type inside a form. But when I delete form tag it works. Also I have seen a code where onclick work inside a form tag but not working when I write.
This is not working:
<html>
<head>
<script>
function action(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action(this.value)">Ping
<input type="radio" value="card" name="rb" onclick="action(this.value)">Card
<input type="radio" value="temp" name="rb" onclick="action(this.value)">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
When I remove form it works.
change the name of your function action
try this :
<html>
<head>
<script type="text/javascript">
function action123(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action123(this.value);">Ping
<input type="radio" value="card" name="rb" onclick="action123(this.value);">Card
<input type="radio" value="temp" name="rb" onclick="action123(this.value);">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
You shouldn't use inline event functions anymore. Use event listeners:
radios = document.getElementsByName("rb");
for(i=0; i<radios.length; i++) {
radios[i].addEventListener('click', function(e){
document.getElementById("test1").innerHTML = e.target.value;
});
}
JSFiddle
"action" seems to be a blocked namesspace for forms
try sth like
<script>
function otherName(str){
document.getElementById("test1").innerHTML=str;
}
</script>
<form name="form">
<input type="radio" value="ping" name="rb" onclick="otherName(this.value)" />Ping
<input type="radio" value="card" name="rb" onclick="otherName(this.value)" />Card
<input type="radio" value="temp" name="rb" onclick="otherName(this.value)" />Temprature
<p id="test1">radio will be displayed here</p>
</form>
http://jsfiddle.net/waeqT/
I am sure this is any easy question, but I can't figure out what I am doing wrong.
What I am trying to accomplish is when the checkbox is "checked" I want it to enable the textbox.
Here is my code.
<html>
<title> iSCSI Admin v0.1 </title>
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="textname" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
</body>
</html>
Try this:
<input id="textname" type="text" />
function enabledisable() {
if (document.getElementById("Checkbox1").checked) {
document.form1.textname.disabled = false;
}
else {
document.form1.textname.disabled = true;
}
}
Ok you fixed the question. You need to put the checkbox in the form.
Try this:
<body>
<script type="text/javascript">
function enabledisable() {
if (document.form1.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
<form name="form1">
<fieldset style="width:640px;">
<legend>Enable textbox <input type="checkbox" name="checkbox1" onclick="enabledisable()"></legend>
Text:
<input type="text" name="textname" disabled="true" >
</fieldset>
</form>
</body>
document.form1.textname.disabled='disabled';
document.form1.textname.disabled='';
http://jsfiddle.net/nqaJZ/
Note: I added -> id="checkbox1" to your checkbox field.
Note: I changed the if condition as well -> document.getElementById("checkbox1").checked
Note: I changed your code which enables / disables textfield as well -> document.form1.text.disabled=false;
notice I changed it from targetname (which was not there) to your textfield name which you had was "text.
Hope it helps.
iSCSI Admin v0.1
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" id="checkbox1" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="text" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.getElementById("checkbox1").checked) {
document.form1.text.disabled=false;
} else {
document.form1.text.disabled=true;
}
}
</script>
</body>