OMG I am tired of trying to figure this out myself. I am using the developer tools in Chrome and in Firefox and I keep getting the SyntaxError: Unexpected Token <. It keeps flagging the first line . Please tell me what I am doing wrong here, thank you! I have tried YouTube videos and W3schools.com and still unable to figure out why it continues to be thrown.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script>
function showFormInput() { //get data from the form
var a1 = document.getElementById('rname').value; // 'rname reference
// id in html(not included with html you will need to add.)
var b2 = document.getElementById('orgname').value;
var c3 = document.getElementById('date').value;
var d4 = document.getElementById('web').value;
var e5 = document.getElementById('hname').value;
document.getElementById('recipientName').innerHTML = a1; // 'recipientName
// reference name in the html
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
</script>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your
Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter
your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your
Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your
Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="showFormInput()" />
</section>
<article id="placeholderContent">
<br/>
<br/>
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following
website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
</body>
</html>
It seems to be rendering perfectly fine to me. I would not recommend putting a script take outside of the body tag. I would put it at the very end of the tag so that it doesn't hold up the loading of the page. In addition, I'd use "Brackets" as my code editor for projects like this. It's super useful, and you can download "Beautify" as an extension to make your code format out nicely.
Related
I am new to Five9. I want to make a Script where there is some Fields where the agents can write some text, and after pressing a button, the text from the Field will go to the List updating the current record. Is there any possibility to realize this without using any CRM or something. Like there is any API request which can do this thing?
Thank you for your help!
<html>
<head>
<title> Script </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="nav_bar">
<button onClick="toggle('target', 'replace_target','replace_target2')">Adatlap</button>
<button onClick="toggle('replace_target', 'target','replace_target2')">Sugo</button>
<button onClick="toggle('replace_target2', 'target', 'replace_target')">Script</button>
</div>
<div>
<span id="target">Test</span>
<p> This is Test</p>
</div>
<div style="display:none" class="Sugo">
<span id="replace_target">Test2</span>
</div>
<div style="display:none" class="script">
<span id="replace_target2">SCript</span>
<p> This is SCript</p>
<div class="page1">
</div>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
function toggle(target, source, source2) {
this[target].parentNode.style.display = 'block'
this[source].parentNode.style.display = 'none'
this[source2].parentNode.style.display = 'none'
}
</script>
</body>
</html>
PLEASE HELP! I am very new to JavaScript, and I am completely stuck on why my code is not producing an output. The object of my assignment is to accept a users input into a pre-established form. Once the user clicks submit the pre-established form will replace key variables with the users input. Here is my source code and js:
Code and js:
`
function showFormInput() { //get data from the form
var a1 = document.getElementsById('rname').value;
var b2 = document.getElementsById('orgname').value;
var c3 = document.getElementsById('date').value;
var d4 = document.getElementsById('web').value;
var e5 = document.getElementsById('hname').value;
// Displaying data in the HTML
document.getElementById('recipientName').innerHTML = a1;
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your
Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter
your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your
Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your
Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="showFormInput()" />
</section>
<article id="placeholderContent">
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
Seems to work after a few fixes after running it through a linter.
A couple of the issues:
You meant getElementById (not getElementsById)
The bottom half of the code was wrapped in a {} block (not sure why). It needs to all be in the same block if it should run on click.
Comments start with two forward slashed: (//).
function showFormInput() { //get data from the form
var a1 = document.getElementById('rname').value; // 'rname reference id in html(not included with html you will need to add.)
var b2 = document.getElementById('orgname').value;
var c3 = document.getElementById('date').value;
var d4 = document.getElementById('web').value;
var e5 = document.getElementById('hname').value;
document.getElementById('recipientName').innerHTML = a1; // 'recipientName reference name in the html
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
document.getElementById('showFormInput').addEventListener('click', showFormInput);
// You can leave this in the <script> tags with an inline `onclick=` if needed (though I wouldn't recommend it). Just easier to edit in the JS.
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" id='showFormInput' value="Submit" />
</section>
<article id="placeholderContent">
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following
website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
First I want to apologize if this question was already asked. However I am not able to resolve this issue. I don't know where to find the problem and why it does not print out when the form is filled. I have simple PHP file which takes data from form and should print it out on screen:
if (isset($_POST['submit']))
{
//get data from form
$Title = $_POST['Title']; // title of case study
$Summary = $_POST['Summary']; // summary of case study
$WhatDid = $_POST['WhatDid']; // what did you do question
$Volunteering = $_POST['Volunteering'];
$Credit = $_POST['Credit-bearing'];
$Local = $_POST['Local-schools']; // themes checkboxes
$Elderly = $_POST['Elderly'];
$Environmental = $_POST['Environmental'];
$Edinburgh = $_POST['Edinburgh'];
$Scotland = $_POST['Scotland'];
$UK = $_POST['UK']; // themes checboxes
$International = $_POST['International'];
$Online = $_POST['Online'];
$Other = $_POST['Other_theme']; // themes checboxes
$Undergraduate = $_POST['Undergraduate']; // cohort checboxes
$Masters = $_POST['Masters'];
$PhD = $_POST['PhD']; // cohort checboxes
$WhyDid = $_POST['WhyDid'];
$WhatWell = $_POST['WhatWell'];
$WhatDifferently = $_POST['WhatDifferently'];
$Scalability = $_POST['Scalability'];
$FurtherInfo = $_POST['FurtherInfo'];
$Location = $_POST['Location'];
$AuthorTitle = $_POST['title'];// authors title
$F_Name = $_POST['first_name'];
$L_Name = $_POST['last_name'];
$Email = $_POST['email'];
$Contactauthor = $_POST['contact'];
$Note1 = $_POST['note1'];
$Note2 = $_POST['note2'];
$Engagement = $_POST['engagement']; // date of engagement
echo nl2br(
"This is a $Title,
\n this is a $Summary,
this is a $WhatDid,
\n this is checkbox $Volunteering,
this is checkbox $Credit,
\n this is checkbox $Local,
this is checkbox $Elderly,
\n this is checkbox $Environmental,
this is checkbox $Edinburgh,
\n this is checkbox $Scotland,
this is checkbox $UK,
\n this is checkbox $International,
this is checkbox $Online,
\n this is other themes $Other,
this is an $Undergraduate,
\n this is a $Masters,
this is a $PhD,
\n this is why it was done: $WhyDid,
this is what went well: $WhatWell,
\n this is what could be done differently: $WhatDifferently,
Could it be scalable & transerable?: $Scalability,
\n Additional information?: $FurtherInfo,
Location of practice: $Location,
\n this is an Author $AuthorTitle $F_Name $L_Name, email address: $Email
and he is contact: $Contactauthor,
\n this is a date of engagement $Engagement,
Author agrees with possible ammendments: $Note1, $Note2."
);
and then here is a html itself:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Submit Case Study</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
// if Google is down, it looks to local file...
if (typeof jQuery == 'undefined') {
document.write(unescape("script src='js/jquery-1.11.2.min.js' type='text/javascript'/script"));
}
</script>
<!-- jQuery library -->
<!--<script src="http://code.jquery.com/jquery-2.1.4.js"></script>-->
<!-- script to clone author -->
<script type="text/javascript" src="JS/clone-form-td.js"></script>
<!-- Own stylesheet -->
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<!-- jQuery customized theme-->
<link rel="stylesheet" href="CSS/jquery-ui.css">
<script src="JS/jquery-ui.js"></script>
<script src="JS/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
function toggle(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} //script to expand text field when
</script>
<script>
$(function(){
$("#date").datepicker({dateFormat: "dd-mm-yy"}); // datepicker
});
</script>
<style>
.ui-datepicker {font-size:85%; } /* custom size of datepicker */
</style>
</head>
<body>
<form name="submit" action="PHP/submit-test.php" method="POST">
<div class="main container">
<p class="label1">Title *</p>
<input class="textboxstyle" type="text" name="Title">
<p class="help-block">Meaningful, short descriptive title</p>
<br>
<p class="label1">Summary *</p>
<textarea name="Summary"></textarea>
<p class="help-block">Brief summary of what the engagement involved.</p>
<br>
<p class="label1">What did you do? *</p>
<textarea name="WhatDid"></textarea>
<p class="help-block">Please give a description of the case study including the theme(s)/topics(s) it relates to (please see list overleaf). It would be helpful if this could include the stage of development (e.g. whether the practice is new or established). Please include links to key themes/topics .</p>
<br>
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
<input type="checkbox" id="Volunteering" name="Volunteering" value="YES"/> Volunteering<br/>
<input type="checkbox" id ="Credit-bearing" name="Credit-bearing" value="YES"/> Credit-bearing course<br/>
<input type="checkbox" id="Local-schools" name="Local-schools" value="YES"/> Working with local schools and / or young people<br/>
<input type="checkbox" name="Elderly" value="YES"/> Working with elderly people<br/>
<input type="checkbox" name="Environmental" value="YES"/> Environmental or sustainability<br/>
<input type="checkbox" name="Edinburgh" value="YES"/> Based in Edinburgh or the Lothians<br/>
<input type="checkbox" name="Scotland" value="YES"/> Based in Scotland (excluding Edinburgh or the Lothians)<br/>
<input type="checkbox" name="UK" value="YES"/> Based in the UK<br/>
<input type="checkbox" name="International" value="YES"/> Based internationally<br/>
<input type="checkbox" name="Online" value="YES"/> Online component<br/>
<input type="checkbox" onclick="toggle('Other_theme')" name="Other"> Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme" required="">
</div>
</div>
</div>
<div>
<p class="label1">Student cohort*</p>
<div class="checkbox">
<input type="checkbox" name="Undergraduate" value="YES"> Undergraduate<br>
<input type="checkbox" name="Masters" value="YES"> Postgraduate (Masters)<br>
<input type="checkbox" name="PhD" value="YES"> Postgraduate (Research)<br>
</div>
</div>
<p class="label1">Why did you do it? *</p>
<textarea name="WhyDid"></textarea>
<p class="help-block">A brief outline of the reasons behind the practice described - its purpose and benefits. What change was it intended to make or problem was it designed to solve?</p>
<br>
<p class="label1">What went well? *</p>
<textarea name="WhatWell"></textarea>
<p class="help-block">A brief outline of what worked well for you/ your organisation. What were the highlights? Did you receive any positive feedback?</p>
<br>
<p class="label1">What might you have done differently? *</p>
<textarea name="WhatDifferently"></textarea>
<p class="help-block">A brief outline of any particular challenges faced and how these were addressed. Please also say if you are planning any changes or further developments.</p>
<br>
<p class="label1">Scalability and transferability *</p>
<textarea name="Scalability"></textarea>
<p class="help-block">Is this practice scalable and transferable? What is the potential for it being expanded and/or run elsewhere in the University? A brief outline of workload commitments in setting up and maintaining the practice would also be useful.</p>
<br>
<p class="label1">Further information *</p>
<textarea name="FurtherInfo"></textarea>
<p class="help-block">e.g. website or publications, materials used, presentation slides, screen shots, testimonials. A couple of quotes from community members, students or staff illustrating the case study would be particularly useful.</p>
<br>
<p class="label1">Location of practice *</p>
<textarea name="Location"></textarea>
<p class="help-block">Name of community partner, academic School/ support service involved (if applicable).</p>
<br>
<div id="author1" class="clonedInput">
<p id="author" class="label1">Author </p>
<div class="row">
<div class="col-md-1 col-sm-6 col-xs-4">
<input id="title" name="title" type="text" placeholder="" class="input_title textboxstyle">
<p id="help-block-title" class="help-block-title">Title</p>
</div>
<div class="col-md-2">
<input id="first_name" name="first_name" type="text" placeholder="" class="input_fn textboxstyle">
<p id="help-block-fn" class="help-block-fn">First Name</p>
</div>
<div class="col-md-2">
<input id="last_name" name="last_name" type="text" placeholder="" class="input_ln textboxstyle">
<p id="help-block-ln" class="help-block-ln">Last Name</p>
</div>
<div class="col-md-2">
<input id="email" name="email" type="email" placeholder="abc#example.com" class="input_email textboxstyle">
<p id="help-block-email" class="help-block-email">Email</p>
</div>
<div class="col-md-1 col-sm-1 col-xs-2">
<input id="contact" name="contact" type="checkbox" value="YES" class="contact">
<p id="help-block-checkbox" class="help-block-checkbox">Contact</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-4">
<input id="btnAdd" name="btnAdd" type="button" class="btn btn-info" value="Add author">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<input id="btnDel" name="btnDel" type="button" class="btn btn-danger" value="Remove author">
</div>
</div>
</div>
<p class="label1">Date*</p>
<div>
<div class="datebox">
<input id="date" class="date" name="engagement">
<p class="help-block">When the engagement activity took place</p>
</div>
</div>
<div>
<p class="label1">Note for authors</p>
<div>
<input name="note1" type="checkbox" value="YES"><p class="prg-text"> 1) The full case study (in this template format) will be included on a public wiki database.</p>
</div>
<div>
<input name="note2" type="checkbox" value="YES"><p class="prg-text"> 2) The Student Community Engagement team will produce a summary version of each case study suitable for an external and internal audience. Authors will be asked to approve these public versions of their case studies before they are made available on open websites. These case studies will be available as .pdf downloads and other formats suitable for printing and inclusion in publications, as web pages and for presentations. These will be available on the public section of the Student Community Engagement website and linked to other key sites.</p>
</div>
<p class="help-block">The case study will be used in two ways and consent of author is required for both.</p>
</div>
<br><br>
<input class="submit btn btn-primary" type="submit" name="submit" value="submit">
</div>
</form>
</body>
Any idea will be appreciated.
Thank you
You are having problem in this code.
.
.
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
.
.
<input type="checkbox" onclick="toggle('Other_theme')" name="Other" > Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme" required="">
</div>
</div>
</div>
.
.
Either you click checkbox 'Other' or not, 'Other_theme' textbox will be required. So, remove 'required' attribute from 'Other_theme' textbox. You thinking, that <div> is hidden so, it will not ask required field. But, actually this is not happening.
Validate it through jquery. Write onsubmit="return checkValidation();" in your <form> tag too (as below) for validating it at end. One more thing i added in your code is add value="Other" in 'Other_theme' textbox. Please see my code minutely.
Updated Code.
<form action="PHP/submit-test.php" method="POST" onsubmit="return checkValidation();">
.
.
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
.
.
<input type="checkbox" onclick="toggle('Other_theme')" name="Other" value="Other"> Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme">
</div>
</div>
</div>
.
.
Add This too in your .js file.
<script>
function checkValidation()
{
var OtherVal = $("input[name='Other']:checked").val();
if(OtherVal == 'Other')
{
alert("Please Fill Other Theme");
return false;
}
}
</script>
In Addition to user's requirement on Jan 19.
<script>
function checkValidation()
{
var OtherVal = $("input[name='Other']:checked").val();
var OtherThemeValue = $("#Other_theme").val();
if(OtherVal == 'Other' && OtherThemeValue=="")
{
alert("Please Fill Other Theme");
return false;
}
}
</script>
<form name="submit" action="PHP/submit-test.php" method="POST">
<input class="submit btn btn-primary" type="submit" name="submit" value="submit">
There is two elements with same name. So change name of anyone element.
<form name="form1" action="PHP/submit-test.php" method="POST">
Update your html code to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Submit Case Study</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
// if Google is down, it looks to local file...
if (typeof jQuery == 'undefined') {
document.write(unescape("script src='js/jquery-1.11.2.min.js' type='text/javascript'/script"));
}
</script>
<!-- jQuery library -->
<!--<script src="http://code.jquery.com/jquery-2.1.4.js"></script>-->
<!-- script to clone author -->
<script type="text/javascript" src="JS/clone-form-td.js"></script>
<!-- Own stylesheet -->
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<!-- jQuery customized theme-->
<link rel="stylesheet" href="CSS/jquery-ui.css">
<script src="JS/jquery-ui.js"></script>
<script src="JS/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
function toggle(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} //script to expand text field when
</script>
<script>
$(function(){
$("#date").datepicker({dateFormat: "dd-mm-yy"}); // datepicker
});
</script>
<style>
.ui-datepicker {font-size:85%; } /* custom size of datepicker */
</style>
</head>
<body>
<form action="PHP/submit-test.php" method="POST">
<div class="main container">
<p class="label1">Title *</p>
<input class="textboxstyle" type="text" name="Title">
<p class="help-block">Meaningful, short descriptive title</p>
<br>
<p class="label1">Summary *</p>
<textarea name="Summary"></textarea>
<p class="help-block">Brief summary of what the engagement involved.</p>
<br>
<p class="label1">What did you do? *</p>
<textarea name="WhatDid"></textarea>
<p class="help-block">Please give a description of the case study including the theme(s)/topics(s) it relates to (please see list overleaf). It would be helpful if this could include the stage of development (e.g. whether the practice is new or established). Please include links to key themes/topics .</p>
<br>
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
<input type="checkbox" id="Volunteering" name="Volunteering" value="YES"/> Volunteering<br/>
<input type="checkbox" id ="Credit-bearing" name="Credit-bearing" value="YES"/> Credit-bearing course<br/>
<input type="checkbox" id="Local-schools" name="Local-schools" value="YES"/> Working with local schools and / or young people<br/>
<input type="checkbox" name="Elderly" value="YES"/> Working with elderly people<br/>
<input type="checkbox" name="Environmental" value="YES"/> Environmental or sustainability<br/>
<input type="checkbox" name="Edinburgh" value="YES"/> Based in Edinburgh or the Lothians<br/>
<input type="checkbox" name="Scotland" value="YES"/> Based in Scotland (excluding Edinburgh or the Lothians)<br/>
<input type="checkbox" name="UK" value="YES"/> Based in the UK<br/>
<input type="checkbox" name="International" value="YES"/> Based internationally<br/>
<input type="checkbox" name="Online" value="YES"/> Online component<br/>
<input type="checkbox" onclick="toggle('Other_theme')" name="Other"> Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme" required="">
</div>
</div>
</div>
<div>
<p class="label1">Student cohort*</p>
<div class="checkbox">
<input type="checkbox" name="Undergraduate" value="YES"> Undergraduate<br>
<input type="checkbox" name="Masters" value="YES"> Postgraduate (Masters)<br>
<input type="checkbox" name="PhD" value="YES"> Postgraduate (Research)<br>
</div>
</div>
<p class="label1">Why did you do it? *</p>
<textarea name="WhyDid"></textarea>
<p class="help-block">A brief outline of the reasons behind the practice described - its purpose and benefits. What change was it intended to make or problem was it designed to solve?</p>
<br>
<p class="label1">What went well? *</p>
<textarea name="WhatWell"></textarea>
<p class="help-block">A brief outline of what worked well for you/ your organisation. What were the highlights? Did you receive any positive feedback?</p>
<br>
<p class="label1">What might you have done differently? *</p>
<textarea name="WhatDifferently"></textarea>
<p class="help-block">A brief outline of any particular challenges faced and how these were addressed. Please also say if you are planning any changes or further developments.</p>
<br>
<p class="label1">Scalability and transferability *</p>
<textarea name="Scalability"></textarea>
<p class="help-block">Is this practice scalable and transferable? What is the potential for it being expanded and/or run elsewhere in the University? A brief outline of workload commitments in setting up and maintaining the practice would also be useful.</p>
<br>
<p class="label1">Further information *</p>
<textarea name="FurtherInfo"></textarea>
<p class="help-block">e.g. website or publications, materials used, presentation slides, screen shots, testimonials. A couple of quotes from community members, students or staff illustrating the case study would be particularly useful.</p>
<br>
<p class="label1">Location of practice *</p>
<textarea name="Location"></textarea>
<p class="help-block">Name of community partner, academic School/ support service involved (if applicable).</p>
<br>
<div id="author1" class="clonedInput">
<p id="author" class="label1">Author </p>
<div class="row">
<div class="col-md-1 col-sm-6 col-xs-4">
<input id="title" name="title" type="text" placeholder="" class="input_title textboxstyle">
<p id="help-block-title" class="help-block-title">Title</p>
</div>
<div class="col-md-2">
<input id="first_name" name="first_name" type="text" placeholder="" class="input_fn textboxstyle">
<p id="help-block-fn" class="help-block-fn">First Name</p>
</div>
<div class="col-md-2">
<input id="last_name" name="last_name" type="text" placeholder="" class="input_ln textboxstyle">
<p id="help-block-ln" class="help-block-ln">Last Name</p>
</div>
<div class="col-md-2">
<input id="email" name="email" type="email" placeholder="abc#example.com" class="input_email textboxstyle">
<p id="help-block-email" class="help-block-email">Email</p>
</div>
<div class="col-md-1 col-sm-1 col-xs-2">
<input id="contact" name="contact" type="checkbox" value="YES" class="contact">
<p id="help-block-checkbox" class="help-block-checkbox">Contact</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-4">
<input id="btnAdd" name="btnAdd" type="button" class="btn btn-info" value="Add author">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<input id="btnDel" name="btnDel" type="button" class="btn btn-danger" value="Remove author">
</div>
</div>
</div>
<p class="label1">Date*</p>
<div>
<div class="datebox">
<input id="date" class="date" name="engagement">
<p class="help-block">When the engagement activity took place</p>
</div>
</div>
<div>
<p class="label1">Note for authors</p>
<div>
<input name="note1" type="checkbox" value="YES"><p class="prg-text"> 1) The full case study (in this template format) will be included on a public wiki database.</p>
</div>
<div>
<input name="note2" type="checkbox" value="YES"><p class="prg-text"> 2) The Student Community Engagement team will produce a summary version of each case study suitable for an external and internal audience. Authors will be asked to approve these public versions of their case studies before they are made available on open websites. These case studies will be available as .pdf downloads and other formats suitable for printing and inclusion in publications, as web pages and for presentations. These will be available on the public section of the Student Community Engagement website and linked to other key sites.</p>
</div>
<p class="help-block">The case study will be used in two ways and consent of author is required for both.</p>
</div>
<br><br>
<input class="submit btn btn-primary" type="submit" name="submit" value="submit">
</div>
</form>
</body>
I am trying to create a multipage, or multiphase, form where a user fills in a couple pieces of information, clicks 'continue', and gets some more information to fill in. I want all of it done on one page of a website until they are ready to submit all of the information they have entered, so I have used some tutorials to get to where I am now. It is done using css to show the first process, and hide the others until the 'continue' button is clicked. Then it will hide the first process and show the second process, and so on until the end.
On line 43, where it says 'if(country.length > 1){', I am getting the error "Cannot read property 'length' of undefined" from Google Chrome's developer tools. Everything in processPhase1 is the same as processPhase2 syntax-wise, as far as I can tell. I think I have 'country' defined where it needs to be...so I'm at a loss.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Tech Consulting, LLC.">
<link rel="icon" href="../../favicon.ico">
<title>Street Cred</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>
<style>
form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
</style>
<script>
var name, email, phone, place, country, city, state, zip, routing;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
name = _("name").value;
if(name.length > 2){
_("phase1").style.display = "none";
_("phase2").style.display = "block";
_("progressBar").value = 33;
_("status").innerHTML = "Phase 2 of 3";
} else {
alert("Please fill in the fields.");
}
}
function processPhase2(){
country = _("country").value;
if(country.length > 1){
_("phase2").style.display = "none";
_("phase3").style.display = "block";
_("progressBar").value = 66;
_("status").innerHTML = "Phase 3 of 3";
} else {
alert("Please make sure all fields are entered.");
}
}
function processPhase3(){
routing = _("routing").value;
if(routing.length > 0){
_("phase3").style.display = "none";
_("show_all_data").style.display = "block";
_("display_name").innerHTML = name;
_("display_email").innerHTML = email;
_("display_phone").innerHTML = phone;
_("display_country").innerHTML = country;
_("display_routing").innerHTML = routing;
_("progressBar").value = 100;
_("status").innerHTML = "Data Overview";
} else {
alert("Please fill in everything.");
}
}
function submitForm(){
_("multiphase").method = "post";
_("multiphase").action = "insert_form.php";
_("multiphase").submit();
}
</script>
</head>
<body>
<div class="container">
<div class="header clearfix">
<i class="fa fa-chevron-circle-left fa-5x"></i>
<i class="fa fa-chevron-circle-right fa-5x"></i>
<div class="contact-greeting">
<h1>Let's get to know each other.</h1>
<p>Before we can get you the device you want, we need to know a little bit about you.</p>
</div>
</div>
<div class="jumbotron">
<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<h3 id="status">Phase 1 of 3</h3>
<form id="multiphase" onsubmit="return false">
<div id="phase1">
<p id="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="First and Last Name" id="name" />
</p>
<p id="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p id="phone">
<input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,100]] feedback-input" id="phone" placeholder="Telephone Number" />
</p>
<button onclick="processPhase1()">Continue</button>
</div>
<div id="phase2">
<p id="country">
<input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
</p>
<p id="place">
<input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="Address" id="place" />
</p>
<p id="city">
<input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="City" id="city" />
</p>
<p id="state">
<input name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="State" id="state" />
</p>
<p id="zip">
<input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="Zip" id="zip" />
</p>
<button onclick="processPhase2()">Continue</button>
</div>
<div id="phase3">
<p id="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Questions or comments..."></textarea>
</p>
<button onclick="processPhase3()">Continue</button>
</div>
<div id="show_all_data">
Name: <span id="display_fname"></span> <br>
E-mail: <span id="display_email"></span> <br>
Phone: <span id="display_phone"></span> <br>
Address: <span id="display_country"></span> <br>
<button onclick="submitForm()">Submit Data</button>
</div>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</div>
<div class="row marketing-contact">
<p></p><br><br><br>
</div>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
DOM element corresponding to p tag does not have value property. You need to get rid of duplicate id's in your html. If you remove id="country" from p tag, the input with id="country" will be found by document.getElementById and processPhase2 will work.
Here's the script-
<script language=javascript>
function apply()
{
document.form1.sub.disabled=true;
if(document.form1.chk.checked==true)
{
document.form1.sub.disabled=false;
}
if(document.form1.chk.checked==false)
{
document.form1.sub.enabled=false;
}
}
</script>
If I use this html it doesn't work--
<input class="field checkbox" type="checkbox" name="chk" onClick="apply()" value="accept" />
However, this also doesn't work--
<input class="field" type="checkbox" name="chk" onClick="apply()" value="accept" />
But this does work--
<input class="checkbox" type="checkbox" name="chk" onClick="apply()" value="accept" />
So if the class "field" is in there it breaks the JS. Of course I can take it out, but I want to know why it doesn't work?
Thanks!
EDIT
Sorry folks, here's the whole page. The CSS is just controlling the position of the element, it shouldn't interfere with the JS as far as I know...? -
<?php
session_start();
if(!isset($_SESSION['referrer'])){
//get the referrer
if ($_SERVER['HTTP_REFERER']){
$referrer = $_SERVER['HTTP_REFERER'];
} else {
$referrer = "unknown";
}
//save it in a session
$_SESSION[’referrer’] = $referrer; // store session data
}
//grab campaign var from url
$campaign = $_GET['campaign'];
?>
<!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>
<title>Beerfest Packages Sweepstakes - Blue Ridge Country</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/wufoo.js"></script>
<link rel="stylesheet" href="css/structure.css" type="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" />
<link rel="stylesheet" href="css/theme.css" type="text/css" />
<script language=javascript>
function apply()
{
document.form1.sub.disabled=true;
if(document.form1.chk.checked==true)
{
document.form1.sub.disabled=false;
}
if(document.form1.chk.checked==false)
{
document.form1.sub.enabled=false;
}
}
</script>
</head>
<body id="public">
<img id="top" src="images/top.png" alt="" />
<div id="container">
<h1>Wufoo</h1>
<form class="wufoo" action="insert.php" method="post" name="form1">
<div class="info">
<h2>Register to Win & Subscribe to Blue Ridge Country</h2>
<div>Now's your chance to not only register to win our free beerfest tickets and getaway, but also receive the #1 magazine in the Blue Ridge Mountains!</div>
</div>
<ul>
<li class="section first">
<h3>Your information</h3>
<div>Whether you're registering to win or subscribing to the magazine (or both!) we need your info!</div>
</li>
<li>
<label class="desc">Name <span class="req">*</span></label>
<span>
<input class="field text" size="8" value=""/>
<label>First</label>
</span>
<span>
<input class="field text" size="3" value=""/>
<label>M.I.</label>
</span>
<span>
<input class="field text" size="14" value=""/>
<label>Last</label>
</span>
</li>
<li>
<label class="desc">Email <span class="req">*</span></label>
<div>
<input class="field text medium" type="text" name="email" maxlength="100" value="" />
</div>
<p class="instruct">Don't worry, we won't spam you, share or sell your email address!</p>
</li>
<li>
<label class="desc">Address <span class="req">*</span></label>
<div>
<input class="field text medium" type="text" maxlength="100" value="" />
</div>
</li>
<li>
<span>
<input class="field text" size="15" value="" />
<label>City</label>
</span>
<span>
<input class="field text" size="2" value="" />
<label>State</label>
</span>
<span>
<input class="field text" size="5" maxlength="10" value="" />
<label>Zip</label>
</span>
</li>
<li>
<label class="desc">Phone <span class="req">*</span></label>
<span>
<input class="field text" type="text" size="3" maxlength="3" value=""/> -
<label>Area</label>
</span>
<span>
<input class="field text" type="text" size="8" maxlength="8" value=""/>
<label>Phone</label>
</span>
</li>
<li class="section">
<h3>Legal mumbo jumbo</h3>
<div>Don't worry, you're almost done and this is the last bit we need from you!</div>
</li>
<li>
<label class="desc">Official Rules <span class="req">*</span></label>
<div>
<textarea rows="10" cols="50" class="field textarea medium" readonly="readonly" style="font-size: 0.8em;">1. To enter, complete an online request by submitting this completed form. Or, send a stamped, self-addressed envelope to: "Blue Ridge Country Beerfest Promotion," Leisure Publishing, PO Box 21535, Roanoke, VA 24018, requesting an entry form. Limited to one entry per household. Entries must be received by June 30, 2009. 2. Reservation procedures to come with notification of winning. Package not available during holidays and special events. Notification of prizes will be sent to winners at the email address on the entry form. The odds of winning will depend upon the number of entries. 3. All prizes will be awarded to winners selected by random drawing from all valid entries received. Drawing will be conducted by Leisure Publishing Inc., an independent publisher, whose decisions are final on all matters relating to this sweepstakes. Winners will be notified by email to the address provided on the entry form. Only one prize to a family or household. Due to the nature of this competition, you must be 21 or older to win. Proof of age will be required prior to receiving free tickets to alcohol-related events. 4. Sweepstakes is open to all residents of the U.S. and Canada except advertisers, their employees, their advertising and promotion agencies, and the families of each. Void wherever taxed, restricted or prohibited by law. Prizes are not transferable; may not be exchanged or substituted; cannot be redeemed for cash; must be taken in their entirety; no substitutions permitted. Taxes, if any, are the responsibility of the individual winners. 5. Entry in sweepstakes constitutes permission to use winners’ names and photograph for advertising and publicity purposes, without further compensation to winners. For names of prize winners, send a stamped, self-addressed envelope to: "Blue Ridge Country Beerfest Promotion" — Winners, P.O. Box 21535, Roanoke, VA 24018.</textarea>
</div>
</li>
<li class="section">
<h3>Subscribe / Win!</h3>
<div>While you don't have to subscribe to win, we hope you will!</div>
</li>
<li>
<label class="desc">Sweepstakes Selection</label>
<div class="col">
<span><input id="choice1" name="mc" class="field radio" type="radio" value="Robots" checked="checked" />
<label class="choice" for="choice1">Robots</label></span>
<span><input id="choice2" name="mc" class="field radio" type="radio" value="Monkeys"/>
<label class="choice" for="choice2">Monkeys</label></span>
</div>
</li>
<li>
<label class="desc">Official Rules</label>
<div class="col">
<span><input class="checkbox" type="checkbox" name="chk" onClick="apply()" value="accept" />
<label class="choice">I accept the terms and conditions from the "Official Rules" above.</label></span>
</div>
</li>
<li class="buttons">
<input id="saveForm" class="btTxt" type="submit" name="sub" value="Submit" disabled="disabled" />
</li>
</ul>
<div style="display: none;">
<input type="hidden" name="referrer" value="<?php echo $referrer; ?>" />
<input type="hidden" name="campaignID" value="<?php echo $campaign; ?>" />
</div>
</form>
</div>
Without waiting for your edit, I can almost guarantee that the problem lies in some other bit of JS code on your page which is changing the state to something other than you think it is. There's simply no way I can see this being related to CSS. I advise you check the DOM and walk through the method executing in firebug.
And fwiw I'll also wager that your function should be rewritten:
function apply()
{
with(document.form1) { sub.disabled = !chk.checked; }
}