I want to fill out an invitation.
Under recipient name I type in the recipient name and then reload the page but nothing happens. The text I put there still remains along with the organization name, event date, url, and host name.
Such as under recipient name I put Gwendalyn Bears and Organization Name I put Tech Industries. Then when I reload the page those names are still there.
Below is my javascript code. It is only two lines but that's all I got at the moment.
function resetForm() {
document.getElementById("recipientName").value = default;
}
My html document so you will know what I am doing. Just so you know I am having to put Javascript into the code. Variables in a form is what it is called.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:
</label>
<input type="text" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT3215 tasks.
</footer>
<script src="invite.js"></script>
Related
I'm creating a website with a form and I can't get the validation to work, and can't figure out what I'm doing wrong. I've tried everything I can think of. The PHP works and it will submit, but it will always submit, and won't stop itself from submitting.
<!DOCTYPE html>
<html lang="En">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="a website for carley Knight art">
<meta name="keywords" content="art artist painter painting store fine-art">
<link rel="favicon icon" href="Images/favicon.ico">
<title>Carley Knight Art</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="slicknav.css">
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slicknav#1.0.8/dist/jquery.slicknav.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.3/dist/jquery.validate.min.js"></script>
<script src="js/final.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav_menu').slicknav({
prependTo: "#mobile_menu"
});
});
</script>
</head>
<body>
<header>
<img src="Images/Pink%20Stationery%20Literacy%20Google%20Classroom%20Header.png" alt="header">
</header>
<Nav id="mobile_menu"></Nav>
<nav id="nav_menu">
<ul>
<li><a class="current" href="Index.html">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Shop</li>
<li>FAQs</li>
</ul>
</nav>
<main>
<section>
<div id="top">
<h1>Homepage</h1>
<p>Welcome to Carley Knight Art!</p>
</div>
<img src="Images/IMG_2995-768x1024.jpg" alt="carley knight and art" class="center" id="carley">
<p>Hello My name is Carley Knight and I'm an artist living in Milwaukee, WI. I make abstract art in a variety of different mediums, including fibers, acrylics, and digital.</p><br>
<button id="readMore">Read More</button>
</section>
<aside>
<form action="sendmail.php" method="post" name="contact_form" id="contact_form">
<fieldset>
<legend>sign up now!</legend><br>
<p>Sign up for my email list and get a free mini coloring book!</p><br>
<img src="Images/minicoloirngbook.jpg" alt="mini coloring book"><br>
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name"><span>*</span><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name"><span>*</span><br>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email"><span>*</span><br>
<label for="verify">Verify Email:</label>
<input type="email" name="verify" id="verify"> <span>*</span><br>
<div id="buttons">
<input type="submit" id="submit" value="Sign Up">
</div>
</fieldset>
<script>
$("#contact_form").validate();
debug: true
</script>
</form>
</aside>
</main>
<footer>©copywrite 2021 Carley Knight Designs</footer>
</body>
</html>
In HTML all you have to do is give element input the attribute required.
If you wish for more advanced validation then you have to do it in javascript.
<form>
<input type="text" required>
<input value="GO" type="submit">
</form>
I have a single page website that has three buttons (styled with jQuery Mobile) as a menu which, when clicked, show different content that is contained on hidden "div". However, on the main page I have a form connected to mysql which lets users join in, but when you fill the form and click the button "submit", the page "kind of reloads" and the header buttons don't work anymore. So, when form is submitted on main div, menu stops to work (it doesn't display and hide content anymore) Is there any solution to this?
(I've included a snippet but here the problem is not seen as I can't connect it to mysql).
function updateContent(hash) {
var newClass = hash.substring(1);
var newContent = $("." + newClass).html();
$("#content").html(newContent);
$("#content").css("display", "none");
}
if (window.location.hash) {
updateContent(window.location.hash);
}
$(".contentUpdate").click(function() {
updateContent($(this).attr("id"));
$("#content").fadeIn();
$(".contentUpdate").removeClass("ui-btn-active");
});
.hiddenContent {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="menu">
<div data-role="navbar">
<ul>
<li><a class="contentUpdate" id="#swim">Swim</a></li>
<li><a class="contentUpdate" id="#cycle">Cycle</a></li>
<li><a class="contentUpdate" id="#run">Run</a></li>
</ul>
</div>
<!-- /navbar -->
</div>
<div id="content">
FORM
<div id="joinForm">
<form method="post">
<label for="name">Name and Surname(s)</label>
<input type="text" id="name" placeholder="Adam Smith" value="" name="name" />
<label for="email">Email</label>
<input type="text" id="email" placeholder="example#esade.edu" value="" name="email" />
<label for="phone">Phone</label>
<input type="text" id="phone" placeholder="+34 671 542 893" value="" name="phone" />
<fieldset data-role="controlgroup">
<p>Choose the sports you're interested in:</p>
<input type="checkbox" id="swimming" name="swimming" value="" />
<label for="swimming">Swimming</label>
<input type="checkbox" id="cycling" name="cycling" value="" />
<label for="cycling">Cycling</label>
<input type="checkbox" id="running" name="running" value="" /> <label for="running">Running</label>
</fieldset>
<div align="right">
<button type="submit" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" name="submit" id="submit" value="submit">Submit</button>
</div>
</form>
</div>
</div>
<div class="hiddenContent swim">
swim
</div>
<div class="hiddenContent cycle">
cycle
</div>
<div class="hiddenContent run">
run
</div>
Thank you!
I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>
You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}
There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/
I have a form with drop down, text boxes and one submit button. I can submit form with ENTER key like just add ng-keypress="addBookmarkOnEnter($event) with any text boxes and it'll work.
But can I do same task without adding ng-keypress with any text box?
Here is my form:
<form>
<div><input type="text" class="greyPhold" placeholder="http://" data-ng-model="bookmark.url" /></div>
<div class="forSelect">
<div class="selHead" data-ng-class="{hOpen: popup.dropdownStatus}">
<button data-ng-click="toggleDropdown()"><span data-ng-bind="popup.selectedCategory"></span></button>
<ul id="testDiv2" class="dropdownH">
<li data-ng-repeat="category in categories track by $index" data-ng-click="selectCategory($index)">
<div class="colony pull-left"><span>{{category.category_name}}</span></div>
<div class="pull-right"><input type="radio" name="tag" /><label></label></div>
</li>
</ul>
</div>
</div>
<div class="createColony">
<input type="text" class="whitePholder" placeholder="Create a new colony" data-ng-model="bookmark.categoryName"/>
</div>
<div class="complete text-center"><button type="submit" class="done" data-ng-click="addBookmark()">Complete</button></div>
</form>
hope this code would be help you
<html>
<head>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
</head>
<body bgcolor="gray">
<div id="container" ng-app='two_way' ng-controller="two_way_control" style="background-color:CCFF66">
<p style="padding:10px;">
<h1 align="center"> Search Product </h1>
</p>
<p align="center">
<form method="post">
<input type="text" ng-model="searchText" placeholder="Enter a name here" required>
<button ng-click="check(searchText)">Search</button>
</form>
</p>
Search Item Name: {{searchText}}
</div>
</body>
</html>
and use given code inside controller
$scope.check=function(searchText){};
Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.