I am creating one form in html using table. Which have one Drop down box contains two values 1. Professor, 2. Librarian. Now each values have different form fields. If I select Professor some different fields show be displayed and if I select Librarian some different fields display.
Can anybody tell me how I can do this??
<table width="435" border="0">
<tr> <td>VIsit Date </td> <td><input type="text" name="textfield" /></td></tr>
<tr> <td>Last Visit Date </td> <td><input type="text" name="textfield2" /></td></tr> <tr> <td>Call Type </td>
<td>
<select name="title" size="1">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option> </select>
</td>
</tr>
</table>
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$(document).ready(function() {
$("#callType").on('change', function(){
$('.form1').toggle();
$('.form2').toggle();
});
});
</script>
<style>
.form2 {
display: none;
}
</style>
</head>
<body>
<select name="title" id="callType">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option>
</select>
<div class="form1">
<input type="text" name="text1" value="text1" />
<input type="text" name="text2" value="text2" />
</div>
<div class="form2">
<input type="text" name="text3" value="text3" />
<input type="text" name="text4" value="text4" />
</div>
</body>
</html>
If you have just the two options in the dropdown, first form will be visible, and second will be hidden (display: none;). And on change, they will get their visibility toggled.
Few points forgot to mention:
1. Have your event handler inside document ready.
2. Keep in mind that in css 'visibility' and 'display' are different. Even if I said visibility, I was referring to display. jQuery show(), hide(), toggle() changes css display. The difference between "visibility: hidden" and "display: none" is that with visibility, invisible elements still take up space on the page.
Here's how to do it in jquery, forget normal javascript.
JQUERY CODE (PUT THIS IN THE HEAD PART)
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$("#YOUR_SPECIFIC_ID").change(function(){
if ($(this).val() == "Option2") {
$('.option1form').hide('');
$('.option2form').show('');
}});
</script>
<script>
$("#YOUR_SPECIFIC_ID").change(function(){
if ($(this).val() == "Option1") {
$('.option1form').show('');
$('.option2form').hide('');}});
</script>
Assign the select field an id:
<select name="asia" style="width:233px;" id="YOUR_SPECIFIC_ID">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select>
Then, you need to make the different forms for different selections.
like this.
<div class="option1form" style="display:none">
<input type="text" name="example1_1">
<input type="text" name="example1_2">
</div>
<div class="option2form" style="display:none">
<input type="text" name="example2_1">
<input type="text" name="example2_2">
</div>
Should work like this.
Related
I am trying to make this part of the form disappear by putting it in a div and the id = loan
To troubleshoot I put TESTTEXT1 in after the div element, and it does what I want (disappears when user clicks a radio button),However TESTTEST2 and beyond does not seem to be affected by the user's action. Does anyone know why this could be?
HTML:
<header>
<script>
function checkA(){
document.getElementById('loan').style.display='none';
document.getElementById('assigned').style.display='block';
}
function checkL(){
document.getElementById('assigned').style.display='none';
document.getElementById('loan').style.display='block';
}
</script>
</header>
<body>
<table>
<td>
<input type="radio" onclick='checkA()' name="toloan" id="0" value="0"/> <label for="0">To assign</label>
<input type="radio" onclick='checkL()' name="toloan" id="1" value="1"/> <label for="1">To loan</label>
</td>
<div id="loan">
TESTTEXT1
<tr>
<th>
<label for="borrowing_month">Borrowing date</label>
</th>
<td>
<select name="borrowing_month" id="borrowing_month">
<option value ='1' selected="selected">
TEST
</option>
</select>
<select name="borrowing_day" id="borrowing_day">
<option value="2" selected="selected">
</select>
<select name="borrowing_year" id="borrowing_year">
<option value="3" selected="selected">
</select>
</td>
</tr>
<tr>
<th>
<label for="return_month">Return date</label>
</th>
<td>
<select name="return_month" id="return_month">
<option value="4" selected="selected">
</option>
</select>
<select name="return_day" id="return_day">
<option value="5" selected="selected">
</select>
<select name="return_year" id="return_year">
<option value="6" selected="selected">
</select>
</td>
</tr>
</div>
</table>
</body>
OK I tried to remove all the php as requested.
Let it be known that you can not use div elements inside table-wrappers. If you wish to use the div element to add CSS to only part of a table. It is better to add a ID to the table head/row/data or just make a new table altogether for that specific part of the table.
As #DanielBeck points out, there is no table-wrapper, so I would try changing the <div id="loan"> to <table id="loan">.
You'll have to change the closing tag from </div> to </table>, of course, and it will change your javascript a little:
function checkA() {
document.getElementById('loan').style.display = 'none';
document.getElementById('assigned').style.display = 'table';
}
function checkL() {
document.getElementById('assigned').style.display = 'none';
document.getElementById('loan').style.display = 'table';
}
I have looked at many other topics on here that are similar to my problem but none of the answers work for me.
I am trying to call a javascript function when a button is clicked but it does nothing.
I hvae tried changing the call to onclick="javascript:ClearFields();" and onclick="ClearFields()" and it doesn't work either.
I have to use a button (not submit) calling javascript
My jsp code is:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<c:choose>
<c:when test="${empty user}">
<p>
${msg} <br/>
Would you like to log in? <br/>
Sign in or register <br/>
</p>
</c:when>
<c:otherwise>
<p>
Welcome ${user.email}
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value="${ans}"/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
<!-- <input type="button" onclick="ClearFields();" value="Clear"/><br/> -->
</td></tr>
<tr><td colspan=2>
<h1> ${msg}</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</c:otherwise>
</c:choose>
</body>
</html>
The generated html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<p>
Welcome test#example.com
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value=""/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
</td></tr>
<tr><td colspan=2>
<h1> Welcome to the Calculator</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</body>
</html>
Any ideas where I am going wrong?
Could it just be that the page is no resubmitting? It seems to be.
Your JavaScript:
document.getElementById("num1").value = "";
Your HTML:
<input type="text" name="num1" value=""/>
getElementById gets an element by its id, and your element doesn't have any id. You need to add an id attribute.
I want that when i choose input selected option, to display my desire image above it, in a DIV.
See Code here: http://jsfiddle.net/rami7250/7qkmg/
See Image example here (Unselected): http://oi60.tinypic.com/2isiohi.jpg
<table width="600">
<tr>
<td width="200">
<label for="select-song">Select your favourite song</label>
</td>
<td width="200">
<label for="select-gender">Select gender</label>
</td>
<td width="100">
<label for="your-mood">Your mood</label>
</td>
<td width="100">
</td>
</tr>
<tr>
<td>
<select name="song" id="select-song" class="input-step">
<option value="">Select song</option>
<option value="Katyusha">Katyusha</option>
<option value="Gangnam style">Gangnam style</option>
</select>
</td>
<td>
<select name="gender" id="select-gender" class="input-step">
<option>Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<td>
<select name="gender" id="select-gender" class="input-step">
<option>Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
This is just a simple example with only one options to give you an idea
Fiddle
<script type="text/javascript">
$(document).ready(function(){
$('#select-song').on('change',function(){
$('#show img').remove()
var img=$('option:selected').val()
$('<img>').attr('src',img).appendTo('#show')
})
})
</script>
If this solution does not suit your needs, i apologize for making you lose time.
I pass you all code
this is a working online page link: http://www.videmadesign.herobo.com/stak1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>test</title>
<style type="text/css">
.hidden {
display: none;
}
table {
border: 1px dashed #999;
}
table td {
padding: 5px;
border: 1px dashed #999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--in fiddle you have select domready event from sx tabs but you have no insert in the script-->
<!--if you put the script in the javascript section of fiddle page you can not insert domready event in the script-->
<!--but if you put the script in html section of fiddle page you have to insert domready event in the script-->
<script type="text/javascript">
/*document ready event you forgot*/
$(document).ready(function(){
$('#select-song').on('change',function(){
$('#show img').remove()
var img=$('option:selected').val()
$('<img>').attr('src',img).appendTo('#show')
})
})
</script>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table width="600">
<tr>
<td width="200">
<label for="select-song">Select your favourite song</label>
</td>
</tr>
<tr>
<td>
<select name="song" id="select-song" class="input-step">
<option value=""></option>
<option value="http://s25.postimg.org/5fhbardwb/mini_botti.jpg">aaa</option>
<option value="http://s25.postimg.org/3oya99wd7/mini_topo.jpg">bbb</option>
<option value="http://s25.postimg.org/3u0pkd1cr/minigatto.jpg">ccc</option>
</select>
</td>
</tr>
</table>
<div id="show"></div>
</body>
</html>
Off the top of my head, I can think of a few suggestions:
1) Add an empty img tag with an id in each of the table cells you'd like the image to appear. So for example, in the "Select your mood" cell, change to the following:
<td width="100">
<label for="your-mood">Your mood</label>
<img id="mood" src="" />
</td>
2) Add some jquery code where you add an event to the select list, isolate which option is selected, and append an image to the div in the table cell. Something along the lines of this:
$('#select-mood').on('change', function() {
var selected = $(this).find('option:selected').val();
$('#mood).attr('src') = selected + '.jpg';
});
I have a basic customer information form that I would like to make a little more interactive. The idea being if the user selects a country that is not USA or Canada the state Select turns to a state textbox. I'm sure this can be done with just PHP but have debated using jQuery but would like to avoid it if possible. Here is my form sample:
<tr>
<td>
<input name="city" type="text" id="city" value="<?= $this->aBillingProf['cCity']; ?>" />
</td>
<td>
<select name="state" id="state" style="width:218px;position:relative;top:-4px;">
<? $s = strlen($this->aBillingProf['cState']) == 2 ? strtoupper($this->aBillingProf['cState']) : strtoupper(stateTranslate($this->aBillingProf['cState']));
echo stateSelect('both',$s); ?>
</select>
<input name="state" type="text" id="state" value="<?= $this->aBillingProf['cState']; ?>" />
/*The Idea being only one of the above options is available depending on what is selected from the country select */
</td>
</tr>
<tr>
<td>
<label for="zip">Zip / Postal Code</label>
</td>
<td>
<label for="country">Country</label>
</td>
</tr>
<tr>
<td>
<input name="zip" type="text" id="zip" maxlength="6" value="<?= $this->aBillingProf['cZip']; ?>" />
</td>
<td>
<select name="country" id="country" style="width:218px;position:relative;top:-4px;">
<?= AffiliateStore::countrySelect($this->aBillingProf['cCountry']); ?>
</select>
<!-- <input type="text" name="country" id="country" value="<?= $this->aBillingProf['cCountry']; ?>" /> -->
</td>
</tr>
Basically what I do is to add a div containing the inputs I would need. In this case I would use a select boxes for US and Canadian states and a text input for other. Use the CSS diplay:none to collapse all divs except the one for the default selected country.
<div id="state_inputs">
<div id="us_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="ca_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="other_states_div">
<input type="text" name="other_states" />
</div>
</div>
Now assuming that your select box for the country has the id country_select:
<script>
document.getElementById("country_select").onchange = function() {
var country_select = document.getElementById("country_select");
var country = country_select.options[country_select.selectedIndex].text;
if(country == "USA") {
document.getElementById("us_states_div").style.display="block";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="none";
} else if(country == "Canada") {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="block";
document.getElementById("other_states_div").style.display="none";
} else {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="block";
}
};
</script>
Once you've updated your PHP to output that markup, on the processing side you just look at the selected country and then use the value contained in the correct state input.
This can't be done with just PHP because it requires that you use client side scripting to determine when the event has been triggered. You could use PHP to rebuild the form, however, that would require a reload from the sever. It's much easier just to use JavaScript to handle the event and update the form.
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.