I have HTML and JavaScript code, which must, after clicking submit, change the page. The problem is, when I click the submit button, the page remains the same.
Thanks for the help.
HTML:
<html>
<head>
<title>MyApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="cart" action="/page" method="POST">
<div id="navigation">Select ID:
<select id="state" type="text">
<option value>-select-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
<div>
<input type="submit" value="submit" id="submit">
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript:
function() {
"use strict";
var state = document.getElementById('state');
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cart').addEventListener('submit', estimateTotal);
var btnEstimate = document.getElementById('submit');
btnEstimate.disabled = true;
state.addEventListener('change', function() {
if (state.value === '') {
btnEstimate.disabled = true;
} else {
btnEstimate.disabled = false;
}
});
});
function estimateTotal(event) {
event.preventDefault();
if (state.value === '') {
alert('Please choose your shipping state.');
state.focus();
}
}
})();
Related
Any way of making this code work with a select dropdown instead of a button? I am trying to use this to fill in a address from a dropdown and allow the user to modify as needs are needed.
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var TestVar1 = form.input[0].checked;
var TestVar2 = form.input[1].checked;
if (TestVar1 == true) {
form.textbox.value = "Full Home Automation Package";
} else if (TestVar2 == true){
form.textbox.value = "Some Other Package";
} else if (TestVar1 == false && TestVar2 == false) {
form.textbox.value = "";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
<INPUT TYPE="radio" NAME="input" VALUE="red" onChange="testResults(this.form)">Service 1<P>
<INPUT TYPE="radio" NAME="input" VALUE="blue" onChange="testResults(this.form)">Service 2<P>
<P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div><p>
</FORM>
</BODY>
thanks for any help
You can use onchange on select and then if the value matches change the text of the input.
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults(value) {
let textbox = document.getElementById("textbox");
if (value === '') {
textbox.value === '';
} else if (value === 'service1') {
textbox.value = 'Full Home Automation Package';
} else if (value === 'service2') {
textbox.value = "Some Other Package";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
<select onchange="testResults(value)" name="service">
<option disabled selected>Choose one</option>
<option value="service1">service1</option>
<option value="service2">service2</option>
</select>
<P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div>
<p>
</FORM>
</BODY>
</html>
Im sorry if this is a bit of a novice quest. I've only recently started learning. I'm trying to use jQuery to append a series of input text boxes onto my website but nothing I've tried has worked so far.
HTML doc
<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="testjavascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<head>
<titleTest Web App</title>
<h1>Test Number 1</h1>
</head>
<button onclick="meth_hide_show()">Hide/Show</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
<option value="Pipe_crack">Pipe Crack</option>
</select>
<br>
<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
<option value="N/S">Nature Strip</option>
<option value="Road">Road</option>
<option value="n/s_rd">Nature Strip & Road</option>
</select>
<form>
<label for="meters">Number of Meters:</label>
<input type="number" id="ren_meter" name="ren_meter">
</form>
</div>
<button id="save_meth" onclick="appendmethd()">Add Methodology</button>
<div class="meth_append">
</div>
</div>
</html>
Javascript doc:
function meth_hide_show() {
var x = document.getElementById("methodology");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function appendmethd() {
var meth=document.getElementById("methodology")
$("meth_append").append(meth)
}
Try this
function meth_hide_show() {
//retrieve the jquery object
var x = $("#methodology");
if (x.is(':visible')) {
//if its visible, hide it
x.hide();
} else {
//else show it
x.show();
}
}
function appendmethd() {
var meth=$("#methodology");
$(".meth_append").append(meth);
}
Full Question: How do I redirect the user to another HTML page using my button after the program checks if the email input entered by the user is valid using the automatic email input validation built into the browser? I'm assuming I would have to use an if/else statement in JavaScript?
Code:
<!DOCTYPE html>
<html>
<head>
<title>Testing Web Page!</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<script>
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('emailinput').value);
}
/* function checkEmail(){
if(!document.getElementById("emailinput").checkValidity()){
alert("input not valid!");
}
}
*/
function myFunction() {
logOptions();
logEmail();
}
</script>
<!-- <div class="input form"> -->
<form id="inputform">
<input id="emailinput" type="email" placeholder="Email Address">
<span id='errorMessage'></span>
<select name="Interests">
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<!-- Sign up now button -->
<div id="container">
<button id="submitButton" form="inputform" onclick="myFunction()">Sign up now</button>
</div>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
not sure where this "automatic email input validation" that you mention,so i just put the redirection script inside myFunction.
if you try it, it will redirect to stackoverflow when you click the button.
<!DOCTYPE html>
<html>
<head>
<title>Testing Web Page!</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<script type="text/javascript">
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
}
function logEmail() {
console.log(document.getElementById('emailinput').value);
}
/* function checkEmail(){
if(!document.getElementById("emailinput").checkValidity()){
alert("input not valid!");
}
}
*/
function myFunction() {
logOptions();
logEmail();
window.location.href = "http://stackoverflow.com";
return false;
}
</script>
<!-- <div class="input form"> -->
<form id="inputform">
<input id="emailinput" type="email" placeholder="Email Address">
<span id='errorMessage'></span>
<select name="Interests">
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<!-- Sign up now button -->
<div id="container">
<button id="submitButton" form="inputform" onclick="return myFunction();">Sign up now</button>
</div>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
later if you already have the validation method, you can just use something like this
if(valid)
window.location.href="url to valid email page";
else
window.location.href="url to error page";
onkeyup event always check your input. and validate email regex check your input. I think it solved your requirement.
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('emailinput').value);
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function checkEmail(){
var str = document.getElementById("emailinput").value;
document.getElementById("errorMessage").innerHTML = validateEmail(str);
}
function myFunction() {
var str = document.getElementById("emailinput").value;
if(validateEmail(str)){
logOptions();
logEmail();
}
}
<!DOCTYPE html>
<html>
<head>
<title>Testing Web Page!</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<!-- <div class="input form"> -->
<form id="inputform">
<input id="emailinput" type="email" placeholder="Email Address" onkeyup="checkEmail()">
<span id='errorMessage'></span>
<select name="Interests">
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<br><br>
<!-- Sign up now button -->
<div id="container">
<button id="submitButton" form="inputform" onclick="myFunction()">Sign up now</button>
</div>
</body>
</html>
I have three different forms, when each form is filled the keypress "enter" fires and shows a picture. I have two pictures and both are firing at the same time but I want one to fire when enter is pressed once and the other one fired when the second form is completed but they both fire at the same time.
This is my HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Opdracht4_5.js"></script>
<link rel="stylesheet" href="Opdracht%204_5.css">
<title></title>
</head>
<h1 span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
<form name="form1" onsubmit="validateForm()" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="showField()">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<div id="divName"></div>
<img id="check" src="check.png">
</fieldset>
</form>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id= "fieldset2">
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText">
<img id="check2" src="check.png">
</fieldset>
</form>
<form>
<fieldset id="fieldset3">
<legend>Step 3</legend>
I confirm that all provided data is accurate? <br>
<input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
</fieldset>
</form>
</body>
</html>
This is my JS:
function showField(){
var selectDropDown = $("#step1");
var value = selectDropDown.val();
var insertDiv = $("#divName");
var innerHtmlString = "";
var value2 = $("#Yes")
if(value > 0){
innerHtmlString = "<b>Please provide full names: </b> <br/>";
}
for(i = 0; i < value; i++){
innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
}
insertDiv.html(innerHtmlString);
};
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
$("#check").show();
}
});
$(document).on("")
function validateForm(){
alert("test");
}
$(Document).on("click",function(){
});
$( document ).ready(function() {
$("#check").hide();
$("#specialText").hide();
$("#companyText").hide();
$("#check2").hide();
$("#companyYes").on("click", function() {
$("#companyText").show();
});
$("#companyNo").on("click", function() {
$("#companyText").hide();
});
$("#specialYes").on("click", function() {
$("#specialText").show();
});
$("#specialNo").on("click", function() {
$("#specialText").hide();
});
});
$(document).ready();
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
$("#check2").show();
}
});
$(document).on("")
How do I fix this?
You have two $(document).on("keypress", function {}) events which should be one and you can check whether the #check is visible. If it is not visible then show this otherwise show the second image as below.
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
if($("#check").is(':visible')) {
$("#check2").show();
} else {
$("#check").show();
}
}
});
Notes:
You had two $(document).on("") which is invalid and should be
removed (commented below).
And the Document in $(Document).on("click",function(){}) is also
wrong and should be removed.
Also, in your html the h1 tag is not closed properly as <h1 span
class="white"> which should be <h1> <span class="white">
Working snippet:
function showField(){
var selectDropDown = $("#step1");
var value = selectDropDown.val();
var insertDiv = $("#divName");
var innerHtmlString = "";
var value2 = $("#Yes")
if(value > 0){
innerHtmlString = "<b>Please provide full names: </b> <br/>";
}
for(i = 0; i < value; i++){
innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
}
insertDiv.html(innerHtmlString);
};
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
if($("#check").is(':visible')) {
$("#check2").show();
} else {
$("#check").show();
}
}
});
//$(document).on("")
function validateForm(){
alert("test");
}
/*$(Document).on("click",function(){
});*/
$( document ).ready(function() {
$("#check").hide();
$("#specialText").hide();
$("#companyText").hide();
$("#check2").hide();
$("#companyYes").on("click", function() {
$("#companyText").show();
});
$("#companyNo").on("click", function() {
$("#companyText").hide();
});
$("#specialYes").on("click", function() {
$("#specialText").show();
});
$("#specialNo").on("click", function() {
$("#specialText").hide();
});
});
/*$(document).ready();
$(document).on("keypress", function (e) {
if (e.which == 13 || e.keyCode == 13){
$("#check2").show();
}
});
$(document).on("")*/
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Opdracht4_5.js"></script>
<link rel="stylesheet" href="Opdracht%204_5.css">
<title></title>
</head>
<h1> <span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
<form name="form1" onsubmit="validateForm()" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="showField()">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<div id="divName"></div>
<img id="check" src="check.png">
</fieldset>
</form>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id= "fieldset2">
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText">
<img id="check2" src="check.png">
</fieldset>
</form>
<form>
<fieldset id="fieldset3">
<legend>Step 3</legend>
I confirm that all provided data is accurate? <br>
<input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
</fieldset>
</form>
</body>
</html>
I'm making an app for the overwolf app contest(http://www.overwolf.com/nvidia-app-challenge/) and in the options page, I want to be able to store the options in localStorage so I can access it from any page, at any time.
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Battle Stats</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="windowManagement.js"></script>
<script>
function toggleDisabled(_checked) {
document.getElementById('warnValue').disabled = _checked ? true : false;
}
//init
var ddl = document.getElementById('options_class');
var length = 5
for (var i = 0; i < length; i++){
if (ddl.options[i].value == localStorage.getItem("options_playerClass")){
ddl.options[i].selected = true;
break;
}
}
function setLocalStorageData()
{
var playerClass = '';
playerClass = document.getElementById("options_class").value;
localStorage.setItem("options_playerClass", playerClass);
alert(localStorage.getItem("options_playerClass"));
}
</script>
</head>
<body>
<div onmousedown="dragResize('BottomRight');">
<div id="content" onmousedown="dragMove();">
<div class="outlined">
<h1>Options</h1>
<form>
<p id="output"></p>
<input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br>
<input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning
<div class="optionInner">
<p> Warn me at:
<input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue">
</p>
<p>Class:
<select name="options_class" id="options_class" class="optionValue">
<option value="smg">SMG</option>
<option value="plasma">Plasma Bomber</option>
<option value="medic">Medic</option>
<option value="rail">Rail</option>
<option value="tesla">Tesla</option>
</select>
</p>
</div>
</form>
</div>
<p>Close<span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p>
</div>
</div>
</body>
</html>
The error message is:
Uncaught TypeError: Cannot read property 'options' of null
Any help is appreciated!
Your javascript is loaded before the DOM is loaded.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Battle Stats</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="windowManagement.js"></script>
</head>
<body>
<div onmousedown="dragResize('BottomRight');">
<div id="content" onmousedown="dragMove();">
<div class="outlined">
<h1>Options</h1>
<form>
<p id="output"></p>
<input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br>
<input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning
<div class="optionInner">
<p> Warn me at:
<input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue">
</p>
<p>Class:
<select name="options_class" id="options_class" class="optionValue">
<option value="smg">SMG</option>
<option value="plasma">Plasma Bomber</option>
<option value="medic">Medic</option>
<option value="rail">Rail</option>
<option value="tesla">Tesla</option>
</select>
</p>
</div>
</form>
</div>
<p>Close<span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p>
</div>
</div>
<script>
function toggleDisabled(_checked) {
document.getElementById('warnValue').disabled = _checked ? true : false;
}
//init
var ddl = document.getElementById('options_class');
var length = 5
for (var i = 0; i < length; i++){
if (ddl.options[i].value == localStorage.getItem("options_playerClass")){
ddl.options[i].selected = true;
break;
}
}
function setLocalStorageData()
{
var playerClass = '';
playerClass = document.getElementById("options_class").value;
localStorage.setItem("options_playerClass", playerClass);
alert(localStorage.getItem("options_playerClass"));
}
</script>
</body>
</html>
JavaScript is getting executed prior to dom objects load. Place the entire script block at the end of the page:
<script type="text/javascript">
//All your code here
</script>
</body>
</html>