Develop Reference

Can I add a required passcode to my HTML form?

I want to put an HTML form on my website for people to send in their RSVP to a party invite. I want to require them to put in a passcode (that will be printed on their invite) before they can submit the form. Is there a way to set a field requirement to an exact match of a pre-specified pin # or password using purely HTML (and JavaScript if necessary)?
For sake of an example, let's simply say I want the person's name and a yes or no for their RSVP.
<form>
Name:
<input type="text" name="name">
RSVP:
<input type="radio" name="rsvp" value="yes">Yes<br>
<input type="radio" name="rsvp" value="no" checked>No<br>
Secret Word:
<input type="password" name="secretWord">
</form>

Yes, you would have to use Javascript, so you would want
function check(){
var pass = document.getElementById("pass_box").value;
if(pass == "Y o u r p a s s w o r d"){
// Do stuff
}else{
// Dont do stuff
}
}
and your html code would look like this:
<form>
Name:
<input type="text" name="name">
RSVP:
<input type="radio" name="rsvp" value="yes">Yes<br>
<input type="radio" name="rsvp" value="no" checked>No<br>
Secret Word:
<input type="password" id="pass_box" name="secretWord">
<button onclick="check()">Submit</button>
</form>
But this isnt very secure, because someone could just look at your code and see the password, but if its just for a party, it should be fine!
Anyway, there is your code! Hope this helps!

Javascript Checkbox Validation not Checking if Ticked

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');
})
};

Send JavaScript Data to PHP Page

So I am new to JS and I am trying to take in a small amount of user input on a JS form. This input will then go to a PHP page as parameters for a result return on the PHP page.
I have been looking at tutorials and examples and I believe my form is named and labeled correctly, but I cannot seem to pull the form data, let alone send it to another page. I have been searching for an hour now with still no luck. :(
For reference, my JS form is page1.html and my PHP form that needs the data is page2.php. (in the same filepath)
Below is my Form code, the script at the top is just my attempt at the getting the data.
If someone could show me how to send form data to a "page2.php" I would be be very thankful!
All I need is the two text box inputs as well as the gender type.
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults () {
var minWeight = form.minWeight.value;
var maxWeight = form.maxWeight.value;
var genderType = form.genderType.value;
alert ("Weight Range: " + minWeight + " - " + maxWeight + "\n for all " +
genderType + "s" );
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter minimum weight:
<input type="text" name="minWeight" value="0">
<BR>
Enter maximum weight:
<input type="text" name="maxWeight" value="999">
<BR>
Select gender
<input type="radio" name="genderType" value="male"/>
Male
<input type="radio" name="genderType" value="female"/>
Female
<BR>
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(myform)">
</FORM>
</BODY>
</HTML>
*If the code to send form data is a little tricky, please explain it so that I can understand what is occurring.
Thank you very much!

The reason your JavaScript doesn't work is because you named your form myform but you're trying to access form.
That said, you shouldn't be using JavaScript for this. Just a simple form will do:
<form action="page2.php" method="post">
<p><label>Enter minimum weight: <input type="number" name="minWeight" value="0" min="0" required /></label></p>
<p><label>Enter maximum weight: <input type="number" name="maxWeight" value="999" min="0" required /></label></p>
<p>Select gender:
<label><input type="radio" name="genderType" value="male" required /> Male</label>
<label><input type="radio" name="genderType" value="female" /> Female</label>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
Your PHP script can then reference $_POST['minWeight'], $_POST['maxWeight'] and $_POST['genderType'].

how to Link html form and anchor tag

I am new to HTML. I want the following to be done in html.
if(link is clicked) {
process one form tag
}
else {
some other form tag
}
this is my form tag .
<form name="input" action="abc.pl" method="get" id="sel">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I want a link such that if i click on the link the above forms input(i mean the checkboxes value) should be taken and the link should process another .pl file in action ...

I think you could try to change the form action dynamically when user clicked the link by using jQuery. Here is a simple example:
HTML
<form id="form1" action="http://jimmy.right-pet.cc/test.php" method="post">
<legend>Test</legend>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name"/>
<input id="submit-btn" type="submit" value="submit"/>
</fieldset>
</form>
<a id="link" href="#">change form action link</a>
JS
<script>
$(function(){
$("#link").click(function(){
$("#form1").attr("action","http://jimmy.right-pet.cc/test2.php");
});
});
</script>
And try to use the browser dev tool to check if the form action is changed after you clicked the link.
Here is a jsFiddle demo.
Hope it helpful.

Not strictly an answer to the question, but still a solution to the problem.
From the comments:
Don't do that. Submit to one server side URI. Do it with submit buttons. Look at the value of the submit button in the form data to determine which branch of code to run on the server. – Quentin 1 hour ago
#Quentin Please Give me an example . I am new to HTML
In the HTML.
<form name="input" action="abc.pl" method="get" id="sel">
<label>
<input type="checkbox" name="vehicle" value="Bike">
I have a bike
</label>
<label>
<input type="checkbox" name="vehicle" value="Car">
I have a car
</label>
<input type="submit" name="sub" value="Some Action">
<input type="submit" name="sub" value="Some Other Action">
</form>
And then in abc.pl:
use strict;
use warnings;
use CGI;
my $c = CGI->new;
my $sub = $c->param('sub');
unless ($c) {
# No submit value was detected so either perform a default
# action or return an error
exit;
}
if ($c eq "Some Action") {
# Do one thing
} elseif ($c eq "Some Other Action") {
# Do another thing
}

Why when performing an html post for radio input type with name "datetype" it does not post correctly

In asp when I try and retreive the name from a request.form("datetype") it does not pick up the value it is an empty string? But when I change the name it appears to work.
Does not work:
<h1>Select your Mood Date</h1>
<form method="post" action="viewer.asp">
<input type="radio" name="datetype" value="HappyDate" /><strong>Happy Mood</strong><br />
<input type="radio" name="datetype" value="SadDate" checked="checked" /><strong>Sad Mood</strong><br />
</form>
<br /><br />
This Works:
<h1>Select your Mood Date</h1>
<form method="post" action="viewer.asp">
<input type="radio" name="MoodDate" value="HappyDate" /><strong>Happy Mood</strong><br />
<input type="radio" name="MoodDate" value="SadDate" checked="checked" /><strong>Sad Mood</strong><br />
</form>
If this is a protected keyword in html, then are there other protected key words in html? Maybe b/c it starts with "date" it causes problem during the post?

You must place it into an array, like this:
<input type="radio" name="datetype[]" value="HappyDate"/>
See the difference with the name, use [] to set it to an array.
This also works all other type of inputs with the same name.