I am attempting to disable a button using an external JavaScript - activated by a submit button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="Radio_Button.css">
<script src="Radio_Button.js"></script>
</head>
<body>
<section>
<h1>Fun with Radio Buttonst</h1>
<form id="email_form" name="email_form" method="get">
<input type="radio" name="food1" id="cake1" value="cake" > Cake <br>
<input type="radio" name= "food2"id="muffns1"value="muffins" > Muffins <br>
<input type="radio" name= "food3"id="donuts1" value="donuts1" > hello <br>
<input type="radio" name="food4" id="food1" value="cookies" > Cookies<br>
<input type="submit" id="drink_selection" value="Process Drink Selection" onclick = "join_list()">
<br>
</form>
</section>
</body>
</html>
My JavaScript is as follows
var getsElement = function (id) {
return document.getElementById(id);
};
var join_list = function () {
getsElement("cake1").disabled = true;
getsElement("cake1").parentElement.disabled = true;
};
I can see the button disable when I watch the code but when the HTML reappears for user access the button is not disabled.
Your button reload the page, so your JS is missing. Also you should change your var join_list (scope var problems if you use this var in other functions like window.onload) to function.
So your code should be
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="Radio_Button.css">
<script src="Radio_Button.js"></script>
</head>
<body>
<section>
<h1>Fun with Radio Buttonst</h1>
<input type="radio" name="food1" id="cake1" value="cake"> Cake
<br>
<input type="radio" name="food2" id="muffns1" value="muffins"> Muffins
<br>
<input type="radio" name="food3" id="donuts1" value="donuts1"> hello
<br>
<input type="radio" name="food4" id="food1" value="cookies"> Cookies
<br>
<input type="submit" id="drink_selection" value="Process Drink Selection" onclick="join_list()">
</section>
</body>
</html>
JavaScript
var getsElement = function(id) {
return document.getElementById(id);
};
function join_list() {
getsElement("cake1").disabled = true;
getsElement("cake1").parentElement.disabled = true;
};
When you click submit, the page reloads. Any attributes you added via JS before the page reload will be set back to default.
Related
I am getting an error when trying to check if an input field is empty or not. I tried the function with First Name input Field but not working.
I am trying to check if the First Name input field is empty the input border should turn red if not the border should stay the same.
HERE IS MY CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById("fieldID");
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField(userFirstName);">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
You are passing fieldId and then trying to access with "" which actually converts the fieldId to a string. I have fixed the issue, please check the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById(fieldID);
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField('userFirstName');">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
The error occurs when you are trying to get check.value.length when check === null. So this sentences it's returning null value:
check = document.getElementById("fieldID");
Try to change that line to:
check = document.getElementById(fieldID);
Because you are writting a literal string, not using the variable.
There are two problems with the above code:
1: change below line of code
check = document.getElementById("fieldID");
to
check = document.getElementById(fieldID);
2: use string literals to pass id of the field to funtion called onblur
onblur="validateField(userFirstName);"
replace above line with
onblur="validateField('userFirstName');"
Here is my code. I want to display the login form on click of the login radio button and similarly signup form for sign up radio button.
I am getting an error
_blank.html:21 Uncaught TypeError: Cannot read property 'append' of null
at loginUser
at HTMLInputElement.onclick
_blank.html:28 Uncaught TypeError: Cannot read property 'append' of null
at signupUser
at HTMLInputElement.onclick
function loginUser(logindiv){
console.log('login');
var newdivlogin = document.createElement('div');
newdivlogin.innerHTML = "<label>SignUp</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>";
document.getElementById(logindiv).append(newdivlogin);
}
function signupUser(signupdiv){
console.log('signup');
var newdivsignup = document.createElement('div');
newdivsignup.innerHTML = "<label>SignUp</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>"+"<input placeholder='name'/><br/>";
document.getElementById(signupdiv).append(newdivsignup);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links</title>
</head>
<body>
<div class="user">
<h1>Please Login or Sign up if you are new User</h1>
<input type="radio" id="login" name="radio" onclick="loginUser('user');" /><label>Login</label>
<input type="radio" id="signup" name="radio" onclick="signupUser('user');" /><label>Sign Up</label><br/>
</div>
</body>
</html>
Change class="user" to id="user"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links</title>
</head>
<body>
<div id="user">
<h1>Please Login or Sign up if you are new User</h1>
<input type="radio" id="login" name="radio" onclick="loginUser('user');" /><label>Login</label>
<input type="radio" id="signup" name="radio" onclick="signupUser('user');" /><label>Sign Up</label><br/>
</div>
<script>
function loginUser(logindiv){
console.log('login');
var newdivlogin = document.createElement('div');
newdivlogin.innerHTML = "<label>LogIn</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>";
document.getElementById(logindiv).append(newdivlogin);
}
function signupUser(signupdiv){
console.log('signup');
var newdivsignup = document.createElement('div');
newdivsignup.innerHTML = "<label>SignUp</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>"+"<input placeholder='name'/><br/>";
document.getElementById(signupdiv).append(newdivsignup);
}
</script>
</body>
</html>
I have 3 files. a1.js, a2.js.& main.jsp. Main.jsp has two tabs each having its own functions. a1.js can access 1st tab elements which has multiple checkboxes and a text area where the options selected in the check boxes would be added to the text area. a2.js can access 2nd tab elements which has two radio buttons (yes / no). Depending on the input of the radio buttons, I want some check boxes to checked or unchecked in the 1st tab. How can I acheive this using javascript or jquery? Here is the code:
a1.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
var inputElements = document.getElementsByName("favorite_pet");
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
$('#ta').val($('#ta').val()+inputElements[i].value);
}
}
}
</script>
</head>
<body>
<form>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>
<input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>
<input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>
<br>
<textarea id="ta" rows="4" cols="50">
</textarea>
</form>
</body>
</html>
a2.jsp
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function changeTA() {
///code to make changes in a2.jsp
}
</script>
</head>
<body>
<form>
<legend>Do you want Cat?</legend>
<input type="radio" name="CatLover" id="cat_yes" value="yes" onclick="changeTA()">Yes<br>
<input type="radio" name="CatLover" id="cat_no" value="no" onclick="changeTA()">No<br>
<input type="submit" value="Submit"
<br>
</form>
</body>
</html>
What I want to when yes is checked in the second jsp page, cats should be added in the text are in the first html and clicking on submit should submit the data from both jsp's/ Also, something t be noted both jsp s are included in another jsp page on different tabs. How can I acheive this?
I have the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
I want to get the value that is introduced in value1 and when the submit is clicked to put that value in the output. So I wrote in script.js the following code but somehow it doesn't work.
<script>
window.onload = function(){
var val = document.getElementById('value1').innerHTML;
document.getElementById('result').innerHTML = val;
};
</script>
Any ideas?
You have to use .value property of the input field instead of innerHTML. so it would be:
var val = document.getElementById('value1').value;
and also, since you're executing it when the page loads. There will be no value assigned to the input field with id 'value1'. Therefore, you won't get any result.
You can try adding a button with onClick event to execute this function in place of using window.onload
HTML controls you are working on are textboxes, so they have a value property, not innerHTML.
Use this:
var val = document.getElementById('value1').value;
document.getElementById('result').value= val;
You can't get the value of an input element using the innerHTML attribute. Use value instead:
var val = documento.getElementById('value1').value;
Also you should keep in mind that your function is executed when the page loads, NOT when the form is submitted.
The code is not working, because you are calling this function when the window loads, not when the submit button is clicked. Since there is no form, and thus no page loading going on, I'd recommend switching the <input type="submit" value="Click" /> to a button. They are functionally similar, and visually identical. With the the button, though you could use the onclick attribute to call a function when the button is clicked. See below for an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<button onclick="printOutput()">Click</button>
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
Then in your script.js you would have,
function printOutput(){
var val = document.getElementById('value1').value;
document.getElementById('result').innerHTML = val;
}
when the submit is clicked to put that value in the output
You have chosen wrong event window.onload, also you need .value instead of .innerHTML
Option 1: using jQuery, as you already have the import
$(function() {
$('input[type="submit"]').on('click', function(e) {
$('#result').val($('#value1').val());
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
Option 2: using plain js
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
document.querySelector('#result').value = document.querySelector('#value1').value;
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
<script>
$( document ).ready(function() {
setTimeout(function(){
var val = document.getElementById('value1').innerHTML;
var generateHere = document.getElementById("result");
generateHere.innerHTML = val;
}, 2000);
});
</script>
I am trying to POST text values to the different python program based on user selection (through radio button). Program works fine with single form action
<form action='/cgi-bin/prog1.py' method='POST'>
...text input1
...text input2
...submit
</form>
but when using radio button text values are not posted to the program.
Here is the code I tried
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this)); return false; method='POST' ">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Help me !
I think you should change the action attribute value of the form in onsubmit method instead of window.open method, you can try something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
// here change the action value instead of return the site
form.action = sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="whichsite(this); return false;" method="POST">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Or, you can try change the value of action in the change event of radio, hope this can help~~~