I am wanting to show a div (depending on the the value input) but I am seeing no errors in the console to point me in the right direction but there is something wrong with my code:
<style type="text/css">
#outputOne{display: none;}
#outputTwo{display: none;}
#outputThree{display: none;}
</style>
</head>
<body>
<form method="POST" onsubmit="return showResults()">
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<input type="submit" id="submit" />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
<script>
function showResults(){
if(value <= 100){
document.getElementById('outputOne').style.display = "block";
return true;
} if(value > 500){
document.getElementById('outputTwo').style.display = "block";
return true;
}if(value > 10000){
document.getElementById('outputThree').style.display = "block";
return true;
}
}
</script>
If you want to see something you should prevent submit by returning false instead of true because now the form will be submited in all the cases and you will never see the div shown since the page will be refreshed.
Hope this helps.
You need to define value variable
And then return false on every if so that div will show on submit otherwise page will refresh and all default setting will be shown
Ok, so there are a few problems:
You never define value inside that function... you need to do that. Second, a form submission will refresh the page, undoing any DOM changes you did. This can be fixed by changing it to a button which calls your function. Here's an updated version of your code that works:
<style type="text/css">
.hide{display: none;}
.show{display: block;}
.submit{height:20px; width: 100px;}
</style>
</head>
<body>
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<button id="submit" class="submit" onClick="showResults()"></button>
<div id="outputOne" class="hide" >Value One</div>
<div id="outputTwo" class="hide" >Value Two</div>
<div id="outputThree" class="hide" >Value Three</div>
<script>
function showResults(){
var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value);
if(value <= 100){
document.getElementById('outputOne').className = "show";
} else {
document.getElementById('outputOne').className = "hide";
}
if(value > 500){
document.getElementById('outputTwo').className = "show";
} else {
document.getElementById('outputTwo').className = "hide";
}
if(value > 10000){
document.getElementById('outputThree').className = "show";
} else {
document.getElementById('outputThree').className = "hide";
}
}
</script>
I've also switched the css to use classes, which is a bit more flexible and better practice.
Credit to Zakaria Acharki and mohsin azeem for spotting the form error causing a refresh, and to the always-helpful charlietfl for that and for pointing out my own silly error for the submit button.
Try substituting oninput event for onsubmit event
<head>
<style type="text/css">
#outputOne {
display: none;
}
#outputTwo {
display: none;
}
#outputThree {
display: none;
}
</style>
<script>
function showResults() {
var value = this.value;
console.log(value);
if (value <= 100) {
divs[0].style.display = "block";
divs[1].style.display = divs[2].style.display = "none";
}
if (value > 500) {
divs[1].style.display = "block";
divs[0].style.display = divs[2].style.display = "none";
}
if (value > 10000) {
divs[2].style.display = "block";
divs[0].style.display = divs[1].style.display = "none";
}
}
window.onload = function() {
divs = document.querySelectorAll("div[id^=output]");
Array.prototype.forEach.call(document.forms[0].querySelectorAll("input")
, function(el) {
el.setAttribute("placeholder", "enter a number");
el.oninput = showResults;
});
}
</script>
</head>
<body>
<form method="POST">
<input type="text" id="valueOne" />
<br />
<input type="text" id="valueTwo" />
<br />
<input type="text" id="valueThree" />
<br />
<input type="submit" id="submit" disabled />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
</body>
Related
When users click submit, I've coded an error message to appear under each input field that is missing a value using DOM selectors. I also disabled the email file that opens when submit is clicked, using preventDefault().
However, when the user types into the text area, the messages don't disappear. I tried using a 'keydown' event, but I couldn't get it to work.
HTML code:
<body>
<header class="header">
<form action="mailto:me#fakeemail.com">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
</fieldset>
<input type="submit" value="Submit it!" class="submitIt" onsubmit="return checkForm();">
</form>
<br>
<script src="inline-error.js" charset="utf-8"></script>
<div class="returnHome">
Return Home
</div>
</header>
</body>
Javascript code:
var submitIt = document.querySelector(".submitIt");
submitIt.addEventListener("click", function checkForm(event) {
var fNameInput = document.querySelector("#fullname")
var streetAddInput = document.querySelector("#streetaddr")
if (fNameInput.value == "") {
var nameErrorMsg = document.querySelector("#nameerrormsg").style.display = "block";
event.preventDefault();
}
if (streetAddInput.value == "") {
var addrErrorMsg = document.querySelector("#addrerrormsg").style.display = "block";
event.preventDefault();
}
})
To see an immediate result in the code in its current state, hide the error messages before checking the input values.
var submitIt = document.querySelector('.submitIt');
submitIt.addEventListener('click', function checkForm(event) {
var nameErrorMsg = document.querySelector('#nameerrormsg');
var addrErrorMsg = document.querySelector('#addrerrormsg');
nameErrorMsg.style.display = 'none';
addrErrorMsg.style.display = 'none';
var fNameInput = document.querySelector('#fullname');
var streetAddrInput = document.querySelector('#streetaddr');
if (fNameInput.value == '') {
nameErrorMsg.style.display = 'block';
event.preventDefault();
}
if (streetAddrInput.value == '') {
addrErrorMsg.style.display = 'block';
event.preventDefault();
}
});
Having said that, here are some additional suggestions:
Use CSS for styling elements (not JavaScript)
Discourage inline JavaScript
Store DOM elements outside the scope of the event listener so you don't have to query the DOM every time you click
Consider utilizing the required attribute on the inputs for a quick win on styling
So...
<!-- form.html -->
<head>
<link rel="stylesheet" href="form.css">
</head>
<body>
<header class="header">
<form>
<fieldset>
<legend>Personal details</legend>
<p>
<label for="fullname">Full name:
<input type="text" name="fullname" id="fullname" required>
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label for="streetaddr">Street Address:
<input type="text" name="streetaddr" id="streetaddr" required>
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
</fieldset>
<input type="submit" value="Submit it!" class="submitIt">
</form>
</header>
<button id="returnhome">Return Home</button>
<script src="inline-error.js"></script>
</body>
/* form.css */
input:valid {
border: none;
}
input:invalid:required {
border: 1px solid red;
}
.errormsg {
display: none;
}
.show {
display: block;
}
// inline-error.js
var submitIt = document.querySelector('.submitIt');
var nameInput = document.querySelector('#fullname');
var nameError = document.querySelector('#nameerrormsg');
var addrInput = document.querySelector('#streetaddr');
var addrError = document.querySelector('#addrerrormsg');
var returnHome = document.querySelector('#returnhome');
returnHome.addEventListener('click', e => {
e.preventDefault();
history.back();
});
submitIt.addEventListener('click', event => {
const nameValue = nameInput.value;
const addrValue = addrInput.value;
if (!nameValue || !addrValue) {
event.preventDefault();
}
if (!nameValue) {
nameError.classList.add('show');
} else {
nameError.classList.remove('show');
}
if (!addrValue) {
addrError.classList.add('show');
} else {
addrError.classList.remove('show');
}
});
I have a main div and the sub div which is also called form because form is wrapped inside of div. I want is to close the form when clicked outside of the main div but it's not happening at all. Please help me how to fix this.
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(){
box.style.display = "block";
}
//Doesn't work. It's function is to close the form when click outside of the div.
window.onclick = function(event){
if(event.target == box){
form.style.display = "none";
}
}
#abc{
display: none;
background-color: #F44336;
}
<button id = "opener">
Open
</button>
<div id = "abc">
<!-- Login Authentication -->
<div id = "def">
<div>
<p>Welcome</p>
</div>
<br />
<div class = "login-auth" id = "cool">
<form method="POST">
<label>Email or Username:</label>
<input type = "text">
<br />
<label>Password:</label>
<input type = "password">
<br /><br />
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
JSFiddle Link Here: https://jsfiddle.net/twrvpp3d/
Your code is working fine, the only problem that you need to stop the click event from propagating by using e.stopPropagation() for the button and the popup window, this will create the desired effect! Refer my below snippet!
#def{
border:1px solid black;
}
#abc{
padding:40px;
}
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(e) {
e.stopPropagation();
box.style.display = "block";
}
box.onclick = function(e) {
e.stopPropagation();
}
//Doesn't work. It's function is to close the form when click outside of the div.
window.onclick = function(event) {
box.style.display = "none";
}
#abc {
display: none;
background-color: #F44336;
}
#def {
border: 1px solid black;
}
#abc {
padding: 40px;
}
<button id="opener">
Open
</button>
<div id="abc">
<!-- Login Authentication -->
<div id="def">
<div>
<p>Welcome</p>
</div>
<br />
<div class="login-auth" id="cool">
<form method="POST">
<label>Email or Username:</label>
<input type="text">
<br />
<label>Password:</label>
<input type="password">
<br />
<br />
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
I know this is not what you are asking but can you make toggle button? its easier to do and more obvious for user.
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(e){
if(e.target.innerHTML === 'Open'){
box.style.display = "block";
e.target.innerHTML = "Close"
}else{
box.style.display = "none";
e.target.innerHTML = "Open"
}
}
//Doesn't work. It's function is to close the form when click outside of the div.
window.onclick = function(event){
if(event.target == box){
form.style.display = "none";
}
}
#abc{
display: none;
background-color: #F44336;
}
<button id = "opener">
Open
</button>
<div id = "abc">
<!-- Login Authentication -->
<div id = "def">
<div>
<p>Welcome</p>
</div>
<br />
<div class = "login-auth" id = "cool">
<form method="POST">
<label>Email or Username:</label>
<input type = "text">
<br />
<label>Password:</label>
<input type = "password">
<br /><br />
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
window.onclick does not work on certain browsers. Try document.onclick instead.
Need to display given div (valueV, valueJ & valueO) based on user text input id=pcode. Scripted js, form and divisions as follows, but isn't working. Tried different method and refered stacks, cant fix, pls help
<script type="text/javascript">
var pcode;
function onload() {
pcode = document.getElementById('pcode');
}
function kk() {
if (pcode == 'v') {
document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
document.getElementById("valueJ").style.display = "inline";
}
} else {
document.getElementById("valueO").style.display = "inline";
}
}
</script>
<body onload="onload();">
<input type="text" name="two" value="" id="pcode" maxlength="1" size="1"> <input type="button" value="Submit" onclick="kk();"/>
</body>
<div id="valueV" style="display: none;">
Value V
</div>
<div id="valueJ" style="display: none;">
Value J
</div>
<div id="valueO" style="display: none;">
Value O
</div>
pcode is the DOM element and you are comparing it to a string. A simple console.log(pcode) will show you that. You need to look at the value.
if (pcode.value === "j")
You should read up on addEventListener. Using HTML attributes to attach event listeners is going to lead you to a path of several global variables (as well as some ugly markup).
document.addEventListener('DOMContentLoaded', function () {
var pcode = document.getElementById('pcode');
document.querySelector('.submit').addEventListener('click', function () {
if (pcode.value == 'v') {
document.getElementById("valueV").style.display = "inline";
} else if (pcode.value == 'j') {
document.getElementById("valueJ").style.display = "inline";
} else {
document.getElementById("valueO").style.display = "inline";
}
});
});
<body>
<input type="text" name="two" value="" id="pcode" maxlength="1" size="1">
<input type="button" value="Submit" class="submit" />
<div id="valueV" style="display: none;">
Value V
</div>
<div id="valueJ" style="display: none;">
Value J
</div>
<div id="valueO" style="display: none;">
Value O
</div>
</body>
I tried to keep your code as similar as possible for you without making any major changes but ensuring it still worked.
I changed a couple of things for you, I removed an extra bracket you had in your else statement.
I also removed the ; you had in reference to functions within your html. I hope this code is what you need:
<body onload="onload()">
<input type="text" name="two" value="" id="pcode" maxlength="1" size="1"> <input type="button" value="Submit" onclick="kk()"/>
</body>
<div id="valueV" style="display: none;">
Value V
</div>
<div id="valueJ" style="display: none;">
Value J
</div>
<div id="valueO" style="display: none;">
Value O
</div>
<script>
var pcode;
function kk() {
pcode = $('#pcode').val();
if (pcode == 'v') {
document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
document.getElementById("valueJ").style.display = "inline";
} else {
document.getElementById("valueO").style.display = "inline";
}
}
</script>
Any questions just ask!
Any idea what I'm doing wrong?
https://jsfiddle.net/6hvtc749/
Here's the function I'm using:
<script>
function dblock_on() {
document.getElementById('donation').checked = true;
document.getElementById('dblock').style.display = "block";
document.getElementById('sblock').style.display = "none";
}
function sblock_on() {
document.getElementById('sponsorship').checked = true;
document.getElementById('sblock').style.display = "block";
document.getElementById('dblock').style.display = "none";
}
</script>
You're missing the #sblock div in your HTML which causes sblock_on() to error and exit before it can change the #dblock style. Either remove the references to #sblock in your function(s) or add that element to your html so that the scripts don't error/exit before they can finish running all of the code.
#dblock {
display: none;
}
<form action="" method="post">
<h3>Type</h3>
<input name="rtype" id="sponsorship" type="radio" value="sponsorship">
<label for="sponsorship" onclick="sblock_on()">Sponsorship</label>
<input name="rtype" id="donation" type="radio" value="donation">
<label for="donation" onclick="dblock_on()">Donation</label>
<div id="dblock">
<h3>Amount</h3>
<input name="amount" type="text" class="form_text" size="5px" maxlength="10" value="" placeholder="$0">
</div>
</form>
<script>
function dblock_on() {
document.getElementById('donation').checked = true;
document.getElementById('dblock').style.display = "block";
}
function sblock_on() {
document.getElementById('sponsorship').checked = true;
document.getElementById('dblock').style.display = "none";
}
</script>
I tried to get value of pop up window in textbox of parent window. But it's not worked. Could any one helped on this?
Parent.jsp
<style>
a:hover, a:active {
background-color:red ;
}
</style>
<form action="FirstTest" method="post" id="TestForm">
<input type="text" id="PrintHere"/ ><br><br>
<a target="_blank" onclick="SelectName('POST')"> Repository Link </a>
</form>
<script type="text/javascript">
function SelectName(methodType) {
var win=window.open("Popup.jsp", "thePopUp", "width=300,height=100, left=24, top=24, scrollbars, resizable");
win.focus();
}
</script>
Popup.jsp
<form id="PopUpForm">
<input type="text" id="ddlNames"> <br /> <br />
<input type="button" value="Select" onclick="SetName();" />
</form>
<script type="text/javascript">
function SetName() {
if ((window.opener != null) && !(window.opener.closed)) {
var Textvalue;
Textvalue.value = document.getElementById("ddlNames").value;
var TextBox = window.opener.document.getElementById("PrintHere");
TextBox.value = Textvalue.value
}
window.close();
} </script>
Change your code like below on Popup.jsp
<form id="PopUpForm">
<input type="text" id="ddlNames"> <br /> <br />
<input type="button" value="Select" onclick="SetName();" />
</form>
<script type="text/javascript">
function SetName() {
if ((window.opener != null) && !(window.opener.closed)) {
var TextBox = window.opener.document.getElementById("PrintHere");
TextBox.value = document.getElementById("ddlNames").value;
}
window.close();
}
</script>