storing info onto a form page on the next page - javascript

Trying to work out how how i can store information from one web page into a form on an apply page.
basically the first page has 2 jobs that a user can apply for, both with a unique 5 digit job reference number specific to that job.
the user is able to click on that code which jumps to the same application page however that specific job number is saved within the form above.
i understand javascript is needed but not sure on how to use it.
a hand with steps would be great.
i have some example code bellow..
Jobs page
<ul>
<li><strong>Job Reference Number: </strong>wru01</li>
<li><strong> Position Title:</strong> CSS Website Designer</li>
<li><strong> Salary range:</strong> $50-60k gross per year</li>
<li><strong>Job Description:</strong> working and intergrating
with the HTML and Javascript team as well as with our clients in
designing
their asthetics of their website. The position will also entaile
research
into new CSS updates that can give WRU a competitive edge over
others</li>
<li><strong>Head of CSS (report to):</strong> John Striger </li>
<li><strong> Key responsibilities:</strong>
<ol>
<li>future research and updates of CSS</li>
<li>working 1 on 1 with clients</li>
<li>working with Html and Javascript teams to reach our company
goals</li>
<li>Creating CSS for customers and designing their website</li>
</ol>
</li>
<li><strong> Required Skills:</strong>
<ol>
<li> have passed Website development at uni</li>
<li> have a portfolio of at least 5 CSS website
designs</li>
<li> have over 2 years experience of working at a web
company</li>
<li> Amazing people skills</li>
</ol>
APPLICATION PAGE
<form id=form action=https://mercury.swin.edu.au/it000000/formtest.php
method="post">
<fieldset style=width:50%>
<legend> Personal Information:</legend>
<label> First Name:
<input type="text" name="firstname" pattern="^[a-zA-Z ]+$"
required="required" maxlength="20"/></label>
<br/><br/>
<label> Last Name:
<input type="text" name="lastname" pattern="^[a-zA-Z ]+$"
required="required" maxlength="20"/>
</label>
<br/><br/>
<label>Date of birth: <input type="text" name="birth date"
placeholder="dd/mm/yyyy" maxlength="10" pattern="\d{1,2}\/\d{1,2}\/\d{4}"
required="required"/></label>
<br/><br/>
</fieldset>
<fieldset style=width:50%>
<legend> Gender:</legend>
<label>
<input type="radio" name="gender" value="Male" checked="checked"
/>Male</label>
<label>
<input type="radio" name="gender" value="Female" />Female</label>
<br/><br/>
</fieldset>
<fieldset style=width:50%>
<legend>Address</legend>
<label> Street Address:
<input type="text" name="address" required="required" maxlength="40"/>
</label>
<br /><br />
<label> Suburb/Town:
<input type="text" name="suburb" required="required" maxlength="40"
pattern="^[a-zA-Z ]+$"></label>
<br/><br/>
<label> Postcode:
<input type="text" name="postcode" required="required" pattern="[0-9]
{4}"/></label>
<br/><br/>
<label> State:
<select name="rank" id="state">
<option disabled selected value >Please Select Your State</option>
<option value="Vic" >Vic</option>
<option value="NSW" >NSW</option>
<option value="QLD" >QLD</option>
<option value="NT" >NT</option>
<option value="WA" >WA</option>
<option value="SA" >SA</option>
<option value="TAS">TAS</option>
<option value="ACT">ACT</option>
</select>
</label>
<br /> <br />
<label> Email Address
<input type="email"
placeholder="Enter your email">
</label>
<br /><br />
<label> Phone Number:
<input type="text" name="phonenumber" required="required"
pattern="[0-9 ]{8,12}"/></label>
</fieldset>
<fieldset style=width:50%>
<legend>Job Application Information: </legend>
<label> Job Reference Number:
<input type="text" name="refnumber" required="required" pattern="[a-
zA-Z0-9]{5}"/></label>
<br /><br />
<label>Skill set:</label>
<br />
<label><input type="checkbox" name="skill[]" value="CSS"
checked="checked"/>CSS</label>
<label><input type="checkbox" name="skill[]" value="HTML"
/>HTML</label>
<label><input type="checkbox" name="skill[]" value="JavaScript"
/>JavaScript</label>
<label><input type="checkbox" name="skill[]" value="management"
/>management experience</label>
<label><input type="checkbox" name="skill[]" value="PHP"
/>PHP</label>
<label><input type="checkbox" name="skill[]" value="other" />other
skills (please list bellow)</label>
<br/><br/>
<label>Other Skills:</label>
<textarea rows="4" cols="50" name="otherskills" placeholder="Enter
any other skills that would be usefull for the job..."></textarea>
</fieldset>
<p>
<button type="submit" value="submit">Submit</button>
<button type="reset" value="submit">Reset</button>
</p>
</form>

Try below
Job page: Add a link anchor tag on job reference number
<li><strong>Job Reference Number: </strong>wru01</li>
Form page: HTML
<input id="refnumber" type="text" name="refnumber" required="required" />
Form page: Add Javascript
<script type="text/javascript">
window.onload=function(){
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("refnumber");
document.getElementById("refnumber").value=c;
}
</script>

Related

Javascript is not not working due to unknown reason

I am using a custom optin form. Here is the code
<div class="form fix">
<p class="form-text">Fill This Out and See Your<br>Timeshare Report</p>
<form name="contactform" action="mail-script.php" method="POST">
<label for="fname">First Name:
<input type="text" name="fname" id="fname" />
</label>
<br>
<label for="lname">Last Name:
<input type="text" name="lname" id="lname" />
</label>
<br>
<label for="email">Email Address:
<input type="text" name="email" id="email" />
</label>
<br>
<label for="phone">Phone Number:
<input type="text" name="phone" id="phone" />
</label>
<br>
<label for="phone">Alternate Phone:
<input type="text" name="phone" id="aphone" />
</label>
<br>
<label for="resort">Resort Name:
<input type="text" name="resort" id="resort" />
</label>
<br>
<label for="amount">Amount Owed? $:
<input type="number" name="amount" id="amount" />
<p style="font-size: 12px !important;margin-top: -14px;padding-right: 30px;text-align:right;">If Paid Off Leave Zero, Else Put Amount</p>
</label>
<br>
<div class="checkbox">
<div class="check-text fix">
<p>I'm Considering To</p>
</div>
<div class="check-one fix">
<input type="checkbox" name="call" id="" value="sell" />Sell It
<br>
<input type="checkbox" name="call" id="" value="buy" />Buy It
<br>
<input type="checkbox" name="call" id="" value="rent " />Rent It
</div>
<div class="check-two fix">
<input type="checkbox" name="call" id="" value="cancel" />Cancel Mortgage
<br>
<input type="checkbox" name="call" id="" value="ownership" />End Ownership
<br>
<input type="checkbox" name="call" id="" value="give" />Give It Back
</div>
</div>
<p class="captcha">
<img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg'>
<br>
<label for='message'>Enter the code above here :</label>
<br>
<input id="6_letters_code" name="6_letters_code" type="text">
<br> <small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
</p>
<input id="submit" type="submit" value="" />
<p class="submit-text">Ensure all fields are completed and correct, allowing you more benefits, while preventing abuse of our data.</p>
</form>
</div>
</div>
I want to add a popup javascript to show success message when someone submits the form , I am using this code for it
$('form').on('submit',function(){
alert('submitted');
});
But due to unknown reason , this code is not working , Here is the page url
http://timesharesgroup.com/sell/index.html
P.S My goal is to show a success message to the user when he submits the form , I thought javascript was an easy method but if You can comeup with a better alternative , I shall be really grateful
Currently the form works like this:
User submits
Page refreshes for him
I get an email with the submitted data
**********UPDATE*****************
The thing that you have used is jQuery and not JavaScript. For this to work you will need to include jQuery.js in your head section. Add the following in your <head> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
If you want to use JavaScript, you can do the following change:
Original: <input id="submit" type="submit" value="" />
Modified: <input id="submit" type="submit" onclick="alert("success");" value="" />

Copy to clipboard with label and content

How to copy to clipboard code but not just copy i need the label included?
Like example:
SESA461290
Name Shin Abbas
Callback +639087614***
I'm a newbie and this is the first time i'm doing this
<head>
<title>Shin's Call Template</title>
</head>
<body>
<div class="form-style-2">
<form action="" method="get">
<div class="form-style-2-heading">Shin's Template
<label for="INtemp"><select name="INtemp" id="INtemp" class="temp-options">
<option value="" style="display:none">Menu</option>
<option value="1">ADP password reset</option>
<option value="20">Autotime password reset</option>
<option value="2">AMAPS password reset</option>
<option value="3">Lotus Notes Password reset</option>
<option value="4">Q2C/EQM password reset</option>
<option value="5">SAP password reset</option>
<option value="17">Windows password reset</option>
<option value="6" class="INql" disabled>---Common Issues----</option>
<option value="7">Box device security issue</option>
<option value="19">Inquiry Call</option>
<option value="8">Laptop Issue</option>
<option value="9">Network drive issue</option>
<option value="16">Outlook conenctivity issue</option>
<option value="18">Misrouted</option>
<option value="10">PING ID unpairing device</option>
<option value="11">Pulse secure (unable to login)</option>
<option value="12">Pulse secure installation</option>
<option value="13">Unable to login on Windows</option>
<option value="14">Windows locked out</option>
<option value="15">Windows trust relatinship issue</option>
</select></label>
</div>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<label><input class="INNewExec" onclick="openNew();" type="button" value="New" /></label>
<!-- New Button -->
<label><span>&nbsp</span><input type="button" value="Reset" onclick="resetPage();" /></label>
<!-- Reset Button -->
<label><span>&nbsp</span><input type="submit" onclick="return false;" class="INSubmitExec" value="Submit" /></label>
<!-- Submit Button -->
<br>
<br>
<!-- below codes are for the LOB radio buttons Dist(distributor) SE (SE employee) Ext (External)-->
<label><span>Clients</span>
<input type="radio" name="INlob" id="checkboxDist" value="Dist-client" class="input-radio" />
<label for="checkboxDist" class="checkbox-label-Dist">Distributor</label>
<b>&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp</b>
<input type="radio" name="INlob" id="checkboxSE" value="SE-LOB" class="input-radio" />
<label for="checkboxSE" class="checkbox-label-SE">SE</label>
<b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp</b>
<input type="radio" name="INlob" id="checkboxExt" value="Ext" class="input-radio" />
<label for="checkboxExt" class="checkbox-label-Ext">External</label>
<!-- below codes are for the Severity radio buttons -->
<br>
<br>
<label><span>Severity</span>
<input onClick="showMIM(1)" type="radio" name="INsev" id="radioCrit" value="Critical P1" class="input-radio" /> <label for="radioCrit" class="radio-label-Crit">Critical- P1</label>
<input onClick="showMIM(0)" type="radio" name="INsev" id="radioHigh" value="High P2" class="input-radio" /> <label for="radioHigh" class="radio-label-High">High-P2</label>
<input onClick="showMIM(0)" type="radio" name="INsev" id="radiomed" value="Medium P3" class="input-radio" /> <label for="radioMed" id="radio-label-Med3" class="radio-label-Med">Medium-P3</label></label>
<br><br><br><br><br>
<label for="INname"><span>SESA</span><input type="text" class="input-field" name="INname" value="" id="INname"size="40" /></label><label><input type="checkbox" name="INvip" id="INvip" value="VIP" class="input-checkbox"><b>VIP</b></label>
<!-- VIP checkbox -->
<br>
<label for="INempid"><span>NAME</span><input type="text" class="input-field" name="INempid" id="INempNam" value="" size="40" /></label>
<br>
<label for="INloc"><span>CALLBACK</span><input type="text" class="input-field" name="INloc" value="" id="INCall" size="40" /></label>
<br>
<label for="INclient"><span>EMAIL</span><input type="text" class="input-field" name="INclient" id="IN" value="" size="40" /></label>
<br>
<label for="INphone"><span>Phone Number</span><input type="text" class="input-field" name="INphone" id="INphone" value="" size="40" /></label>
<br>
<label for="INemail"><span>RELATED#</span><input type="text" class="input-field" name="INemail" value="" id="INemail" size="40" /></label>
<br>
<label for="INbrief"><span>LOCATION</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
<br>
<br>
<label for="INbrief"><span>Application name:</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
<br>
<label for="INbrief"><span>No.of Affected Users</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
<br>
<br>
<label for="INempid"><span style="width:100px; text-align:LEFT;">What is the problem?</span><input type="text" class="input-field" name="INempid" id="INempid" value="" size="40" /></label>
<br>
<label for="INloc"><span style="width:100px; text-align:LEFT;">When did the issue begin?</span><input type="text" class="input-field" name="INloc" value="" id="INloc" size="40" /></label>
<br>
<label for="INclient"><span style="width:140" /></label>
<br>
<label for="INphone"><span style="width:100px; text-align:LEFT;">Error message</span><input type="text" class="input-field" name="INphone" id="INphone" value="" size="40" /></label>
<br>
<label for="INemail"><span style="width:100px; text-align:LEFT;">Last time it worked properly</span><input type="text" class="input-field" name="INemail" value="" id="INemail" size="40" /></label>
<br>
<label for="INbrief"><span style="width:100px; text-align:LEFT;">any changes to your PC since the last time it worked properly</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
<br>
<label for="INbrief"><span style="width:100px; text-align:LEFT;">Have you changed your password recently:</span><input type="text" class="input-field" name="INbrief" id="INbrief" value="" size="40" /></label>
Please refer to this similar question:
"How do I copy to the clipboard in JavaScript?".
This page has many answers explaining how to copy text to your clipboard using both JavaScript and text-areas.
Best methods for your issue:
Method 1: This method uses an HTML text-area and button connected to an Event Listener (addeventlistener). This is most likely the best choice for you.
Source ​ - ​ ​ From: Dean Taylor ​ ​ Original: here
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
Method 2: This method uses a function as apposed to an HTML text area and button.
Source ​ - ​ ​ From: Bart Burg ​ ​ Original: here
var copyToClipboard = function(textToCopy){
$("body")
.append($('<input type="text" name="fname" class="textToCopyInput"/>' )
.val(textToCopy))
.find(".textToCopyInput")
.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
alert('Text copied to clipboard!');
} catch (err) {
window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
}
$(".textToCopyInput").remove();
}
PS: I am sorry if my note offended or angered you. After looking over it a second time, I realised that someone could take it the wrong way. I hope you understand.

Need Very Basic Javascript Form Validation for Name and Email Field

I am trying to validate few fields in my form, I dont want to change anything becasue everything is link to each other and I dont want to mess anything. Basically all I want is to validate name and email field and Once successful then I will move to other fields. I try to do it with below javascript code but it didnt work for me.
NOTE: I need to do it with Javascript not Jquery, and I need a basic Javascript not complicated because I am completely Novice to Javascript. ANy help will be appreciated.
This Is Fiddle Link
var frmvalidator = new Validator("form1");
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20",
"Max length for FirstName is 20");
frmvalidator.addValidation("LastName","req");
frmvalidator.addValidation("LastName","maxlen=20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
<h1> Contact Form</h1>
<form id="form1" class="campus" method="post">
<div class="form_description">
<h2>User Feedbacks</h2>
<p>Please give us your feedbacks.</p>
</div>
<ul>
<li>
<label class="description" >Name*</label>
<input type="text" name="FullName" id="FirstName" maxlength="50" size="8" />
<label for="FirstName"> First </label>
<input type="text" name= "user" id="LastName" maxlength="50" size="8"/>
<label for="LastName"> Last </label>
</li>
<li >
<label for="Email" class="description">Email*:</label>
<input type="email" name="Email" id="Email" maxlength="55"/>
</li>
<li>
<label class="description" >Reason for Contacting:</label>
<input name="choice" id="Hospitality" type="checkbox" value="1"/>
<label for="Hospitality"> About Website </label>
<input name="choice" id="Technology" type="checkbox" value="1" />
<label for="Technology"> About Deals </label>
<p class="guidelines" ><small>Reason for contacting. Please select all that are applicable</small></p>
</li>
<li>
<label class="description" >Will you Recommend us to anyone.</label>
<select>
<option value="" ></option>
<option value="1" >Yes</option>
<option value="2" >No</option>
<option value="3" >Maybe</option>
</select>
</li>
<li>
<label for="AnyQuestions" class="description" >Any Questions Or Suggessions </label>
<textarea name="AnyQuestions" id="AnyQuestions" class="element textarea large"></textarea>
</li>
<li>
<label class="description" >Do You want to receive special offers. Please Select One</label>
<input type="radio" name="opinion" value="1" />
<label>Yes</label>
<input type="radio" name="opinion" value="2" />
<label> No </label>
</li>
<li class="buttons">
<input type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
you have to include the definition of the "Validator" class :
function Validator(frmname, alertMethod) {.....}
Here is a working Validator class copied on top of your code:
https://jsfiddle.net/8qsLvx54/1/
the code is from http://www.rockcliffepark.com/rp/CONTACT_validator.js (from a google search), you may want to try to find the origin of this code…
JavaScript does not come with Validator functions that help validate a form.
Instead you could build one or download one like you would jQuery, these extra pieces of code are called Libraries.
Right now the browser does not understand what Validator is, so it results in an error. But if you include something like Parsley or Verify.js and write some code according to their documentation you can archive the result you want.
Without hiding the complexity away in a JavaScript library or framework, you won't get a simple (as in, short) JavaScript solution for what you want. But how about a no-JavaScript solution? Most of what you want can be done with plain HTML5.
You've already had the maxlength attribute in use, just set to different values than what you tried to validate in Javascript. Set them to 20 for the name parts and to 50 for the email address and users won't even be able to enter more characters.
<input type="text" name="FullName" id="FirstName" maxlength="20" size="8"/>
Add the required attribute and any modern browser will highlight if they've entered something that doesn't match the type attribute's value.
<input type="text" name="FullName" id="FirstName" maxlength="20" size="8" required/>
For the email field you've already used type="email" so you're almost all set just add required there, too.
<input type="email" name="Email" id="Email" maxlength="50" required/>
Please note that what is considered to constitute a valid email address differs from browser to browser. (See http://www.the-art-of-web.com/html/html5-form-validation/ section 'INPUT type="email"')
To get some custom error message, you can set the title attribute:
<input type="text" name="FullName" id="FirstName" maxlength="20" size="8" title="Please enter your First Name (20 characters max.)" required />
(Doesn't work in the StackOverflow snippet, don't know why exactly.)
<h1> Contact Form</h1>
<form id="form1" class="campus" method="post">
<div class="form_description">
<h2>User Feedbacks</h2>
<p>Please give us your feedbacks.</p>
</div>
<ul>
<li>
<label class="description">Name*</label>
<input type="text" name="FullName" id="FirstName" maxlength="20" size="8" title="Please enter your First Name (20 characters max.)" required />
<label for="FirstName">First</label>
<input type="text" name="user" id="LastName" maxlength="20" size="8" required />
<label for="LastName">Last</label>
</li>
<li>
<label for="Email" class="description">Email*:</label>
<input type="email" name="Email" id="Email" maxlength="50" required />
</li>
<li>
<label class="description">Reason for Contacting:</label>
<input name="choice" id="Hospitality" type="checkbox" value="1" />
<label for="Hospitality">About Website</label>
<input name="choice" id="Technology" type="checkbox" value="1" />
<label for="Technology">About Deals</label>
<p class="guidelines"><small>Reason for contacting. Please select all that are applicable</small>
</p>
</li>
<li>
<label class="description">Will you Recommend us to anyone.</label>
<select>
<option value=""></option>
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3">Maybe</option>
</select>
</li>
<li>
<label for="AnyQuestions" class="description">Any Questions Or Suggessions</label>
<textarea name="AnyQuestions" id="AnyQuestions" class="element textarea large"></textarea>
</li>
<li>
<label class="description">Do You want to receive special offers. Please Select One</label>
<input type="radio" name="opinion" value="1" />
<label>Yes</label>
<input type="radio" name="opinion" value="2" />
<label>No</label>
</li>
<li class="buttons">
<input type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>

HTML - Linking an external Javascript file

I can't figure out why my external Javascript file isn't being linked to by my HTML file.
I have
<script type="text/javascript" src="jobs.js"></script>
in my HTML header and
window.onload = function () { alert("Working");
};
in my Javascript file.
I'm using the firefox extension Firebug and it's telling me that my webpage isn't loading my Javascript file.
What am I doing wrong?
Thanks
edit: I've checked the path many times, I've moved the .js file to the same folder now.
<!DOCTYPE html>
< html lang="en">
<meta charset="utf-8" />
<meta name="description" content="Home Page" />
<meta name="author" content="Caitlin Reeve" />
<link rel="Stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="jobs.js"></script>
<Title> Home Page</Title>
<!-- Image Source: http://cdn.business2community.com/wp-content/uploads/2013/03/Hat3.png-->
<a name="logo" href= "index.html"><img src="images/Hat3.png" alt="Business Logo" /></a>
<h1>Tech Solutions </h1>
<hr />
<!-- Site Menu -->
<nav>
<p></p>
<ul>
<li>Home</li>
<li><a href="job1.html" >Jobs</a></li>
<li><a href="enquire.html" >Enquire</a></li>
<li>About</li>
</ul>
</nav>
<h3> Application </h3>
<form action="http://mercury.ict.swin.edu.au/it000000/formtest.php" name="applyJob" method="POST" >
<fieldset>
<legend> Your Details </legend>
Job Reference Number <input required="required" name="jobno" type="text" required="required" /><br />
First Name <input required="required" name="fname" type="text" pattern="[A-Za-z]{1,15}" maxlength="15" required="required" /><br />
Last Name <input required="required" name="lname" type="text" pattern="[A-Za-z]{1,25}" maxlength="25" required="required"/><br />
Date of Birth <input required="required" name="dob" type="date" pattern="[(0[1-9]|[12][0-9]|3[01])[/]((0[1-9]|1[012])[/](19|20)\d\d][(0[1-9]|[12][0-9]|3[01])[/]((0[1-9]|1[012])[/][(0[0-9]|1[0-9]\d\d)]" required="required"/><br />
Gender
<label><input type="radio" value="Male" name="gender" checked="checked" /> Male </label>
<label><input type="radio" name="gender" value="Female" /> Female </label> <br />
<p>
Address: <br />
Street Address <input required="required" name="streetad" type="text" maxlength="50" required="required" /><br />
Suburb/Town <input required="required" name="subad" type="text" maxlength="25" required="required" /><br />
State <select required="required" name="state">
<option value="">Choose</option>
<option value="WA">WA</option>
<option value="NT">NT</option>
<option value="SA">SA</option>
<option value="QLD">QLD</option>
<option value="NSW">NSW</option>
<option value="VIC" selected="selected" >VIC</option>
<option value="ACT">ACT</option>
<option value="TAS">TAS</option>
</select>
</p>
<br />
Postcode <input required="required" name="postcode" type="text" pattern="[0-9]{4}" required="required"/><br />
<br />
Email Address <input required="required" name="email" type="email" required="required" /><br />
Phone Number <input required="required" name="phone" type="tel" pattern="[0-9]{10}" maxlength="10" required="required"/><br />
<p>
Skills <br />
<label><input required="required" type="checkbox" name="HTML" value="html" required="required" /> HTML experience</label><br />
<label><input required="required" type="checkbox" name="Degree" value="degree" required="required" /> Degree (Bachelor or higher) </label> <br />
<label><input required="required" type="checkbox" name="SQL" value="sql" required="required" /> SQL experience </label> <br />
<label><input type="checkbox" name="lift" value="lift" /> Able to lift heavy objects </label> <br />
<label><input type="checkbox" name="experience" value="years" /> 3 or more years of experience </label> <br />
<label><input type="checkbox" name="RubyPython" value="languages" /> Ruby or Python knowledge </label> <br />
<label><input type="checkbox" name="other" value="other" /> Other Skills </label>
</p>
Other Skills <br />
<textarea rows="3" COLS="25"></textarea><br />
fps
<!--Submits the form to the server-->
<input type="submit" value="Submit Application" />
</fieldset>
</form>
2014
Provided that your path is good and that the js file does load, there is one thing to fix: the onload listener needs to be a function:
window.onload = function(){
alert("Working");
}
Your js file must be placed in the same folder as your html.
html/
|__myHtml.html
|__jobs.js
If it is in other folder, e.g:
html/
|__myHtml.html
js/
|__jobs.js
then change the relative path to your javascript:
<script type="text/javascript" src="../js/jobs.js"></script>
looks like you missing the function () call. see revised code below tested it in firefox quickly and it worked. your external link looks fine.
window.onload = function () { alert("Working");
};

Form Validator to check option and select check not functioning

I am having a issue with this script, I need the Form Validator as programed on the bottom to first check whether the radio with the select is targeted and then and only then request a time from that specific radios dropdown. It seem to be complete if i can get the:
if (document.getElementById('first').checked) {
frmvalidator.addValidation("selects", "dontselect=000", "select a time");
}
statement work in javascript but as it only look for a time when its true but i seem to be missing something. Please assist
<form method="POST" name="contactform" id="contactform" action="contact-form-handler.php">
<div>
<div style="float:left; width:420px;";>
<input type="radio" name="radios" id="first" value="SELECT" /> Attending a GROUP Intro to Meditation ($15) on: <br/>
<select name="selects"id="selects">
<option value="000">Select a Date</option>
<option value="2">April 23rd, TUES at 7:00PM - Group Intro to Meditation</option>
<option value="3">April 27th, SAT at 11:00AM - Group Intro to Meditation</option>
<option value="4">May 1st, WED at 7:00PM - Group Intro to Meditation</option>
<option value="5">May 7th, TUES at 7:00PM - Group Intro to Meditation</option>
</select>
<br>
<input type="radio" name="radios" value="radio1" /> Scheduling a PRIVATE Intro to Meditation ($200) <br/>
<input type="radio" name="radios" value="radio2" /> Scheduling an Individual Consultation ($300 / $475) <br/>
<input type="radio" name="radios" value="radio3" /> GIFT a Mentoring Session - 2 hr ($350) <br>
<input type="radio" name="radios" value="radio4" /> Corporate Programs <br/>
<input type="radio" name="radios" value="radio5" /> Pro Bono Programs <br/>
<input type="radio" name="radios" value="radio6" /> General Inquiry <br/>
<input type="radio" name="radios" value="radio7" /> Receiving Information on Future Intro Dates<br/>
</div>
<div style="float:left";>
<label for='name'>Your Name: </label>
<input type="text" name="name"> <br>
<label for='email'>Email Address: </label>
<input type="text" name="email"> <br>
<label for='confirm_email'>Confirm Email:</label>
<input type="text" name="confirm_email"> <br>
<label for='email'>Contact #: </label>
<input type="text" name="contact"> <br>
<label for='message'>Message:</label> <br>
<textarea rows="8" cols="35" name="message";></textarea>
<input type="submit" value="Submit"><br>
</form>
</div>
</div>
</td>
<tr>
<td>
<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator = new Validator("contactform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("email","email","Please enter a valid email address");
//frmvalidator.addValidation("selects","dontselect=000","select a time");
var chktestValidator = new Validator("contactform");
//chktestValidator.addValidation("radios","selectradio","Please select an option");
chktestValidator.addValidation("radios","selone", "Please select a plan");
if(document.getElementById('first').checked) {
frmvalidator.addValidation("selects","dontselect=000","select a time");
}
</script>
It seems to me that what you really want is a listener on the radio button with id "first" that, when checked, enables or disables the adjacent select element based on whether the button is checked or not. You can do that by:
<input type="radio" ... onclick="this.form.selects.disabled = !this.checked;">
You should disable the select element when the page loads by script, not in the HTML.
In the select element, you should set the first option to selected in the HTML:
<option value="000" selected>Select a Date</option>
It seems to need a blank space in front of id="selects"
Change your code
<input type="radio" name="radios" value="radio1" />
To
<input type="radio" name="radios" value="radio1" id="radios" />
Maybe this can help..
Your input radio must have an "ID" not just a name.. It works for me..

Resources