I am making a simple registration form, when I remove the if statements from "from here" comment to "to here" comment, the required works. But, when I the write the if statements, then the required does not work.
function validate() {
var contact = document.getElementById("Contact").value.search(/^[0-9]{10}/);
var gender = document.getElementsByName("gender");
for (var i = 0; i < gender.length; i++) {
if (gender[i].checked) {
gender = gender[i].value;
}
}
/*from here*/
if (contact) {
alert("Enter correct Contact No.");
}
if (gender != "Male" && gender != "Female") {
alert("Select Gender");
}
if (contact == 0 && (gender == "Male" || gender == "Female")) {
alert("Form submitted!");
}
/*to here*/
}
body {
background-image: url("images/back.jpg");
background-repeat: no-repeat;
}
form {
background-color: white;
width: 50%;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
box-shadow: 20px 10px 20px 0px darkgrey;
margin-top: 6%;
}
table {
border-spacing: 20px 10px;
padding-bottom: 20px;
}
tr {
font-size: 20px;
}
textarea {
max-width: 250px;
}
h1 {
padding-top: 25px;
font-style: italic;
color: #363731;
}
p {
padding-top: 15px;
color: white;
font-family: Arial;
font-weight: bolder;
font-size: 40px;
}
#btn {
width: 70px;
height: 30px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<p>REGISTRATION</p>
<form method="post">
<h1>Add Student</h1>
<table cellpadding="2">
<tr>
<td align="right">Student Name</td>
<td align="left"><input type="text" id="studentName" name="studentName"
size="32" required></td>
</tr>
<tr>
<td align="right">Contact No</td>
<td align="left"><input type="number" name="contactNo" id="Contact"
size="32" maxlength="10" required></td>
</tr>
<tr>
<td align="right">Gender</td>
<td align="left">
<input type="radio" name="gender" value="Male" checked>Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td align="right">Email Id</td>
<td align="left">
<input type="email" title="Enter valid acharya email" pattern="[a-zA-Z]+\.
[a-zA-Z]+\.([0-9][1-9]|[1-9][0-9])#acharya\.ac\.in" id="email" size="32"
required>
</td>
</tr>
<tr>
<td align="right">Address Line</td>
<td align="left"><textarea placeholder="Your Address Here..." rows="5"
cols="100"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Add" id="btn"
onclick="validate()" />
<input type="button" value="Reset" id="btn" />
</td>
</tr>
</table>
</form>
</center>
Required actually works. In your validate function, you are only alerting "Form Submitted" if those validations are met, that does not mean the form has been submitted. If you notice you do not even have a page refresh to show the form has been submitted.
I have tested your work by moving the if statement about alert("Form submitted!"); between your two comments and they work out the same result. What part of required check missed? Please specified the issue you're facing, or tell me if I misunderstood your question
And also you should modify some code setting in the line <form method="post"> to really let the code work
EDIT
In order to let the form works you should add a path to send the value to
change the code from <form method="post"> to something like <form action="data.php" method="post">
Code in data.php
<h4>Value you submit</h4>
<p>Name <?php echo $_POST["studentName"]; ?></p>
<p>Contact No : <?php echo $_POST["contactNo"]; ?></p>
And so one
Tutorial of handling HTML form by W3Schools
Bonus tips:
1) Usually, we use POST method because the result can't be seen in address bar but if you want a URL that can be bookmarked and revisit with the same result you should use GET
2) I find out you make a required check on gender in your script but I think it's useless since you add a code checked in the Male option so in that radio part it can't be unchecked, you can only check male or female
Also sorry for my bad English
Related
I'm new to this, so please bear with me. I'm trying to setup a simple form validation that connects to my email client (Drip). It's not sophisticated, like I said, I'm learning and want to do so from the ground up (which is why all the CSS and whatnot isn't in a separate file). This whole thing is a learning exercise.
The connection to my email client works fine, but the problem is the form submits even if all the fields are empty. I don't know if it's ignoring the script, or it's running and just not working, or...
I don't know. I'm missing something, but like I said, I'm learning, so I can't see it for love or money!
Is anyone able to point out what I've done wrong here? :-)
<script>
function validateForm() {
var x = document.forms["myForm"]["fields[first_name]"].value;
var y = document.forms["myForm"]["fields[email]"].value;
var z = document.forms["myForm"]["fields[phone]"].value;
var checkBox1 = document.getElementById("tcpp");
var checkBox2 = document.getElementById("contactConsent");
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Email must be filled out");
return false;
}
if (z == "") {
alert("Phone must be filled out");
return false;
}
if (checkBox1.checked == false) {
alert("Privacy Policy box must be ticked");
return false;
}
if (checkBox2.checked == false) {
alert("Consent box must be ticked");
return false;
}
}
</script>
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
<div data-drip-attribute="description"></div>
<input type="hidden" name="tags[]" value="Tag 1" />
<input type="hidden" name="tags[]" value="Tag 2" />
<input type="hidden" name="tags[]" value="Tag 3" />
<div>
<div>
<span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
</div>
<div>
<span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
</div>
<div>
<span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
</div>
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[read_tc_and_pp]" value="no" />
<input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" /> Privacy policy link goes here
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[consent_to_contact]" value="no" />
<input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" /> Consent blurb goes here
</div>
<div style="padding-top: 5px;">
<input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
</div>
</form>
You can keep the name attributes as they are. The problem was within your document.forms[...] expression. It did not find the expected input elements. As these are given id attributes too it seemed an easy fix to use them as a way of identifying the elements by using document.getElementById(...):
function validateForm() {
var x = document.getElementById("drip-full-name").value;
var y = document.getElementById("drip-email").value;
var z = document.getElementById("drip-phone").value;
var checkBox1 = document.getElementById("tcpp");
var checkBox2 = document.getElementById("contactConsent");
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Email must be filled out");
return false;
}
if (z == "") {
alert("Phone must be filled out");
return false;
}
if (checkBox1.checked == false) {
alert("Privacy Policy box must be ticked");
return false;
}
if (checkBox2.checked == false) {
alert("Consent box must be ticked");
return false;
}
}
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
<div data-drip-attribute="description"></div>
<input type="hidden" name="tags[]" value="Tag 1" />
<input type="hidden" name="tags[]" value="Tag 2" />
<input type="hidden" name="tags[]" value="Tag 3" />
<div>
<div>
<span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
</div>
<div>
<span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
</div>
<div>
<span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
</div>
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[read_tc_and_pp]" value="no" />
<input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" /> Privacy policy link goes here
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[consent_to_contact]" value="no" />
<input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" /> Consent blurb goes here
</div>
<div style="padding-top: 5px;">
<input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
</div>
</form>
I have a uni assignment in which we have to create a simple form and when the Submit button is clicked a paragraph with some text should appear underneath the form.
The problem is that when I click Submit the text only appears for a brief second.
How can I make it stay after the Submit button is clicked and the form is submited?
Here is the code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="form2_css.css">
<script src="script.js"></script>
<title>Mask and IPv4</title>
</head>
<body>
<form id="form1" name="form1" onsubmit="return validateForm()">
<fieldset>
<legend>Mask and IPv4</legend>
<table>
<tr>
<ul>
<td class="firstCol"><label for="ipAdress"><li>IP Adress</li></label></td>
</ul>
<td><input value="ipAdress1" type="number" id="ipAdress1" name="ipAdress1" min ="1" max="999"></td>
<td><input value="ipAdress2" type="number" id="ipAdress2" name="ipAdress2" min ="1" max="999"></td>
<td><input value="ipAdress3" type="number" id="ipAdress3" name="ipAdress3" min ="1" max="999"></td>
<td><input value="ipAdress4" type="number" id="ipAdress4" name="ipAdress4" min ="1" max="999"></td>
</tr>
<tr>
<ul>
<td class="firstCol"><label for="mask"><li>Network Mask</li></label></td>
</ul>
<td><input value="mask1" type="number" id="mask1" name="mask1" min ="1" max="999"></td>
<td><input value="mask2" type="number" id="mask2" name="mask2" min ="1" max="999"></td>
<td><input value="mask3" type="number" id="mask3" name="mask3" min ="1" max="999"></td>
<td><input value="mask4" type="number" id="mask4" name="mask4" min ="1" max="999"></td>
</tr>
<tr>
<td></td>
<td>
<button class="submitButton" type="submit" form="form1" onclick="printToScreen()">Submit</button>
</td>
<td>
<button class="resetButton" type="reset" form="form1">Reset</button>
</td>
</tr>
</table>
</fieldset>
</form>
<p id="binaryPrint"></p>
</body>
</html>
JavaScript:
function printToScreen() {
document.getElementById("binaryPrint").innerHTML = "test!";
}
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(174, 216, 91);
}
fieldset {
width: 60%;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
background-color: lightgreen;
border: 2px solid black;
padding: 20px;
}
legend, label {
font-size: 20px;
}
input {
size: 50%;
}
.firstCol {
padding-right: 100px;
}
button {
padding: 3px
}
The reason for such behaviour is that you're have button type="submit". The default action when you click it is form submit. You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit
To prevent that you can use type="button" instead and then handle the form submission inside the printToScreen function.
I was making a calculator for a game and made a button like this:
<input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is">
When button is clicked, I want to run the cpbCalc() function.
You can find this html code live on http://trial.6te.net/Calculators/cpbCalculatorNew.html
Here is the complete html Code :
<!DOCTYPE html>
<html>
<head>
<title>
Cost Per Battle Calculator
</title>
</head>
<style>
.smaller{
width: 50px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.bigger{
width: 110px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button_is{
width: 110px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 0px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button_is:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #badf6f;
padding:20px;
}
</style>
<body>
<div>
<!-- <label for="fname" id="fn">First Name</label> -->
<!-- <input type="text" id="fname" name="firstname"> -->
<!-- <button onclick="myFunction()">Calculate</button> -->
<table border="0">
<tr>
<td>
<center><img src="http://trial.6te.net/images/gold.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/wood_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/ore_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/gems_S.gif"></img></center>
</td>
</tr>
<tr>
<td>
<input type="text" id="gold_" name="Gold" class="bigger">
</td>
<td>
<input type="text" id="wood_" name="Wood" class="smaller" value="0">
</td>
<td>
<input type="text" id="ore_" name="Ore" class="smaller" value="0">
</td>
<td>
<input type="text" id="mercury_" name="Mercury" class="smaller" value="0">
</td>
<td>
<input type="text" id="sulphur_" name="Sulphur" class="smaller" value="0">
</td>
<td>
<input type="text" id="crystals_" name="Crystals" class="smaller" value="0">
</td>
<td>
<input type="text" id="gems_" name="Gems" class="smaller" value="0">
</td>
</tr>
<tr>
<td>
Durability :<br>
<input type="text" id="currDura_" name="Current_Durability" class="smaller"> /
</td>
<td>
<input type="text" id="maxDura_" name="Maximum_Durability" class="smaller">
</td>
</tr>
<tr>
<td>
Repair Cost :<br>
<input type="text" id="repCost_" name="Repair_Cost" class="bigger">
</td>
</tr>
<tr>
<td>
Smith Efficiency :<br>
<input type="text" id="smithEffi_" name="Smith_Efficiency" class="smaller">
</td>
<td>
Smith Charges :<br>
<input type="text" id="smithCharge_" name="Smith_Charge" class="smaller">
</td>
</tr>
<tr>
<td colspan="7">
<center><input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"></center>
</td>
</tr>
<tr>
<td colspan="7">
<label id="result_"></label>
</td>
</tr>
</table>
</div>
<script language="JavaScript">
<!--
function cpbCalc() {
var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura;
var iniCost, repCost;
var smithEffi, smithCharge;
var se, sc;
var totCostTillNow, costPerBattle = 0, minCPB;
var i;
var repCount = 1;
//Assigning the values
currDura = document.getElementById("currDura_").value;
maxDura = document.getElementById("maxDura_").value;
iniCost = document.getElementById("gold_").value;
repCost = document.getElementById("repCost_").value;
smithEffi = document.getElementById("smithEffi_").value;
smithCharge = document.getElementById("smithCharge_").value;
se = smithEffi / 100;
sc = smithCharge / 100;
tempMaxDura = maxDura;
tempDura = currDura;
totDura = tempDura;
totCostTillNow = parseFloat(iniCost);
costPerBattle = parseFloat(totCostTillNow / totDura);
minCPB = parseFloat(costPerBattle);
optDura = parseInt(tempMaxDura);
for(i=1; i<=maxDura; i++)
{
totCostTillNow += parseFloat(repCost * sc);
tempDura = parseInt(tempMaxDura * se);
totDura += parseInt(tempDura);
costPerBattle = parseFloat(totCostTillNow / totDura);
tempMaxDura -= 1;
if ( minCPB >= costPerBattle )
{
minCPB = parseFloat(costPerBattle);
optDura = parseInt(tempMaxDura);
}
}
document.getElementById("result_").value = eval(minCPB) + " gold at 0/"+ eval(optDura);
return 0;
//alert("minimum cost per battle = " + eval(minCPB) + "at 0/" + eval(optDura));
//-->
}
</script>
</body>
</html>
Here "result_" is a label where I want to provide the final answer.
When I click the button, it should run the function "cpbCalc()" but it doesn't.
Instead it does nothing. Also when I check in Console, it shows no errors.
Can you help me why this is occurring and provide a solution for it?
There are some typos in your script:
never use eval: it's a threat and mainly you do not need it
to convert text values to numbers a way is to add the + in front of value
like +document.getElementById("currDura_").value
avoid division by zero like for totDura. A way can be: (totDura == 0) ? 1 : totDura)
use textContent instead of value property to change the label text
The snippet:
function cpbCalc() {
var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura;
var iniCost, repCost;
var smithEffi, smithCharge;
var se, sc;
var totCostTillNow, costPerBattle = 0, minCPB;
var i;
var repCount = 1;
//Assigning the values
currDura = +document.getElementById("currDura_").value;
maxDura = +document.getElementById("maxDura_").value;
iniCost = +document.getElementById("gold_").value;
repCost = +document.getElementById("repCost_").value;
smithEffi = +document.getElementById("smithEffi_").value;
smithCharge = +document.getElementById("smithCharge_").value;
se = smithEffi / 100;
sc = smithCharge / 100;
tempMaxDura = maxDura;
tempDura = currDura;
totDura = tempDura;
totCostTillNow = parseFloat(iniCost);
costPerBattle = parseFloat(totCostTillNow / (totDura == 0) ? 1 : totDura); // avoid division by zero
minCPB = parseFloat(costPerBattle);
optDura = parseInt(tempMaxDura);
for(i=1; i<=maxDura; i++)
{
totCostTillNow += parseFloat(repCost * sc);
tempDura = parseInt(tempMaxDura * se);
totDura += parseInt(tempDura);
costPerBattle = parseFloat(totCostTillNow / totDura);
tempMaxDura -= 1;
if ( minCPB >= costPerBattle )
{
minCPB = parseFloat(costPerBattle);
optDura = parseInt(tempMaxDura);
}
}
// For labels use textContent instead of value property
document.getElementById("result_").textContent = minCPB + " gold at 0/"+ optDura; // never use eval
return 0;
//alert("minimum cost per battle = " + eval(minCPB) + "at 0/" + eval(optDura));
//-->
}
.smaller{
width: 50px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.bigger{
width: 110px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button_is{
width: 110px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 0px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button_is:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #badf6f;
padding:20px;
}
<div>
<!-- <label for="fname" id="fn">First Name</label> -->
<!-- <input type="text" id="fname" name="firstname"> -->
<!-- <button onclick="myFunction()">Calculate</button> -->
<table border="0">
<tr>
<td>
<center><img src="http://trial.6te.net/images/gold.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/wood_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/ore_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/gems_S.gif"></img></center>
</td>
</tr>
<tr>
<td>
<input type="text" id="gold_" name="Gold" class="bigger">
</td>
<td>
<input type="text" id="wood_" name="Wood" class="smaller" value="0">
</td>
<td>
<input type="text" id="ore_" name="Ore" class="smaller" value="0">
</td>
<td>
<input type="text" id="mercury_" name="Mercury" class="smaller" value="0">
</td>
<td>
<input type="text" id="sulphur_" name="Sulphur" class="smaller" value="0">
</td>
<td>
<input type="text" id="crystals_" name="Crystals" class="smaller" value="0">
</td>
<td>
<input type="text" id="gems_" name="Gems" class="smaller" value="0">
</td>
</tr>
<tr>
<td>
Durability :<br>
<input type="text" id="currDura_" name="Current_Durability" class="smaller"> /
</td>
<td>
<input type="text" id="maxDura_" name="Maximum_Durability" class="smaller">
</td>
</tr>
<tr>
<td>
Repair Cost :<br>
<input type="text" id="repCost_" name="Repair_Cost" class="bigger">
</td>
</tr>
<tr>
<td>
Smith Efficiency :<br>
<input type="text" id="smithEffi_" name="Smith_Efficiency" class="smaller">
</td>
<td>
Smith Charges :<br>
<input type="text" id="smithCharge_" name="Smith_Charge" class="smaller">
</td>
</tr>
<tr>
<td colspan="7">
<center><input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"></center>
</td>
</tr>
<tr>
<td colspan="7">
<label id="result_"></label>
</td>
</tr>
</table>
</div>
You have to replace :
document.getElementById("result_").value = eval(minCPB) + " gold at 0/"+ eval(optDura);
With :
document.getElementById("result_").innerHTML = eval(minCPB) + " gold at 0/"+ eval(optDura);
The tag does't have a "value" attribut. It's why it's not working but you don't have errors.
you can use
If the value will be retruned or not
The debugger is your friend.
A couple things:
First, when you read a value from an input box that you want to use as a number in your script, you need to convert it to a number. For example:
currDura = document.getElementById("currDura_").value;
should be:
currDura = parseInt(document.getElementById("currDura_").value);
In production code this also needs to perform error checking (users may enter non-numeric values), but this is fine for testing.
I see that you are parsing some of the values later on in the code, but you're also using some of them before converting to numbers (e.g., `se = smithEffi / 100').
Second, you really should avoid using eval. If you have converted the input values to numbers, this should not be necessary.
Finally, value is not the correct property of the label. My recommendation is to use jQuery and assign the content like so:
$('#result_').text('text to show in label');
You can use the innerHTML property, but I typically don't recommend this because you may need to deal with encoding the text.
You can assign text using pure JavaScript, but it's a bit more involved due to potential cross-browser issues. See Cross-browser innerText for setting values for some examples of how to do this.
I have two problems:
1- I need to enter more than one question in ContentQue field. First click on "Add New Question" button then enter a question, click OK, show the data, then again click on "Add New Question" button, but in this time the input is not shown?
2- I want to force the user to choose one module from select.
Thanks in advanced
<head>
<meta charset="utf-8">
<title>Add New Item</title>
<style>
#myquelist
{
overflow-y:scroll;
}
// To force the user enter data
.btn
{
background-color:#336;
color:#CC6;
border-radius:10px;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;
opacity:0.5;
}
.txt
{
background-color:#09F;
color:#009;
border-radius:10px;
}
.err
{
color:#F00;
}
</style>
<!-- Java Script-->
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnquestion').click(function () {
$('#myquelist').hide('fast');
$('#Type3').show('fast');
});
$('#btnOK').click(function () {
var a=$('#ContentQue').val();
var b=$('#qlist').val();
var c=b+"<br>"+a;
$('#qlist').val(c);
$('#ContentQue').val('');
document.getElementById("Type3").style.height="150px";
document.getElementById("Type3").innerHTML=c;
$('#myquelist').show('fast');
});
$('#myquelist').hide('fast');
$('#Type3').hide('fast');
$('#Type2').hide('fast');
$('#ExamType1').click(function () {
$('#Type2').hide('fast');
$('#Type3').hide('fast');
$('#Type1').show('fast');
});
$('#ExamType2').click(function () {
$('#Type1').hide('fast');
$('#Type3').hide('fast');
$('#Type2').show('fast');
});
$('#ExamType3').click(function () {
$('#Type1').hide('fast');
$('#Type2').hide('fast');
alert("A");
//$('#myquelist').show('fast');
$('#Type3').show('fast');
});
// To force the user enter data in text box
$(" :text" ).addClass("txt");
$("p").hide();
$("#PageBody input:text select").blur(function()
{
if(!$(this).val())
{
$(this).parent("div").children("p").show();
$(this).parent("div").children("p").addClass("err");
}
else
{
$(this).parent("div").children("p").hide();
}
});
});
</script>
</head>
<body id="PageBody">
<header><h2>New Exam</h2></header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th><b>Assignment Title :
<td><div><input type="text" name="ExamTitle" autofocus ><p>Please Exam Title</p></div></td>
</tr>
<tr>
<th><b>Exam Type</b></th>
<td>
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked">File
<input type="radio" name="ExamType" value="Text" id="ExamType2">Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3">Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="myquelist">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="Type3">
<input type="text" id="ContentQue" name="ContentQue" >
<button type="button" id="btnOK" name="OK" >OK</button>
</div>
<input type="hidden" id="qlist" name="qlist">
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl" >
<option selected="selected" disabled="disabled" >Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px"; value="Save" />
</td>
</tr>
</table>
</form>
<?php
$qlist = $_POST["qlist"];
?>
</body>
</html>
This needed a fair amount of work. I had to clean up a few HTML issues and change the logic some.
First, much easier to use an Array to store the various questions. I would pass the array to your form handler, but I populated the qlist as you were shooting for.
Second, to show the questions, I used a List. Easier to work with later.
Third, I wrapped the different parts so they are easier to hide/show.
Fourth, I added in verification that a user entered a question when clicking ok and when they submit the form, to ensure they selected a Module.
HTML
<header>
<h2>New Exam</h2>
</header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th width="135px"><b>Assignment Title : </b></th>
<td>
<div>
<input type="text" name="ExamTitle" autofocus />
<p>Please Exam Title</p>
</div>
</td>
</tr>
<tr>
<th height="80px"><b>Exam Type :</b></th>
<td valign="top">
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked" />File
<input type="radio" name="ExamType" value="Text" id="ExamType2" />Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3" />Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="Type3">
<div id="addNew">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="addQuestion" style="display: none;">
<input type="text" id="ContentQue" name="ContentQue">
<button type="button" id="btnOK" name="OK">OK</button>
</div>
<div id="showQuestions" style="display: none;">
</div>
<input type="hidden" id="qlist" name="qlist">
</div>
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl">
<option selected="selected" disabled="disabled">Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px;" value="Save" />
</td>
</tr>
</table>
</form>
CSS
.btn {
background-color: #336;
color: #CC6;
border-radius: 10px;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
opacity: 0.5;
}
.txt {
background-color: #09F;
color: #009;
border-radius: 10px;
}
.err {
color: #F00;
}
#Type3 ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 150px;
overflow: auto;
}
#Type3 ul li {
list-style: none;
}
JQUERY
// Set Globals
var ql = [];
$(document).ready(function() {
// Set View State
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
// Set Action Functions
$('#btnquestion').click(function() {
$('#addNew').hide();
$('#addQuestion').show();
$("#ContentQue").focus();
});
$('#btnOK').click(function() {
var q;
q = $('#ContentQue').val();
if (q == "") {
alert("Please enter a Question.");
$("#ContentQue").focus();
return false;
}
ql.push(q);
$('#qlist').val(ql.join(","));
$('#ContentQue').val('');
if (ql.length > 0) {
var qtext = $("<ul>");
$.each(ql, function(i, v) {
qtext.append("<li id='que-" + i + "'>" + v + "</li>");
});
$("#showQuestions").html(qtext);
}
$("#addQuestion").hide();
$('#showQuestions').show();
$("#addNew").show();
});
$("#form1 input[name='ExamType']").click(function() {
var pick = $(this).val();
switch (pick) {
case "File":
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
break;
case "Text":
$("#Type1").hide();
$("#Type2").show();
$("#Type3").hide();
break;
case "Questions":
$("#Type1").hide();
$("#Type2").hide();
$("#Type3").show();
break;
}
});
});
$("#form1").submit(function(e){
e.preventDefault();
if($("#Modl option").eq(0).is(":selected")){
alert("Please select a Module.");
return false;
}
return true;
});
Working Example: http://jsfiddle.net/Twisty/ax2zds1o/6/
Things you may want to consider:
A button to remove a question from the list
How many questions do you want to allow? 100? 200? 1000? How will you pass a large number of questions?
Allowing the user to arrange the order of the questions in the list before submitting
Here is the HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%>
<script type="text/javascript">
$(document).ready(function(){ /* make sure the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it again */ $('div#contact-form').slideUp(); } }
);</script>
</head>
<body>
<div id="nav">
<div id="navigation-primary">
<ul>
<li id="contact-button"><a href="javascript:;" onmousedown="toggleSlide('quickcontact');">
<span>Contact</span></a> </li>
</ul>
<h3>
Contact US</h3>
<div id="contact-form" style="display: none; overflow: hidden; height: 300px;">
<form id='freeform' method="post" action="http://WebDev.com/">
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="URI" value="index" />
<input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" />
<input type="hidden" name="status" value="open" />
<input type="hidden" name="return" value="consultation/thank_you" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="http://professional-painters.com/" />
<input type="hidden" name="form_name" value="Quick" />
<input type="hidden" name="id" value="freeform" />
<input type="hidden" name="params_id" value="136390" />
<input type="hidden" name="site_id" value="1" />
</div>
<fieldset style="padding: 7px;">
<table id="quickcontact-in">
<tr>
<td>
<input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';"
onblur="if (this.value == '') this.value = 'Name';" />
</td>
</tr>
<tr>
<td>
<input tabindex="2" class="field" type="text" name="email" value="Email address"
onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" />
</td>
</tr>
<tr>
<td>
<input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)"
onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" />
</td>
</tr>
<tr>
<td>
<textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea>
</td>
</tr>
<tr>
<td>
<p>
Please enter these letters:
<br />
<img src="http://professional-painters.com/images/captchas/1297129344.1793.jpg" width="140"
height="30" style="border: 0;" alt=" " /><br />
<input tabindex="5" class="field" type="text" name="captcha" size="20" maxlength="20" /></p>
</td>
</tr>
<tr>
<td>
<div id="submit">
<input tabindex="6" type="submit" name="submit" value="Send Request" />
</div>
<p class="tiny" align="right">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
#navigation-primary {
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/
background-color: Red;
left: 0;
position: absolute;
top: 46px;
z-index: 1;
}
#nav {
height: 34px;
width: 878px;
}
#nav-contact a {
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/
background-color: Green;
width: 109px;
}
#quickcontact {
background: none repeat scroll 0 0 #666449;
border-left: 2px solid #3D352B;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0;
text-align: left;
top: 75px;
width: 245px;
z-index: 1000;
}
#quickcontact-in a {
color: #FFFFFF;
}
#quickcontact fieldset {
border: medium none;
}
#quickcontact-in .field {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
padding: 2px;
width: 190px;
}
#quickcontact-in .txtField {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
display: block;
float: left;
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
height: 90px;
margin: 5px 0 7px;
outline: medium none;
padding: 2px;
width: 190px;
}
Ok, I this it would be smart of you to use jquery and do it yourself. It's not that hard at all and the JS code is very short and easy.
First, you need to style the contact form and the menu so it looks the same way as it does when the contact form is expanded. I'm guessing you can actually use the code you already have. But I understand your biggest problem is with the javascript code.
Make sure that the anchor tag has the id: id="contact_button" and that the form is wrapped within a div with the id="contact-form"
So the HTML needs to be something like:
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="/contact-form">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
...
</form>
</div>
Then, to make the contact form show, you need to put jquery on your html page somewhere and you need to place the following code within another .js file or within tags:
$(document).ready(function(){
/* make sure the contact form is hidden when the page loads: */
$('div#contact-form').hide();
$('a#contact-button').toggle(function(){
/* slides the contact form down and shows it */
$('div#contact-form').slideDown();
}, function () {
/* hides it again */
$('div#contact-form').slideUp();
}
}
That's it. As for the code to actually send the email using .net you can maybe follow this tutorial:
http://www.aspnettutorials.com/tutorials/email/email-aspnet2-vb.aspx
I've not tried this, so I'm not certain about it, but it's probably right:
sfHover is defined thusly:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
Take a close look at this line:
document.getElementById("nav")
It's looking for an element with an id of nav - in your "prototype HTML", you do not have an element with that id.
You don't appear to have any need for sfHover in your "prototype HTML", so you should just get rid of the entire function. If you do need it, you need to change nav into an id you actually have in your HTML (or change an id in your HTML to nav).