I have browsed the forum and tried afew things mentioned in these links:
Check if dropdown's selected option is not the first with JavaScript
Get index of select option in an optgroup with jquery
I am still rather basic in my knowledge of Javascript, mostly just using it for form actions. I’ve never used jQuery (yet), and from what I’ve read I don’t need to for what I’m doing (so please no jQuery solutions!)
What I am trying to do is have content show based on which button/option is clicked/selected.
Step 1 works fine (it just shows the dropdown box when the “not a student” button is clicked. No problems there.
Step 2 I am currently stuck on. (And I know there will be problems with step 3, but I have not got to looking at them yet).
Step 2 needs to show a form based on whether an option in the dropdown was selected. Possibly (I am not sure yet) I will require to have a different form for each option selected (but I think once i have the base code that i can work this out using “if” and “else”).
Here is my HTML document, with the JS coding in the head.
<head>
<title>Tims Form</title>
<style type="text/css">
.errormsg {
color: red;
font-style: italic;
display:none;
}
#interest {
display:none;
}
#msgform {
display:none;
}
</style>
<script type="text/javascript">
function reveal()
{
document.getElementById("interest").style.display="block";
}
function hide()
{
document.getElementById("interest").style.display = "none";
}
function showForm()
/* to display form only when dropdown selection made and submit-button pressed */
{
var sel=document.getElementById('interest_choice');
if (sel.options[sel.selectedIndex].value == "0")
{
document.getElementById("msgform").style.display = "block";
document.getElementById("selection_error").style.display = "none";
}
else { document.getElementById("msgform").style.display = "none";
document.getElementById("selection_error").style.display = "block";
}
}
function checkForm()
{
var is_valid=true;
var email=document.getElementById("email");
/* not a blank field validation */
if (document.getElementById("firstname").value == "")
{
document.getElementById("firstname_error").style.display = "block";
is_valid=false;
}
else { document.getElementById("firstname_error").style.display = "none"; }
if (document.getElementById("lastname").value == "")
{
document.getElementById("lastname_error").style.display = "block";
is_valid=false;
}
else { document.getElementById("lastname_error").style.display = "none"; }
if (document.getElementById("subject").value == "")
{
document.getElementById("subject_error").style.display = "block";
is_valid=false;
}
else { document.getElementById("subject_error").style.display = "none"; }
if (document.getElementById("message").value == "")
{
document.getElementById("message_error").style.display = "block";
is_valid=false;
}
else { document.getElementById("message_error").style.display = "none"; }
/* email validation */
if (email.value =="")
{
document.getElementById("email_blank").style.display = "block";
is_valid=false;
}
else { document.getElementById("email_blank").style.display = "none"; }
if (email.value.indexOf("@") == -1)
{
document.getElementById("email_valid").style.display = "block";
is_valid=false;
}
else { document.getElementById("email_valid").style.display = "none"; }
if (email.value.indexOf("@") ==0)
{
document.getElementById("email_valid").style.display = "block";
is_valid=false;
}
else { document.getElementById("email_valid").style.display = "none"; }
if (email.value.lastIndexOf(".")<email.value.indexOf("@") )
{
document.getElementById("email_blank").style.display = "block";
is_valid=false;
}
else { document.getElementById("email_blank").style.display = "none"; }
if (email.value.lastIndexOf(".")>((email.value.length*1)-3))
{
document.getElementById("email_valid").style.display = "block";
is_valid=false;
}
else { document.getElementById("email_valid").style.display = "none"; }
/* Phone data must be numeric validation */
if (document.getElementById("phone").value="")
{
document.getElementById("phone_error").style.display = "block";
is_valid=false;
}
else { document.getElementById("phone_error").style.display = "none"; }
if (isNaN(document.getElementById("phone").value))
{
document.getElementById("phone_error").style.display = "block";
is_valid=false;
}
else { document.getElementById("phone_error").style.display = "none"; }
return is_valid;
}
</script>
</head>
<body>
<!-- onclick to show the div with id="interest" when Not A Student is selected -->
I am: <br/>
<button id="student" onclick="hide()">A Student</button>
<button id="not_student" onclick="reveal()">Not A Student</button>
<!-- if not a student -->
<div id="interest">
What area are you interested in studying?
<!-- dropdown (select) list with option groups
need a submit button to return the value before the form will show?
-->
<form>
<select id="interest_choice">
<optgroup label="Arts">
<option value="arts">Arts degree</option>
</optgroup>
<optgroup label="Business/Economics">
<option value="be_undergrad">My first degree (undergraduate)</option>
<option value="be_postgrad">Postgraduate</option>
</optgroup>
<optgroup label="Science">
<option value="science">Science degree</option>
</optgroup>
<optgroup label="Human Sciences">
<option value="hs_undergrad">Undergraduate</option>
<option value="psych_postgrad">Postgraduate Psychology</option>
<option value="ling_postgrad">Postgraduate Linguistics</option>
<option value="edu_postgrad">Postgraduate Education</option>
</optgroup>
</select>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>
</form>
</div>
<!-- form -->
<div id="msgform">
<form onsubmit="return checkForm();">
<fieldset>
<label>
First Name:
<input type="text" name="firstname" id="firstname">
<div class="errormsg" id="firstname_error">Please enter your first name</div>
</label>
<br/>
<label>
Last Name:
<input type="text" name="lastname" id="lastname">
<div class="errormsg" id="lastname_error">Please enter your last name</div>
</label>
<br/>
<label>
Email:
<input type="text" name="email" id="email">
<div class="errormsg" id="email_blank">Please enter your email address</div>
<div class="errormsg" id="email_valid">Please enter a valid email address</div>
</label>
<br/>
<label>
Phone:
<input type="text" name="phone" id="phone">
<div class="errormsg" id="phone_error">Please enter a numeric phone number. Do not include ().</div>
</label>
<br/>
<label>
Subject: (Please only submit one question per enquiry. You can submit multiple enquiries.)<br/>
<input type="text" name="subject" id="subject">
<div class="errormsg" id="subject_error">Please enter a subject</div>
</label>
<br/>
<label>
Message:
<textarea name="message" id="message"></textarea>
<div class="errormsg" id="message_error">Please enter a message</div>
</label>
</fieldset>
<input type="submit" value="Submit Form">
</form>
</div>
</body>
Currently when I click “Enquiry Form” button it just refreshes the page back to the first buttons.
And explanation and help would be appreciated!
Thanks.
Two things…
Firstly, with your button that triggers showForm, as in:
put it outside of the form element, as in:
The button automatically submits the form when it’s within the form tag, therefor it refreshes the page.
Secondly in your checkForm function, the value you are checking seems to be wrong… Try this instead: