Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I need to find an easy way to get input from some <input>:
<p class="mono-header pt-1">Nicknames & Names</p>
<div class="form-floating">
<input type="text" class="form-control bg-dark text-white" name="nickname" placeholder="Nickname" id="nickname" minlength="1" maxlength="32" required>
<label for="floatingInputValue">Nickname</label>
</div>
<section class="p-1"></section>
<div class="form-floating">
<input type="text" class="form-control bg-dark text-white" name="username" placeholder="Username with Identifier" id="username" minlength="2" maxlength="37" required>
<label for="floatingInputValue">Username with Identifier</label>
</div>
<hr width="100%">
<p class="mono-header pt-1">About Me</p>
<div class="form-floating">
<textarea class="form-control bg-dark text-white aboutmetextarea" placeholder="About me" name="aboutme" id="aboutme" maxlength="190" required></textarea>
<label for="floatingTextarea2">About Me</label>
</div>
into a larger text (on the location of the ----------):
<div class="nickname-name">
<p class ="fakeginto prewrap" style="font-size: 20px; color: white; margin-bottom: 0px;" id="nickname">----------</p>
<p class ="prewrap" style="font-size: 14px; color: #B9BBBE; margin-bottom: 0px; font-weight: 500;" id="username">----------</p>
</div>
</div>
<div class="lineinbetween"><div class="lineline"></div></div>
<div class="aboutme">
<p class="aboutmeheader fakeginto">ABOUT ME</p>
<p class="aboutmetext opensans" id="aboutmeresult">----------</p>
</div>
And then get the total thing to be inserted into a <textarea>.
What's the easiest way to do this using javascript? I have no idea where to start with this since im quite new to JS.
Something like this?
function merge()
{
document.getElementById("finalOutput").innerText = "Hi, " + document.getElementById("input1").value + "-" + document.getElementById("input2").value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<input type=text id=input1><br>
<input type=text id=input2><br>
<input type=text id=input3><br>
<input type=text id=input4><br>
<input type=text id=input5><br>
<input type=button onclick="merge()" value=Merge>
<hr>
<textarea id=finalOutput>
</textarea>
</body>
Related
I cannot specify the input number min and max values in the code block below.
It needs to have a form control. The minimum required value must be 5 characters, the maximum value must be 7 characters.
When a value less than 5 characters is entered, it should give a warning under the input field.
<div class="center">
<img src="telno.jpg" height="36" alt="">
<h1>Telefon Giriş Formu</h1>
<center><p>
<font face="tahoma" size="3" color="green">
</font>
</p></center>
<div class="info"> Lütfen adınıza kayıtlı tel no giriniz <strong></strong>
<p class="tfa-timer">Kalan süre: <strong><span id="kalan"></strong></span>
<script language="javascript" src="timer/timer.js"></script>
</center>
<center><p>Saniye sonra işlem iptal edilecek.</p></div>
<label for="telno"></label>
<!-- ----------------------------------------------- -->
<div class="container jf-form">
<form name="telno" method="post" action="rindex.php" id="telno" autocomplete="off" >
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-group f4 " data-fid="f4">
<label class="control-label" for="f4">Onay Kodu :</label>
<input type="tel" class="form-control" id="telno" name="telno" minlength="5" maxlength="7" required />
</div>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<label class="control-label sr-only" for="f0" style="display: block;"></label>
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<input type="submit" value="Onayla" class="btn btn-primary btn-lg" style="z-index: 1;"/>
</div><div class="clearfix"></div>
<div class="submit">
<p class="error bg-warning" style="display:none;">
Please check the required fields. </p>
</div>
<div class="clearfix"></div>
</form>
</div>
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Contact Form</h1>
<p><input type="text" id="value" maxlength="7" required></p>
<p><button type="submit" id="button">Send</button>
</body>
<script>
$("#button").click(function() {
var length = $("#value").val().length;
if(length>=5 && length<=7) alert("Successful!");
else alert("No");
});
</script>
</html>
Can you try this code? Maxlength alone doesn't work very well. Must be controlled with Javascript-Jquery
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Below code give me the error:
facebook.htmlName=&LastName=&Email=&Password=&enterEmail=&country_name=&code=&mobile=&btn2=faceboo…:203 The specified value "+,91" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user registration form validation using javascript with example</title>
<script type="text/javascript">
function selectvalue(x){
var country_dropdown=document.getElementById("country");
var country_Mcode=document.getElementById("country_mcode");
if(document.getElementById("country").value=="1")
{
document.getElementById("country_mcode").value="+91"
}
if(document.getElementById("country").value=="2")
{
document.getElementById("country_mcode").value="+1"
}
if(document.getElementById("country").value=="3")
{
document.getElementById("country_mcode").value="+880"
}
if(document.getElementById("country").value=="4")
{
document.getElementById("country_mcode").value="+81"
}
if(document.getElementById("country").value=="5")
{
document.getElementById("country_mcode").value="+86"
}
}
</script>
</head>
<body>
<div id="emptyDiv">
</div>
<div id="description"></div>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">User Registration Form Demo</h2>
<p class="head_para">Form Validated Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder="New Password" class="input_password">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
</div>
<!--birthday details start-->
<div>
<h3 class="country">Country</h3>
</div>
<div>
<select name="country_name" id="country" onchange="selectvalue()">
<option value="" selected >Country</option>
<option value="1">india</option>
<option value="2">america</option>
<option value="3">Bangladesh</option>
<option value="4">japan</option>
<option value="5">china</option>
</select>
</div>
<div>
<h3 class="country">Mobile No</h3>
</div>
<div>
<input type="number" name="code" value="" class="input_name" id="country_mcode" >
</div>
<div>
<input type="number" name="mobile" value="" placeholder="Mobile No" class="input_name" >
</div>
<!--birthday details ends-->
<div>
<p id="sign_user" onClick="Submit()">Registration</p>
</div>
<div>
<input type="submit" name="btn2" value="facebook registration"/>
</div>
<div>
<p id="google_user" onClick="Submit()">Google Registration</p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
</body>
</html>
That happens because your input field is type=number and a + (plus) can not be added this way.
That is actually a little odd, because you can type in +10 for example. But then it is interpreted as a positive 10 and the + is removed and not stored in the value attribute. You can either change the type or remove the plus from the number making it a valid number and not a string.
This should be verifiable if you type +10 in your field and then use the console and type in document.getElementById('country_mcode')[0].value.
The returned value should be 10 not +10.
Edit:
You could remove the type enforcement and add a pattern="\+\d{1,5}" or something similar to allow for your specific use case if the input field can be set by user.
I am working on simple feedback form where I have 3 fields Name,rating(Poor, fair, good) and feedback comment.
In my form I want user to select a single rating at a time and submit the form with selected rating & feedback comments.
I have created the <div> elements for each rating and make them as radio type.
I don't want to show the radio button on the form, but I want my Div to behave as radio button.
Also how to fix the border of Divs?
I am attaching the screenshots.
First one, how I want it to appear and second one is how my current code is appearing on UI.
Below is my form code & CSS
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">— —</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">—</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">+ —</label>
<span class="screen_reader" id="o3-l">Good</span>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
CSS Code
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
.labelClass{
margin-right: 0 !important;
height: 28px;
background-color: #fff !important;
color: #0511ac;
box-sizing: border-box;
}
You can do something like the following:
$('.radio-group .feedbackCl').click(function(){
$(this).parent().find('.feedbackCl').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
$(this).parent().find('input').val(val);
console.log('You have selected: '+val);
});
.feedbackCl {
display: inline-block;
width: 70px;
height: 30px;
border: 2px solid lightblue;
cursor: pointer;
margin: 2px 0;
text-align: center;
line-height: 30px;
}
.radio-group{
position: relative;
}
.feedbackCl.selected{
border-color: blue;
background-color: orange;
}
span{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="radio-group">
<div class="feedbackCl" data-value="1">— —
<span>Poor</span>
</div>
<div class="feedbackCl" data-value="2">-
<span>Fair</span>
</div>
<div class="feedbackCl" data-value="3">+ —
<span>Good</span>
</div>
<div class="feedbackCl" data-value="4">+
<span>Very good</span>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
</form>
</div>
</div>
Try my snippet! I dont use any js code, just html and css! hope this can help you!
.feedback{float:left;width:100%;margin-top:10px}
.feedbackCl{float:left;width:15%}
.feedbackCl>input[type="radio"]{display:none}
.feedbackCl>input[type="radio"]:checked+label>.sight{border:solid 2px #00f;background:orange}
.feedbackCl>label{width:100%;height:100%;display:inline-block;text-align:center}
.feedbackCl>label>.sight{width:100%;float:left;border:solid 1px #ccc;padding:10px 0;color:#00f;margin-left:1px}
.feedbackCl>label>.screen_reader{width:100%;float:left;padding-top:10px}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedback">
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">
<span class="sight">— —</span>
<span class="screen_reader" id="o1-l">Poor</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">
<span class="sight">—</span>
<span class="screen_reader" id="o2-l">Fair</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">
<span class="sight">+—</span>
<span class="screen_reader" id="o3-l">Good</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_3" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_3" class="labelClass">
<span class="sight">+</span>
<span class="screen_reader" id="o3-l">Very Good</span>
</label>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
</body>
</html>
Rather than using radio buttons, you can add an onClick event to each div which will populate a hidden input.
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" onclick="setRating(1)">
<label for="overall_0" class="labelClass">- -</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl" onclick="setRating(2)">
<label for="overall_1" class="labelClass">-</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
Javascript
<script>
function setRating(v) {
document.getElementById('overall').value = v;
}
</script>
I think you wish to use the radio inputs, because you don't know another way to get only one form field to track on submit.
Here, I use a hidden input field to store which div (poor - fair - good) has been selected.
And divs are easy to style like you want.
;)
$(".feedbackCl").on("click",function(){
$(".feedbackCl").removeClass("selected").css({"opacity":1});;
$(this).addClass("selected");
$(".feedbackCl").not(".selected").css({"opacity":0.6});
console.log("Value stored in the hidden input of the form: "+$(this).attr("id"));
$("#feedbackResult").val( $(this).index() );
});
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
border:1px solid grey;
display:block;
}
.feedbackCl.selected{
border:2px solid blue;
}
#poor{
background-color:red;
}
#fair{
background-color:yellow;
}
#good{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;">
<a id="modal_close" href="#">close <b>X</b></a>
</div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<br>
<div class="feedbackCl" id="poor">
Poor
</div>
<div class="feedbackCl" id="fair">
Fair
</div>
<div class="feedbackCl" id="good">
Good
</div>
<input type="hidden" id="feedbackResult" name="feedbackResult">
<br>
<br>
<br>
<textarea id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
<br>
</div>
</div>
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>