I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">
Related
I am trying to input through a form and when I submit the button, it is not working. Kindly help me with this. I want to display the input taken from the form and display it in the span tags at the bottom.
Below is my HTML and JavaScript:
// Variables are being declared.
var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;
function submitDetails() {
sRecipientName = document.getElementById("recipient").value;
console.log(sRecipientName);
sOrganizationName = document.getElementById("organization").value;
console.log(sOrganizationName);
sDate = document.getElementById("date").value;
console.log(sDate);
sURL = document.getElementById("URL").value;
console.log(sURL);
sHostName = document.getElementById("host").value;
console.log(sHostName);
}
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" 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="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="submitDetails()">
</form>
</section>
<article id="placeholderContent">
<span id="recipientName">recipientName</span>!
<br/>
<br/> <span id="organizationName">organizationName</span> <span id="eventDate">eventDate</span> <span id="websiteURL">websiteURL</span>
<br/>
<span id="hostName">hostName</span>
</article>
First of all there is no need of a form for your use-case.
A <form> is required when you have to post some data to server, but in your case you just wanted to do some DOM manipulations which you can do without a form.
I have just written a function updateDetails() which takes the values from your inputs and overwrites your span's innerHTML with those values. On your submit button, I have changed it from a submit to a plain <button>, and on click I have just called the function updateDetails() to update the spans.
I have attached a snippet that will work in your use case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" 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="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<button onclick="submitDetails()">Submit</button>
</section>
<article id="placeholderContent">
<span id="recipientName">recipientName</span>!
<br>
<br>
<span id="organizationName">organizationName</span>
<span id="eventDate">eventDate</span>
<span id="websiteURL">websiteURL</span>
<br>
<span id="hostName">hostName</span>
</article>
<script>
function submitDetails(){
updateDetails("recipient", "recipientName");
updateDetails("organization", "organizationName");
updateDetails("date", "eventDate");
updateDetails("URL", "websiteURL");
updateDetails("host", "hostName");
}
function updateDetails(copyId, pasteId){
document.getElementById(pasteId).innerHTML = document.getElementById(copyId).value;
}
</script>
</body>
</html>
From what I understand, you are trying to change the placeholder text with the information from the form. You would want to first prevent the default behavior of the form submission by passing the event to the function in your submit (which I've changed to a button).
You would then want to have something set the innerHTML of the element to one of the values of the form.
var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;
function submitDetails(e) {
e.preventDefault();
sRecipientName = document.getElementById("recipient").value;
sOrganizationName = document.getElementById("organization").value;
sDate = document.getElementById("date").value;
sURL = document.getElementById("URL").value;
sHostName = document.getElementById("host").value;
document.getElementById('recipientName').innerHTML = sRecipientName;
document.getElementById('organizationName').innerHTML = sOrganizationName;
document.getElementById('eventDate').innerHTML = sDate;
document.getElementById('websiteURL').innerHTML = sURL;
document.getElementById('hostName').innerHTML = sHostName;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>My website</title>
</head>
<body>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" 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="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<button type="submit" onclick="submitDetails(event)">Submit</button>
</form>
</section>
<article id="placeholderContent">
<span id="recipientName"></span>
<br />
<br /> <span id="organizationName"></span> <span id="eventDate"></span> <span id="websiteURL"></span>
<br />
<span id="hostName"></span>
</article>
<script src="script.js"></script>
</body>
</html>
Make sure you are not using console.log(). First remove it.
Then you have to add an eventListener that works if form is submitted and to prevent default events.
Example:
<input value="I am" id="val1" >
<span id="output">
//JavaScript codes
let data = document.getElementById('val1').value;
document.getElementById('output').innerHTML = data;
But make sure those codes are in function that responds to the submit event
I am making a laravel based website and i have a login form and when i press "Register" i want to be switched with the register form but it's not working.Here is the code.
home.js:
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
home.blade.php
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
</body>
</html>
home.js is in public/js/home.js
Try this
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> //** Add jQuery
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<button>create</button>
<p class="message">Already registered? Sign In
</p>
</form>
<form class="login-form" id="loginID"> //******* add ID
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered? Create an account
</p>
</form>
</div>
</div>
</body> //** Missed the closing tag
</html>
Add this to you home.js file
#loginID{
display:none;
}
Working CODE SNIPPET
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
#loginID{
display:none;
}
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<button>create</button>
<p class="message">Already registered? Sign In
</p>
</form>
<form class="login-form" id="loginID">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered? Create an account
</p>
</form>
</div>
</div>
</body>
</html>
<div class="login-page">
<div class="form">
<form id="a" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="login">Not registered? Create an account</p>
</form>
<form id="b" class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="register">Already registered? Sign In</p>
</form>
</div>
</div>
Here are the script
$(document).ready(function () {
$('.register-form').hide();
$('.login-form').show();
$('.register').click(function () {
$('.register-form').show();
$('.login-form').hide();
});
$('.login').click(function () {
$('.register-form').hide();
$('.login-form').show();
});
});
I'm trying to do a homework assignment and having some issues. I'm supposed to validate a form with Javascript. Right now I'm trying to make sure that a user has checked at least one checkbox (out of four options) in order for the form to submit. (I've gotten other segments of validation to work, so the issue seems to be local to this part of code.)
This is what the html for the checkbox form looks like:
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
And this is what I've written to try to validate it using Javascript:
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
This isn't working; the form submits whether boxes have been checked or not.
I would really love to get some help here because I don't have any idea what I'm doing wrong. Like I said, the problem seems to exist somewhere in this specific code, because other validation in separate blocks of code does work.
This is the complete HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>
I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?
the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide
Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>
I need to prepend a huge DIV block, which can be seen at the bottom of the question.
My current idea would be to put inside one
$('#content').prepend();
and break each like up, when I need to insert the content of a variable. That would be all the places which says TMPL_VAR
The code would be quite hard to maintain and read.
Is there a clever way to do this?
<form action="" method="post">
<input name="anchor" value="<TMPL_VAR ID>" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="<TMPL_VAR ID>_title" value="<TMPL_VAR TI>" type="text" /> </div>
<div class="cellData"> <input name="owner" id="<TMPL_VAR ID>_owner" value="<TMPL_VAR OW>" type="text" /> </div>
<div class="cellData"> <input name="from" id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="<TMPL_VAR ID>_end_date" value="<TMPL_VAR ED>" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </div>
<div class="cellEdit"> Members <input value="Save" type="submit"> </div>
</div>
<div id="<TMPL_VAR ID>" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="<TMPL_VAR ID>_users" size="35" value="<TMPL_VAR US>" type="text" />
<label> Groups </label> <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
</span>
</div>
</div>
</form>
I would personally go for jQuery.tmpl() to handle this sort of issue.
This way you could specify a template like so:
<script type="text-x-jquery/template" id="template">
<form action="" method="post">
<input name="anchor" value="${id}" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="${id}_title" value="${ti}" type="text" /> </div>
<div class="cellData"> <input name="owner" id="${id}_owner" value="${ow}" type="text" /> </div>
<div class="cellData"> <input name="from" id="${id}_begin_date" value="${bd}" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="${id}_end_date" value="${ed}" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${in}/> Individuel <br> <input name="ctype" value="course" type="radio" ${co}/> Course </div>
<div class="cellEdit"> Members <input value="Save" type="submit"> </div>
</div>
<div id="${id}" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="${id}_users" size="35" value="${us}" type="text" />
<label> Groups </label> <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
</span>
</div>
</div>
</form>
</script>
and then with jQuery populate the template with
$('#template').tmpl(myData).appendTo('#myContainer')
which will insert the populated template into #myContainer given that you have data in the javascript scope myData wich corresponds to the data format specified in the template, and that you have defined a html element with an id of myContainer which is appendable.