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~~~
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');"
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.
On a page with two forms I need a script that will validate only the one that is being submitted.
I have made a simple page that shows the problem
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function validateForm() {
var checks = document.getElementsByName("tjek");
var checksChecked = false;
var i = 0;
while (!checksChecked && i < checks.length) {
if (checks[i].checked) checksChecked = true;
i++;
}
if (!checksChecked) {
alert("Select something!")
return false;
}
}
</script>
</head>
<body>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
</body>
</html>
http://jsbin.com/duqotobi/1/edit
But it doesn't work. Why?
Here goes: live demo: http://jsbin.com/duqotobi/2/edit?html,output.
The code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script>
function validateForm(caller) {
var checks = caller.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<checks.length; i++) {
if (checks[i].checked == false) {
alert("Select something.");
return false;
}
else {
caller.submit();
}
}
}
</script>
</head>
<body>
<form name="firstForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
<form name="secondForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
</body>
</html>
If it's not fully self-explanatory, let me know. Do realize however, that it is tricky to give checkboxes the same names, even if it concerns different forms. Only radio inputs belonging to the same group should have the same name. This script is not critical in that aspect, but just so you know.
I rewrote it in my style of JS validation scripting; other styles are possible as well.
I have the following form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
<script type="javascript/text">
function ischecked(){
var check = document.getElementsByTagName( 'input' );
for( var i = 0; i < check.length; i++ ){
if( check[ i ].type == 'radio' && check[ i ].checked ){
return true;
}
}
return false;
}
</script>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
I wanted to make sure one of the radio buttons have been checked before submitting the form. However, it does not work, and the form is submitted anyways. What am I doing wrong here?
You need to return the result of your function from the inline event handler.
You have to check against the value returned in your validation function directly in the attribute value. That is, in your HTML form declaration
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
you should write:
onsubmit="return ischecked();"
instead of:
onsubmit="ischecked();"
I'm having a little 'teething' problem here is my code so far
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.
sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.
This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy's version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript
also I would go the route of two textboxes that are hidden, and then showing them via jQuery
as it stands now I think if the user checks one radio button and then the other two text boxes will appear
and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>