when submit with empty value, there will should be error-msg at both of inputs. However, it is working correctly.
In side of script is validation for empty value if input empty value error-msg will be changed to display:block
this is the code below, anyone could help me i am very appreciate.
function validation(thisForm) {
//validation of fName
if (!thisForm.fname.value.length) {
document.getElementById('fname-error').style.display = "block";
return false;
}
//validation of lName
if (!thisForm.lname.value.length) //if there is no input to lName
{
document.getElementById('lname-error').style.display = "block";
return false;
}
return true;
}
.error-msg {
display: none;
color: red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>error-msg will not display correctly at the same time</title>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<legend>Application Name</legend>
<div class="name">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<span class="error-msg" id="fname-error">First name is required</span>
</div>
<div class="name">
<label for="lname">Last Name </label>
<input type="text" id="lname" name="lname" size="50">
<span class="error-msg" id="lname-error">Last name is required</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
The problem is that you're returning early in your validation() function. Change it to this:
<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" type="text/css" href="456.css">
<meta charest ="utf-8">
<title>error-msg will not display correctly at the same time</title>
<script>
function validation(thisForm) {
//validation of fName
if(!thisForm.fname.value.length)
{
document.getElementById('fname-error').style.display="block";
}
else
{
document.getElementById('fname-error').style.display="none";
}
//validation of lName
if(!thisForm.lname.value.length) //if there is no input to lName
{
document.getElementById('lname-error').style.display="block";
}
else
{
document.getElementById('lname-error').style.display="none";
}
if(!thisForm.fname.value.length || !thisForm.lname.value.length)
{
return false
}
return true;
}
</script>
<style>
.error-msg {
display: none;
color:red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}
</style>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<legend>Application Name</legend>
<div class="name">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<span class="error-msg" id="fname-error">First name is required</span>
</div>
<div class="name">
<label for="lname">Last Name </label>
<input type="text" id="lname" name="lname" size="50">
<span class="error-msg" id="lname-error">Last name is required</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
Related
JavaScript, jQuery Experts,
I have the following coding, It work perfect when i check it in JSFiddle, but it does not work when I insert it in a WordPress post, so what should I do?
JSFiddle example: https://jsfiddle.net/m1aaaqo9/11/
WordPrss page link: https://kahoothack.net/kahoot-flood/
Note: The login button does not work in WordPress post neither it accept password and username. It seems the JavaScript is not working there. So how to fix it?
Check my WordPress post and below see the login box why it is not working. Thanks
HTML Part
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
JavaScript Part
$(document).ready(function(){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html('All Feild Are Required').css('color','red');
}else if(name == 'admin' && pass == '123'){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html('User Are Not Valid');
}
});
});
CSS Part
h1{
font-size:25px;
margin:10px 0;
}
.form-box{
border:1px solid #d3d3d3;
padding:20px;
}
$(document).ready(function(){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html('All Feild Are Required').css('color','red');
}else if(name == 'admin' && pass == '123'){
$("#form").html('<h4>User Login Successfully</h4>Click').css('color','green');
}else{
$("#error").html('User Are Not Valid');
}
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
When you want to handle form submission in JavaScript, bind to the submit event of the form, not the click event of the submit button. Further, you need to cancel the default form submission event like so:
$('#form').submit(function handler(event) {
event.preventDefault(); // Cancel default form submission
const data = new FormData(this); // JQuery binds `this` to the form DOMNode
console.log("process the form data", data);
});
Keep in mind that form submission does not require JS by default. You're sometimes better off just submitting to the server and letting it do its work.
Remove all HTML, CSS and JS/jQuery code from your post and put just the following code inside your post:
<div class="container lh-custom">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
Save your post.
Then put following code in your current theme's (Aspire Pro) functions.php:
/* Add custom jQuery and CSS */
function lh_add_custom_js_css(){
?>
<script>
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Feild Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
});
});
</script>
<style>
.lh-custom h1{
font-size:25px;
margin:10px 0;
}
.lh-custom .form-box{
border:1px solid #d3d3d3;
padding:20px;
}
</style>
<?php
}
add_action( 'wp_footer', 'lh_add_custom_js_css' );
Save functions.php file and check the page again.
Please help me, I'm stuck.
Why doesn't the JavaScript below work? The script is checking if phone number and address is empty, but when the phone number and address field is entered, the alert still pops out.
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
const phone = document.getElementById("phoneNumberInput").value;
const address = document.getElementById("addressInput").value;
function checkingIsEmpty() {
if (phone == ''){
alert("Please insert your phone number");
return false;
}
if (address ==''){
alert("Please insert your address");
return false;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
I'd agree with #Madara's comment, that you should... just add required attribute on form inputs which are required and let the browser do the work for you
However, I believe the reason your code is not working is because you appear to be setting the const values of phone and address on entry to the screen... and then you're checking that initial value (rather than the latest value).
Instead you need to get the latest value from the controls as part of the function...
function checkingIsEmpty(){
if (document.getElementById("phoneNumberInput").value == ''){
alert("Please insert your phone number");
return false;
}
if (document.getElementById("addressInput").value ==''){
alert("Please insert your address");
return false;
}
return true;
}
(Minor edit, you also need to return true at the end of your function, otherwise your submit won't work)
simplest way is to check if (!phoneInput.value) { ... }
as empty string and null will return falsy value
The problem you are having is because you are assigning the value of the fields at the time the page loads. Not at the time the function is called on submit. If you move the variable assignment into the function it should work for you.
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
function checkingIsEmpty(){
const phone = document.getElementById("phoneNumberInput").value;
const address = document.getElementById("addressInput").value;
if (phone == ''){
alert("Please insert your phone number");
return false;
}
if (address ==''){
alert("Please insert your address");
return false;
}
return false;//for the example I don't want it to submit
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
You need to include the document.getElementById in your conditionals. Also, I would wrap both conditionals (Phone and Address) in another conditional so you can add classes for error styling on errored fields.
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
var phone = document.getElementById("phoneNumberInput").value;
var address = document.getElementById("addressInput").value;
function checkingIsEmpty(){
if (document.getElementById("phoneNumberInput").value == '' || document.getElementById("addressInput").value == '') {
if (document.getElementById("phoneNumberInput").value == ''){
alert("Please insert your phone number");
return false;
}
if (document.getElementById("addressInput").value == ''){
alert("Please insert your address");
return false;
}
} else {
alert('success');
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
The values of inputs are stored inside a constant, not a variable.
When page is loaded, the script is executed and the contents of actual inputs are stored.
When you're calling checkingIsEmpty() the values aren't refreshed.
I suggest you to get the value inside the checkingIsEmpty() function if you want to keep checking with javascript, but as suggested Madara in comments, you can use the required attribute <input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber" required>.
Checking inputs with required attribute or javascript is nice, but you have to check it server-side too. It's easy to press F12 and edit dom.
function checkingIsEmpty()
{
let phone = document.getElementById("phoneNumberInput").value;
let address = document.getElementById("addressInput").value;
if (phone == '')
{
alert("Please insert your phone number");
return (false);
}
if (address == '')
{
alert("Please insert your address");
return (false);
}
return (true); //You forgot to return true in case of your form is validated
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
This is my html file where I'm trying to use the autocomplete function where I want to use the data which I get from MySQL query which is first_name and last_name. I'm passing this data using flask but I'm unable to use it for autocomplete function.
Data format:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
<html>
<head>
<title>Autocomplete</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
</style>
</head>
<link rel="stylesheet" href="/static/style.css" type="text/css">
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
<script>
var first = {{ first|tojson }}
var last = {{ last|tojson }}
console.log(first)
$(function() {
$("#firstname").autocomplete({
source: first
});
$("#lastname").autocomplete({
source: last
}).autocomplete("widget").addClass("fixed-height");
});
</script>
</div>
</div>
</div>
</form>
</html>
The data format of your:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
is wrong. For details see option source.
If you cannot change the array on your server you can always flatten it on the client:
[].concat.apply([], first)
var first = [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]];
$(function() {
$("#firstname").autocomplete({
source: [].concat.apply([], first)
});
$("#lastname").autocomplete({
source: [].concat.apply([], first)
}).autocomplete("widget").addClass("fixed-height");
});
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="firstname"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="lastname"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
</div>
</div>
</div>
</form>
I have a html page which takes hour and minute inputs for exams.
- In another html or css document I would like to essentially run a countdown timer of HH:MM. i.e. if input was 1 hour and 10 min it would countdown from 01:10 to 00:00. I am assuming there is some way of calling the input values from one module to another.
- I would also like to make this countdown start when a start button is pressed
- The display module (Exam Display) is split into 4 quarters such that 4 exam timers can run concurrently. (I am hoping that in the case that there is no input value, when the start button is pressed nothing will happen with that particular timer)
I am attaching both jsfiddle and the code.
For ExamSetup.html & ExamSetup.css
-https://jsfiddle.net/vf113tux/1/
OR
ExamSetup.html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="ExamSetup.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="Exam 1">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 1</legend>
<label for="Exam Name">Name</label>
<input id="Name1" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing1H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing1M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 2">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 2</legend>
<label for="Exam Name">Name</label>
<input id="Name2" type="text" placeholder="Name"
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing2H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing2M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 3">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 3</legend>
<label for="Exam Name">Name</label>
<input id="Name3" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing3H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing3M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 4">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 4</legend>
<label for="Exam Name">Name</label>
<input id="Name4" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing4H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing4M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
<div class ="span7 text-center">
<a href="Display.html"><button type="submit" button id="button" class="btn btn-lg btn-primary">Next</button>
</div>
</div>
</body>
</html>
ExamSetup.css:
#charset "utf-8";
/* CSS Document */
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
button {
text-align: center;
}
For ExamDisplay.html & ExamDisplay.css
- https://jsfiddle.net/890e2dmq/ (Note for backgrounds are there simply to show the quarter partitions)
OR
ExamDisplay.html:
Untitled Document
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<button id="button" class="btn btn-lg btn-success">Start</button>
</body>
</html>
ExamDisplay.css:
#charset "utf-8";
/* CSS Document */
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }
Thank you very much! And I have checked through quite extensively for the last day but have found it rather difficult to find a proper simple countdown that I require. Many of the developed programs out are mainly for dates or they are for DD:HH:MM:SS and I was unable to edit the code to incorporate only HH:MM.
Ok, now the improoved version with 4 timers (CSS is up to you).
JSFIDDLE (full version)
$(document).ready(function(){
function start1(){
var h1 = $('input:text[name=h1]').val();
var m1 = $('input:text[name=m1]').val();
$('.counter1').html(h1+' : '+m1);
var inter1 = setInterval(function(){
m1--;
if(m1 == 0 && h1 != 0){
m1 = 59;
h1--;
}else{
if(h1 == 0 && m1 == 0){
clearInterval(inter1);
}
}
$('.counter1').html(h1+' : '+m1);
},60000)
}
$('#sub1').click(function(){
start1();
})
});
body{
position: relative;
}
.counter1{
width: 50%;
height: 50px;
background-color: rgba(255,0,0,0.5);
left: 0%;
top: 0px;
}
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src ="yourPathToYourJavascript.js"></script>
<div class="counter1"></div>
<input type="text" name="h1" value="Hours"></input><br>
<input type="text" name="m1" value="Minutes"></input><br>
<input type="submit" id="sub1" value="Couter #1"></input><br>
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Certificate Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
#main .my-form form .text-box .add-box strong {
font-size: 36px;
}
-->
</style>
</head>
<body>
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" /></p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a>
</p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 250 < n ) {
alert('Maximum Amount of Students');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Student <span class="box-number">' + n + '</span></label> <input type="text" name="students[]" value="" id="box' + n + '" /> Remove</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
When I hit submit, the php only gets the first value of the array
$students = ($_POST["students"]);
this is my php for that form, I don't know why it is only returning the first value of the array, this is my first time using forms with JavaScript so it might just be a simple error, I'm not sure
This is your problem:
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
You are closing your form prematurely because of the closing </div> and then opening a new form.
Your html is invalid and the browser tries to make sense of it, causing your students[] elements to be outside of your form so they never get posted.
The results may vary per browser (tested in Firefox), but validating your html should solve your problem.
Ok, I found the error. I have this working. You are not adding the new elements inside of your form. I rearranged the HTML as the following.
<form name="class" action="generate.php" method="post">
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" />
</p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a> </p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</div>
</div>
</form>
Just to clarify, I moved the opening tag of the form outside of your "main" div, and then I closed the form after the "main" div's closing tag. No other changes.