Only numbers are to be entered in the Phone number input box. Code is given below. Also, I want users to enter only text in the Name input box. Pls, help using simple js.............................................................................................................................
<!DOCTYPE html>
<html>
<head>
<title>Navya Malhotra - Contact Us</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
<link rel="stylesheet" href="styles/contact.css" type="text/css">
<script>
var h2 = document.getElementById('h2')
function setValue(e, el) {
var element = document.getElementById(el)
element.innerHTML = e;
}
</script>
</head>
<body>
<div class="navbar">
<div class="title">
<p><span style="font-size: 50px;">N</span>avya <span style="font-size: 50px;">M</span>alhotra</p>
</div>
<div class="main-menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="nav_links">
<ul>
<li><img src="pics/Youtube.png" alt="The Source is down" style="height: 45px;"></li>
<li><img src="pics/Instagram.png" alt="The Source is down" style="height: 33px;"></li>
<li style="margin-top: 32px;"><img src="pics/Facebook.png" alt="The Source is down" style="height: 29px;"></li>
</ul>
</div>
</div>
<p class="home_title"><span style="font-size: 40px;">C</span>ontact <span style="font-size: 40px;">U</span>s</p>
<form action="" class="contact_form">
<input type="text" class="input_fields" pattern=".{8,}" required placeholder="Full Name" id="fullname"/>
<input type="email" class="input_fields" required pattern=".{13,}" placeholder="Your Email"/>
<input type="text/number" pattern=".{10,10}" class="input_fields" required placeholder="Phone number (+91)"/>
<select class="dropdown" id="dropdown" onchange="setValue(this.value, 'h1')" >
<option value="feedback">Feedback</option>
<option value="review">Review</option>
<option value="query">Query</option>
<option value="complain">Complaint</option>
<option value="custom">Custom</option>
</select>
<textarea class="text_area" cols="39" rows="8" minlength="50" maxlength="350" required placeholder="Your Review"></textarea>
<input type="submit" class="submit_button" id="submit_button"/>
</form>
<h1 id="h1"></h1>
<h1 id="h2"></h1>
</body>
</html>
Instead of
<input type="text/number" pattern=".{10,10}" class="input_fields" required placeholder="Phone number (+91)"/>
You can use type="number" and that only only accept numbers for your input.
<input type="number" pattern=".{10,10}" class="input_fields" required placeholder="Phone number (+91)"/>
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>
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.
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 new to web development. Now I am in a mess.
I want to show 4 random questions in a label. Say
Largest River in the world?
Largest ocean?
Largest Forest?
Largest Waterfall?
At the same time, the values [questions] should take into a hidden input box [for POST].
How to create it using Java Script?
My HTML Code is as follows
<ul class="sf-content"> <!-- form step two -->
<li>
<div class="sf_columns column_3">
<label id="qtext"> <strong>Question1?</strong></label>
</div>
</li>
<li>
<div class="sf_columns column_3">
<input type="text" placeholder="Answer" name="answer" data-required="true" >
<input id="qhtext" type="text" name="question" value="" readonly />
</div>
</li>
</ul>
I got the answer
<ul class="sf-content"> <!-- form step two -->
<li>
<div class="sf_columns column_3">
<label id="qtext"></label>
</div>
</li>
<li>
<div class="sf_columns column_3">
<input id="answer" type="text" placeholder="Answer" name="answer" data-required="true" >
<input id="qhtext" type="text" name="question" value="" readonly />
</div>
</li>
</ul>
The js is as follows
var questions = ["Largest River in the world?","Largest ocean?","Largest Forest?","Largest Waterfall?" ];
$(document).ready(function(){
getRandomQuestion();
});
function getRandomQuestion(){
//Math.floor(Math.random()*(max-min+1)+min); - random number between min and max
var randomQuestion = questions[ Math.floor(Math.random()*4)];
$("#qtext").text(randomQuestion);
$("#qhtext").val(randomQuestion);
}