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';
});
Related
The issue is with the line total += parseInt($(el).val()); If e.g. parseInt($(el).val()) holds the value 200 (which I confirmed with an alert) the value set to Total is NaN.
If I remove the + so that total = parseInt($(el).val()); then total will return the value 200 and not NaN.
Can anyone see what's causing this NaN issue?
Thanks
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function() {
//open callback contents
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
alert("total=" + total);
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents
}); //close callback function
});
}); //close jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div>
<!--close row-->
</div>
<!-- close container -->
</main>
</body>
</html>
Loaded in file below: includes/inc_1_working.html
<table width="100%" id="form1">
<tr><div id="test"></div>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price1
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id='sum'>0</div>
</td>
</tr>
</table>
remove arrow fuction jquery ready
add old style work for me
Replace parseInt() with Number()
Solution:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function(){
//open callback contents
//hide all values
$("#targetPane input, #targetPane select").each(function(i, el) {
$($(el).data("rel")).hide();
});
function getTotal() {
var total = 0;
$("#targetPane input, #targetPane select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('select #courses').change(function() {
$($(el).data("rel")).hide(getTotal());
});
$('#targetPane input[type="checkbox"], #targetPane select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents
}); //close callback function
});
}); //close jQuery
</script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="0" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div> <!--close row-->
</div> <!-- close container -->
</main>
</body>
</html>
I am currently working on a web form that is supposed to take in user input. The marital form asks the user if they are currently married and if they answer "yes" then another drop down type of question is suppose to appear underneath asking "how many times how you been married?" and so on and so forth. I created the decisions statements, but when I tested the marital form and put in "yes" nothing additional popped up.
The expected outcome is that when the user answers "yes" another question it is supposed to appear underneath.
Marital.php
<!doctype html>
<html lang="en">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.active {
background-color: #4CAF50;
color: white;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
<head>
</head>
<body style="text-align:center;">
<div style="margin:0 auto; text-align:center;">
<img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
</div>
<h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
<br>
<div class="navbar">
<a>Education History</a>
<a class="active" href="Marital.php">Marital History</a>
<a>Employment History</a>
<a>Military History</a>
<a>Substances History</a>
<a>Social/Personal History</a>
<a>Physical Health History</a>
<a>Mental Health History</a>
</div>
<form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">
<br></br>
<table style="margin:0 auto;">
<tr>
<td class="Question">
Are you currently married?
</td>
<td style="width:100px;">
<select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="evermarried_row">
<td>
Have you ever been married?
</td>
<td>
<select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanymarriages_row">
<td>
How many times have you been married?
</td>
<td>
<select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5 or more'>5 or more</option>
</select>
</td>
</tr>
<tr style="display:none" id="divorced_row">
<td>
Have you ever been divorced?
</td>
<td>
<select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="widowed_row">
<td>
Are you widowed?
</td>
<td>
<select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="children_row" required>
<td>
Do you have any children?
</td>
<td>
<select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanychildren_row">
<td>
How many children do you have?
</td>
<td>
<select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
<option value=''></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>
<option value='6'>6</option>
<option value='7 or more'>7 or more</option>
</select>
</td>
</tr>
</table>
<table style="margin:0 auto;">
<tr>
<td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
<td><input type="button" value="Back!" onclick="history.back()"></td>
<td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
</tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="Marital.js">
function Marital_Validation() {
$('#marital_save').css('border-color', '#163c6a');
$('#marital_save').css('background', 'none');
$('#marital_save').css('background-color', 'green');
$('#marital_save').css('color', 'white');
$('#marital_save').text('Saved');
$('#marital_indicator').css('background-color', 'green');
}
</script>
</body>
</html>
Marital.js
/*
Marital variables:
married
evermarried
howmanymarriages
divorced
widowed
children
howmanychildren
*/
$(function(){
$("#married").change(function(){
var option=$("#married").val();
if (option==='No'){
$("#evermarried_row").show();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#evermarried").change(function(){
var option=$("#evermarried").val();
if (option==='No'){
$("#children_row").show();
$("#howmanymarriages_row").hide();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#howmanymarriages").change(function(){
var option=$("#howmanymarriages").val();
var married=$("#married").val();
if (option==='1'){
if (married==='Yes'){
$("#children_row").show();
$('#divorced_row').hide();
$("#widowed_row").hide();
}
if (married==='No'){
$('#divorced_row').show();
}
}
if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
$('#divorced_row').show();
}
});
$("#divorced").change(function(){
var option=$("#divorced").val();
var married=$("#married").val();
var timesmarried=$("#howmanymarriages").val();
if (option==='No'){
$("#widowed_row").show();
}
if (option==='Yes'){
if (timesmarried==='1'){
$("#widowed_row").hide();
$("#children_row").show();
}
if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
$("#widowed_row").show();
}
}
});
$("#widowed").change(function(){
$("#children_row").show();
});
$("#children").change(function(){
var option=$("#children").val();
if (option==='No'){
$("#howmanychildren_row").hide();
}
if (option==='Yes'){
$("#howmanychildren_row").show();
}
});
$(".needs_saved_marital").change(function(){
var married=$("#married").val();
var evermarried=$("#evermarried").val();
var howmanymarriages=$("#howmanymarriages").val();
var divorced=$("#divorced").val();
var widowed=$("#widowed").val();
var children=$("#children").val();
var howmanychildren=$("#howmanychildren").val();
if (married==='Yes'){
$("#evermarried").attr('required',false);
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#howmanymarriages").attr('required',true);
}
if (married==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#evermarried").attr('required',true);
}
if (evermarried==='Yes'){
$("#howmanymarriages").attr('required',true);
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (evermarried==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#children").attr('required',true);
}
if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (children==='Yes'){
$("#howmanychildren").attr('required',true);
}
if (children==='No'){
$("#howmanychildren").attr('required',false);
}
});
});
It is working as expected. Checkout this fiddle: https://jsfiddle.net/ax6kfjvz/
I'm guessing you're including jQuery after your script. Or you're not including jQuery at all. Try this template:
<!doctype html>
<html lang="en">
<head>
<title>Couples Issues</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="js/your-awesome-script.js"></script>
</body>
</html>
When using a library, you must include them before your script otherwise the browser has no idea where let's say this function $() is coming from.
Here is a good article.
You should trim the strings to avoid unmatched error and better use css visibility hidden!
// like this
var option=$("#married").val().trim();
// like this
<tr style="visibility: hidden;" ></tr>
I want the visitors to be able to open the search form in a new tab when they selckt the checkbox.
And I have trouble getting TARGET = "_ blank" in the select menu to work.
Thanks in advance!
<html>
<head>
<title></title>
<script language="JavaScript">
function dosearch() {
var sf=document.F;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchit.value);
window.open(submitto,'bottom');
return false;
}
</script>
</head>
<body onLoad="document.F.searchit.focus();">
<table width="100%" border="0"><tr align="left" valign="top"><td width="200">
<form name="guideform">
In:
<select name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value + document.F.searchit.value">
<option value="downloads.html?downloads=selected&searchit=">Downloads</option>
</select>
</form></td>
<td><form name="F" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="http://download.cnet.com/s/" >Download.com</option>
<option value="http://filehippo.com/search?q=" TARGET="_blank">Filehippo</option>
</select>
For:
<input name="searchit" value="" type="text" size="45">
<input type="submit" name="SearchSubmit" value="Search">
<input type="checkbox" name="Newtab" target="_blank">New tab
</form></td>
<td width="1"></td></tr></table>
</body>
</html>
Try:
<option>
Filehippo
</option>
This form is for a visitor sign in, which you can select the number of visitors with you from 1 - 9.
When selecting "1" and hitting submit I keep getting undefined index for "visitorname1".
PHP Form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Visitor Sign In</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#noguests').change(function(){
//get the number of fields required from the dropdown box
var num = $('#noguests').val();
var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i=1;i<=num;i++) {
//concatinate number of fields to a variable
html += 'Visitor ' + i + ': <input type="text" name="visitorname' + i + '" id="visitorname' + i + '"/><br/>';
}
//insert this html code into the div with id catList
$('#guestList').html(html);
});
});
</script>
</head>
<body>
<p align="center"><img src="images/logo.jpg" width="300"></p>
<h1 align="center">Landmark Group of Builders :: Visitor Sign In</h1>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="large">Please sign-in below:</span></td>
</tr>
<form id="form1" name="form1" method="post" action="submit_guest.php">
<tr>
<td bgcolor="#EAEAEA" align="right"><b>Visiting</b></td>
<td bgcolor="#EAEAEA"><input name="visiting" type="text" required id="visiting"></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>No. of Guests</b></td>
<td bgcolor="#EAEAEA">
<select id="noguests" name="noguests">
<option value="0">- SELECT -</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td></tr>
<td id="guestList">
</td></tr>
</tr>
<tr>
<td colspan="2" align="right">
<input type="text" name="stat" size="40" value="1" readonly class="hidden"><br><input type="submit" value="Sign In" class="css3button"></td>
</tr>
</form>
</table>
</body>
</html>
UPDATE.php
<?php
$intime = date('Y-m-d H:i:s');
$visitorname1 = $_POST['visitorname1'];
$visting = $_POST['visiting'];
$stat = $_POST['stat'];
$noguests = $_POST['noguests'];
$sql = new mysqli('localhost','x','x1!','x1');
$query = $sql->prepare("INSERT INTO `visitors` (visitorname1, visiting, intime, stat, noguests) VALUES (?,?,?,?,?);");
$query->bind_param('sssii',$_POST['visitorname1'],$_POST['visiting'],$_POST['intime'],$_POST['stat'],$_POST['noguests']);
/* close our connection */
$query ->execute();
if ( $query ) {
echo "<p align='center' class='confirmation'><img src='images/logo.jpg' width='300px'><BR><BR><img src='images/accepted.png'> Thank You! You have been signed in!</p>";
} else {
echo "Your request failed. Please try again.";
}
$sql->close();
?>
I am not sure why I keep getting the undefined as I verified when I add a text box by selecting "1", the id and name of the textbox is "visitorname1".
Any help would be greatly appreciated.
Remove var i = 0; and:
change your:
for (i=1;i<=num;i++) {
to
for (var i = 0;i<=num;i++) {
Because your dynamic inputs have no value attribute.
In the javascript you have the NAME set to name="visitorname" while in the PHP you have $_POST['visitorname1'];
SOLUTION: change the PHP to $_POST['visitorname'];
It's because of using Form tag in a wrong place!
correct your html code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Visitor Sign In</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#noguests').change(function(){
//get the number of fields required from the dropdown box
var num = $('#noguests').val();
var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i=1;i<=num;i++) {
//concatinate number of fields to a variable
html += 'Visitor ' + i + ': <input type="text" name="visitorname' + i + '" id="visitorname' + i + '"/><br/>';
}
//insert this html code into the div with id catList
$('#guestList').html(html);
});
});
</script>
</head>
<body>
<p align="center"><img src="images/logo.jpg" width="300"></p>
<h1 align="center">Landmark Group of Builders :: Visitor Sign In</h1>
<form id="form1" name="form1" method="post" action="submit_guest.php">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="large">Please sign-in below:</span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>Visiting</b></td>
<td bgcolor="#EAEAEA"><input name="visiting" type="text" required id="visiting"></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>No. of Guests</b></td>
<td bgcolor="#EAEAEA">
<select id="noguests" name="noguests">
<option value="0">- SELECT -</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td></tr>
<td id="guestList">
</td></tr>
</tr>
<tr>
<td colspan="2" align="right">
<input type="text" name="stat" size="40" value="1" readonly class="hidden"><br><input type="submit" value="Sign In" class="css3button"></td>
</tr>
</table>
</form>
</body>
</html>
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.