JavaScript - Modify The Page (show/hide) Form Fields According To Dropdown Box Selection??

Dear Javascript programmers,

Do you have an example of a Javascript something like this:

A dropdownlist with values "one" and "two". The radio button is not visible (as a start).
- If you have selected "one" from the dropdown list, then a radio button will appear.
- If you have selected "two" from the dropdown list, then a radio button will NOT appear.

Thanks,

Cornelis
Gouda - The Netherlands

ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol



heres what im tryna do....i have a form...that has a Code:

<option>

in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear

and i cant seem to figure it out....heres my code in its entirety

i want budget div...to appear when the option website design is selected

Code:

	<label for="subject">What are you interested in?<em>&bull;</em></label>
			<select type="text" value="Choose a Service" name="subject" id="subject" />
           <option selected> -- Select A Design Service --</option>
           <option id="website"> Website Design </option>
             <option> Twitter </option>
             <option> Ning or Tumblr </option>
             <option> Flyers </option>
             <option> Business Card or Brochure</option>
                <option>Other</option>
            </select><br />
<div id="budget" style="display:none;"><label> Do you know your budget for this Project?  </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="$400-$800"> $400-$800
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="$800-$1200"> $800-$1200
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="over $1200"> over $1200 

</div>

Hello,

I would like to know how can I send the selection from a dropdown from a webpage to another. In the first page where I have the dropdown list, I have this:

Code:

<td valign="top" align="left" nowrap width="90%">
<input name="time" style="width:100%" />
</td>	
	
<td valign="top" align="left" nowrap width="50">
           <select name="time2">
	    <option value="60">Minutes</option>
	    <option value="3600">Hour</option>
	    <option value="86400">Days</option>
	</select>
           </td>

In the second page, where I want this selection to be dispalyed, I created this code:
Code:

<td width="188" valign="top" align="left" nowrap>
<SCRIPT LANGUAGE="JavaScript">document.write(window.opener.document.form.elements["time"].value + " " + window.opener.document.form.elements["time2"].value);</SCRIPT>
				</td>

The issue I have with this is that the value dispalyed for the "time2" element is the actual attribute value (for instance 60) and not the actual value (for instance "Minutes").

If anyone have a clue what I'm doing wrong, I appreciate your help.

Regards,

Hi Everyone,

I'm encountering errors with a form I have created. I feel confident that the issue is with my JS validation form because when I allow the form to submit without validating any of the fields, my php processor correctly uploads all the content into my database (but, I will need the form validation to prevent the user from skipping fields).

The issue (I believe) is with IE. In IE, both drop-downs seem to populate correctly but when I submit the form, I get a prompt to make a selection for the first drop-down menu.

The form does submit properly in FireFox and Safari but with some testing I noticed that I was getting a prompt to make a selection in the first drop-down in instances where a selection was already made but I just had not yet populated the second country/state drop-down.

Still, in Firefox and Safari, the form does pass validation upon submit.. So, I am hoping it's just IE specific issue.

I'm thinking the issue is with IE not recognizing my selection. The form had a drop-down menu where the user selects a letter, then that selection triggers (in JS using a function to process the selection) another drop-down to populate with all the countries or states that begin with the letter from the first selection.

Here is the code from my form:

Code:

<p><span class="title">Sign Up</span></p>
            <br />
   		 <form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
      	  <p>All required fields are marked with ( <span class = "requiredStar">*</span> )</p>
          <br />
           <p><label for="first_name">First Name: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="first_name" id="first_name" style="height: 20px;" size="30" tabindex="1" maxlength="30" /></div>
          <br />
          <p><label for="last_name">Last Name: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="last_name" id="last_name" style="height: 20px;" size="30" tabindex="2" maxlength="30" /></div>
          <br />
          <p><label for="countryLtr">Select the first letter of your country: <span class = "requiredStar">*</span></label></p>
          <select id="countryLtr" name="countryLtr" id="countryLtr" size="1" tabindex="3" onchange="processSelection()">
          		<option value=""></option>
                        <option value="USA">USA</option>
                        <option value="A">A</option>
          		<option value="B">B</option>
          		<option value="C">C</option>
          		<option value="D">D</option>
          		<option value="E">E</option>
          		<option value="F">F</option>
          		<option value="G">G</option>
          		<option value="H">H</option>
          		<option value="I">I</option>
          		<option value="J">J</option>
          		<option value="K">K</option>
        		<option value="L">L</option>
         		<option value="M">M</option>
         		<option value="N">N</option>
          		<option value="O">O</option>
          		<option value="P">P</option>
          		<option value="Q">Q</option>
          		<option value="R">R</option>
          		<option value="S">S</option>
          		<option value="T">T</option>
          		<option value="U">U</option>
          		<option value="V">V</option>
          		<option value="W">W</option>
          		<option value="Y">Y</option>
          		<option value="Z">Z</option>
                </select>
          <br />
          <br />
          <p><label for="countryState">Select your country/ state (if USA): <span class = "requiredStar">*</span></label></p>
          <select id="countryState" name="countryState" id="countryState" size="1" tabindex="4">
          </select>
          <br />
          <br />
          <p><label for="username">Create a username: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="username" id="username" style="height: 20px;" size="30" tabindex="5" maxlength="30" /></div>
          <br />
          <p><label for="email">Email: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="email" id="email" style="height: 20px;" size="30" tabindex="6" maxlength="30" /></div>
          <br />
          <p><label for="password">Create a password: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="password" name="password" id="password" style="height: 20px;" size="30" tabindex="7" maxlength="30" /></div>
          <br />
 		  <br />
		  <input type="hidden" name="source" value="12345">
          <input type="image" name="submit" value="Submit" class="submitButton" src="images/submit-button.png" />
          <input type="image" name="reset" value="Reset" class="resetButton" src="images/reset-button.png" />
          <br />
   		 </form>

and here is the code for processing the selection of the first drop-down and populating the second drop-down (I reduced the number of options for the countries to save on characters for this post):


Code:

function processSelection() {
	
	choice1 = document.getElementById("countryLtr");
	choice2 = document.getElementById("countryState");
	
	choice2.length = 0;

	if (choice1.value == "USA") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Alaska");
		choice2[choice2.length] = new Option("American Samoa");
		choice2[choice2.length] = new Option("Arizona");
		choice2[choice2.length] = new Option("Arkansas");
		choice2[choice2.length] = new Option("California");
		choice2[choice2.length] = new Option("Colorado");
		choice2[choice2.length] = new Option("Connecticut");
		choice2[choice2.length] = new Option("Delaware");
		choice2[choice2.length] = new Option("District of Columbia");
		choice2[choice2.length] = new Option("Florida");
		choice2[choice2.length] = new Option("Georgia");
		choice2[choice2.length] = new Option("Guam");
		choice2[choice2.length] = new Option("Hawaii");
		choice2[choice2.length] = new Option("Idaho");
		choice2[choice2.length] = new Option("Illinois");
		choice2[choice2.length] = new Option("Indiana");
		choice2[choice2.length] = new Option("Iowa");
		choice2[choice2.length] = new Option("Kansas");
		choice2[choice2.length] = new Option("Kentucky");
		choice2[choice2.length] = new Option("Louisiana");
		choice2[choice2.length] = new Option("Maine");
		choice2[choice2.length] = new Option("Maryland");
		choice2[choice2.length] = new Option("Massachusetts");
		choice2[choice2.length] = new Option("Michigan");
		choice2[choice2.length] = new Option("Minnesota");
		choice2[choice2.length] = new Option("Mississippi");
		choice2[choice2.length] = new Option("Missouri");
		choice2[choice2.length] = new Option("Montana");
		choice2[choice2.length] = new Option("Nebraska");
		choice2[choice2.length] = new Option("Nevada");
		choice2[choice2.length] = new Option("New Hampshire");
		choice2[choice2.length] = new Option("New Jersey");
		choice2[choice2.length] = new Option("New Mexico");
		choice2[choice2.length] = new Option("New York");
		choice2[choice2.length] = new Option("North Carolina");
		choice2[choice2.length] = new Option("North Dakota");
		choice2[choice2.length] = new Option("Northern Marianas Islands");
		choice2[choice2.length] = new Option("Ohio");
		choice2[choice2.length] = new Option("Oklahoma");
		choice2[choice2.length] = new Option("Oregon");
		choice2[choice2.length] = new Option("Pennsylvania");
		choice2[choice2.length] = new Option("Puerto Rico");
		choice2[choice2.length] = new Option("Rhode Island");
		choice2[choice2.length] = new Option("South Carolina");
		choice2[choice2.length] = new Option("South Dakota");
		choice2[choice2.length] = new Option("Tennessee");
		choice2[choice2.length] = new Option("Texas");
		choice2[choice2.length] = new Option("Utah");
		choice2[choice2.length] = new Option("Vermont");
		choice2[choice2.length] = new Option("Virginia");
		choice2[choice2.length] = new Option("Virgin Islands");
		choice2[choice2.length] = new Option("Washington");
		choice2[choice2.length] = new Option("West Virginia");
		choice2[choice2.length] = new Option("Wisconsin");
		choice2[choice2.length] = new Option("Wyoming"); 
	
	} else if (choice1.value == "A") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Azerbaijan");
	
	} else if (choice1.value == "B") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("The Bahamas");
		
	} else if (choice1.value == "C") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Czech Republic");
	
	} else if (choice1.value == "D") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Denmark");
	
	} else if (choice1.value == "E") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Ecuador");
	
	}  else if (choice1.value == "G") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Gabon");
	
	}  else if (choice1.value == "H") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Haiti"); 
	
	}  else if (choice1.value == "I") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Iceland"); 
	
	}  else if (choice1.value == "J") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Jamaica"); 
	
	}  else if (choice1.value == "K") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Kazakhstan");
	
	}  else if (choice1.value == "L") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Laos");  
	
	}   else if (choice1.value == "M") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Macau"); 
	
	}   else if (choice1.value == "N") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Namibia"); 
	
	}  else if (choice1.value == "O") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Oman");    
	
	}  else if (choice1.value == "P") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Pakistan"); 
	
	}  else if (choice1.value == "Q") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Qatar");  
	
	}  else if (choice1.value == "R") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Reunion");  
	
	}  else if (choice1.value == "S") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Saint Helena"); 
	
	}  else if (choice1.value == "T") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Taiwan"); 
	
	}  else if (choice1.value == "U") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Uganda"); 
	
	}  else if (choice1.value == "V") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Vanuatu");  
	
	}  else if (choice1.value == "W") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Wake Island");  
	
	}  else if (choice1.value == "Y") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Yemen");   
	
	}  else if (choice1.value == "Z") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Zambia"); 
	}


}

Here is the code for validating the form upon submission:

Code:

function validateRequestForm() {
	
	var theForm = document.getElementById("requestForm"); //form reference
	var valid = true; //flag, must be true to proceed
	
	if (theForm.name.value == "") {
			
			alert ("Please enter a name");
			valid = false;
			theForm.username.focus();
	
	
	} else if (theForm.countryLtr.value == "") {
	
			
			alert ("Please select the first letter of your country");
			valid = false;
			theForm.countryLtr.focus();
	
	
	} else if (theForm.countryState.value == "") {
	
			
			alert ("Please select your country. If USA, please select your state");
			valid = false;
			theForm.countryState.focus();
	
	
	} else if (theForm.email.value == "") {
	
			
			alert ("Please enter your email address");
			valid = false;
			theForm.email.focus();
	
	
	} else if (theForm.title.value == "") {
		
			
			alert ("Please enter a title for your request");
			valid = false;
			theForm.title.focus();
	
	
	} else if (theForm.request.value == "") {
	
			
			alert ("Please enter your request");
			valid = false;
			theForm.request.focus();
	
	
	} if (valid == true) {
			
				alert ("Thank you for your prayer request. Your request has been submitted for review. Please check your account to see the status of your prayer request. You may also check recent requests to view your request after it has been posted.");
				return true; //submit form
	
	} else {
				return false; //form invalid
	}
}

I'm totally stumped as to what could be going on in IE that is not allowing the form to pass JS validation.. Any help would be greatly appreciated!! Thanks!

Hello everyone, I just stumbled across this forum and thought maybe someone here could help me with a few coding alterations.

I would like to position the rss feed selection fields on this feed output so I can scroll the feed with the selection fields remaining stationary.

Code:

<link rel="icon" type="image/png" href="rss_include/feed-icon-red.png">
<style language='text/css'>
  @import url('rss_include/style.css');
</style>

<script language="javascript">
    var XMLHttpRequestObject = false;
	var img = new Image();
	img.src = "rss_include/loading.gif";
    
    if ( window.XMLHttpRequest )
        XMLHttpRequestObject = new XMLHttpRequest();
    else if (window.ActiveXObject)
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

	function changeOptions()
	{
		LoadFeed();
	}
	
	function LoadFeed(value, initial)
	{		
        if ( XMLHttpRequestObject )
        {
            var dsource = "rss_include/ajax.php?loadfeed"; 

			if (value)
				dsource += "=" + value;
			else
			{
				var val = document.getElementById("rss_feed").value;
				if ( val == "" )
					document.getElementById("rss_feed").selectedIndex += 1;

				dsource += "=" + document.getElementById("rss_feed").value;
			}

			dsource += "&fulltext=" + document.getElementById("showtext").checked;
			dsource += "&showimages=" + document.getElementById("showimages").checked;
			
            XMLHttpRequestObject.open("GET",dsource);
            XMLHttpRequestObject.onreadystatechange = function()
            {
				if ( XMLHttpRequestObject.readyState != 4 )
				{
					document.getElementById("rss_div").innerHTML = "<center><img class=\"loading\" src=\"" + img.src + "\"></center>";	
				}
				
                if ( XMLHttpRequestObject.readyState == 4 && 
                        XMLHttpRequestObject.status == 200 )
                {
					document.getElementById("rss_div").innerHTML = XMLHttpRequestObject.responseText;
                }
            }
            XMLHttpRequestObject.send(null);
        }		
	}
</script>

<?php

require_once("rss_include/config.php");

function LoadFile($xml_file)
{
	$xml = null;
	if ( !file_exists($xml_file) || !($xml = simplexml_load_file($xml_file)) )
	{
		echo '</select>';
		echo "Error opening XML feeds file: $xml_file<br>";
		return;
	}
	
	return $xml;
}

function ShowFeedOptions($xml_file)
{	
	echo '<select id="rss_feed" onChange="LoadFeed(this.value)" title="GuyWMustang.com RSS Reader">';
	
	$xml = LoadFile($xml_file);
	if ( $xml == null )
		return;
	
	$url = array();
	foreach($xml->feeds->category as $category)
	{
		echo "<option value=\"\">" . $category['name'] . "</option>";
		
		foreach($category->feed as $feed)
		{
			if ( $feed['name'] != "" )
			{
				// Add a spacing to the feeds
				$name = "&nbsp;&nbsp;&nbsp;&nbsp;" . $feed['name'];
				$url = str_replace("&", "%26", $feed['url']);
				$url = str_replace("http://", "", htmlspecialchars($url));
				echo "<option value=\"$url\">" . $name . "</option>";
			}
		}
	}
	
	echo '</select>';
	
	$options = array();
	$rss = $xml->options[0];

	if ( strcasecmp($rss['fulltext'],"true") == 0 )
		array_push($options, "true");
	else
		array_push($options, "false");
		
	if ( strcasecmp($rss['images'],"true") == 0 )
		array_push($options, "true");
	else
		array_push($options, "false");

	return $options;
}

function SetOptions($options)
{
	if ( sizeOf($options) == 2 )
	{
		echo "<script>document.getElementById(\"showtext\").checked = " . $options[0] . ";</script>";
		echo "<script>document.getElementById(\"showimages\").checked = " . $options[1] . ";</script>";
	}
}

if ( isset($_GET['links']) )
{
	$xml = LoadFile($xml_file);
	if ( $xml == null )
		return;

	// end the link editing
	return;
}

?>
<div class="container" id="container_div">
	<a name="top"></a>
		<div class="header_div">
			<div style="display:run-in;float:left;">
			<font class="graytext">RSS Feed:</font>
			<?php $options = ShowFeedOptions($feeds_xml); ?>
			
			<input type="checkbox" id="showtext" onChange="changeOptions(this)" checked><font class="graytext">Show Full Article Text</font>
			<input type="checkbox" id="showimages" onChange="changeOptions(this)" checked><font class="graytext">Show Images</font>
			</div>
			
			<?php SetOptions($options); ?>
		</div>
	<div class="rss" id="rss_div">
		<script>LoadFeed(document.getElementById('rss_feed').value, true);</script>
	</div>
	<!-- <p style="padding:0px;margin-right:2px;margin:0px;" align="center"><a class="top" href="#top">Top</a></p> -->
</div>

<-- CSS BELOW -->


Code:

body
{
	overflow: auto;
	font-family: arial;
}
div.header_div
{
	position: relative;
	/*background-color: #EFEFEF;*/
	width: 100%;
	overflow: auto;
	margin: auto;
}
div.container
{
	/*border: 1px solid black;
	background-color: #EFEFEF;*/
	position: relative;
	margin: auto;
	display: block;
	overflow: auto;
	/* SPECIFY HEIGHT & WIDTH AS DESIRED */
	height: 90%;
	width: 80%;
}
div.rss
{
	width: 99%;
	margin: 2px;
	background-color: tan;
	position: relative;
	/*border: 1px solid black;*/
}
img.loading
{
	position: relative;
	margin-top: 50px;
}
a.rss_link,a.rss_link:active
{
	display: inline;
	color: blue;
}
a.rss_link:hover
{
	color: #BBBBFF;
}
a.rss_link:visited
{
	color: black;
}
a.top,a.top:active {
	text-decoration: none;
	font-size: 10pt;
	display: inline;
	color: black;
}
a.top:hover {
	text-decoration: underline;
	color: brown;
	display: inline;
}
font.graytext
{
	font-size: 10pt;
	color: #444444;
}
font.rss_title
{
	font-size: 12pt;
	font-weight: bold;
	text-decoration: underline;
}
font.rss_date
{
	font-size: 9pt;
	font-weight: normal;
	color: black;
	display: block;
}
font.rss_description
{
	font-size: 12pt;
	color: blue;
}
select
{
	color: black;
	font-size: 10pt;
	background-color: #EAEAEA;
}

any help would be greatly appreciated.....thanks

Hi there,
I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button)

I have 2 drop down lists:
Starting date (June 5th, 6th 7th)
Ending date (June 5th, 6th 7th)

I want to write a script that would NOT ALLOW one to choose:
- Starting date June 6th and Ending date June 5th
- Starting date June 7th and Ending date June 6th
- Starting date June 7th and Ending date June 5th

I appreciate your help

Hi all,

I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked:

I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously hiding/showing the appropriate fields.

Thanks for the help!

Code:

            function checkjob(jobvalue){

                    if(jobvalue!="yes") {
                 
document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";
                        document.getElementById("empresa").style.display = "none";
                        document.getElementById("contacto").style.display = "none";

                    }else{
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("empresa").style.display = "block";
                        document.getElementById("contacto").style.display = "block";

                    }

                }

HTML

<div class="form_element">

      		<label >></label>

            <div class="radio_element">

					<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >

                    <span >yes</span>

             </div>

            <div class="radio_element">

					<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">

                    <span >no</span>

            </div>

	</div>

I am running a simple show hide div script as follows:

Code:

<script type="text/javascript">
<!--
    function toggle_visibility(slideshow) {
       var e = document.getElementById(slideshow);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
	
	
//-->
</script>


<a href="#" onclick="toggle_visibility('slideshow');">Show Gallery + </a>

<div id="slideshow" style="display:none">slideshow</div>

It works but the page reloads and returns the user to the top of the page not to the "shown" div. Any way to send them back to the shown div or stop the reload? Any help would be appreciated.

Thanks

I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time.

I have searched all over the internet and I havn't found anything that will solve my problem.

PHP Code:
$listmonth=array("January","February","March","April","May","June","August","September","October","November","December");
foreach ($listmonth as $month) {
if (file_exists($year2.'-'.$month.'.pdf')) {
echo '<embed src="'.$year2 .'-'.$month.'.pdf#toolbar=0&navpanes=0" width="500" height="375">' ;}
else {echo $month;}
echo '<br />';
} 

Hi,
I have any form for tell friends ! How To show Div After Click (tell friend) link and hide div after onsubmit form ? ( using Jquery or java script)
Example :
TELL FRIENDS CLICK LINK
<div id="formhide"></div> (default is hidden).
After Click Show Loading Message and show form for send data to any email . so if Form is valid Show loading message and message Success ! so hide dive ( to default)

DMEO: http://www.makaan.com/ ( please search any . . . ) after search click in send email & sms button . you see . . . .

Thanks

Hi. I have a form and in the form is a checkbox use as a switch to hide and unhide a two textbox. When the other textbox is hide, the other is unhide such as the code below. When the user click the submit button on the first time and there is an error, it reloads and the id="fieldset.-in_honor" hide because it is set to hide initially but not empty. My problem is, I want to show the fieldset whichever is not empty after submit button is click and there is an error so user will not enter any more information to the other field. Is that possible? Please help. I have a hard time explaining it but hopefully you will get the idea. Thanks in advance and hope to hear from you as soon as possible.
Code:

/*toggle switch*/
<p><input type="checkbox" name="in_honor" value="" id="checkmemoriam" onclick="showHide(this.name);" />Please check to make this donation in honor of someone special.</p>

/*hide textbox but unhide when the switch is on or the checbox is check*/


    <fieldset id="fieldset-in_honor" class="fieldgroup" style="display:none">
    <legend class="hide">In Honor Of</legend>
    <p>To make this donation in honor of someone special, please complete the two fields below:</p>
    <div class="formfield" <?php echo highlight('donate_honor_name'); ?>>
      <label for="donate_honor_name">Name:</label>
       <input id="donate_honor_name" name="donate_honor_name" class="text" type="text" value="<?php safeEcho($form['donate_honor_name'])?>" />
	      <?php helper_error('donate_honor_name'); ?>
</div>
    <div class="formfield" <?php echo highlight('donate_honor_acknowledgement'); ?>>
      <label for="donate_honor_acknowledgement">Acknowledgement should be sent to:</label>
      <textarea id="donate_honor_acknowledgement" name="donate_honor_acknowledgement"><?php safeEcho($form['donate_honor_acknowledgement'])?></textarea>
          <?php helper_error('donate_honor_acknowledgement'); ?>
</div>

/*always show on first load of the page but once the checkbox is check, will need to hide and delete info entered*/

<fieldset id="fieldset-in_registration">
<label for="impact" style="font-weight:bold">B. Impact Areas</label>
            <table>
            	<tr>
                	<td style="width:380px;text-align:left"><label for="d"  id="deslist4" name="deslist4">Crime and Drug Use <a href="javascript:alert('Ensuring prevention and treatment programs and appropriate support services are available to people who are at risk for drug addiction and supporting efforts to reduce crime.');">what is this?</a></label></td>
        
        <td style="float:right">  $<input id="d" name="d" class="text" type="text" value="<?php safeEcho($form['d'])?>" style="width:90px;" onChange="CalculateTotal()" />
     <?php helper_error('d');?> </td>
                </tr>
                <tr>
                	<td style="width:380px;text-align:left"><label for="e"  id="deslist5" name="deslist5">Early Childhood Development <a href="javascript:alert('Children are healthy, loved, nurtured, safe and have access to quality childcare and early education. This includes programs that increase parenting skills, providing books to all children and providing developmental screening for 3 and 4 year olds.');">what is this?</a></label></td>
        
        <td style="float:right">  $<input id="e" name="e" class="text" type="text" value="<?php safeEcho($form['e'])?>" style="width:90px;" onChange="CalculateTotal()" />
     <?php helper_error('e');?> </td>
                </tr></table>

Code:

/*JAVASCRIPT FUNCTION*/
function showHide()
{
if (document.getElementById('checkmemoriam').checked)
	{
	if (document.getElementById('TotalC').value == "0.00")
		{
		document.getElementById('fieldset-in_honor').style.display=""; // this is for showing
		document.getElementById('fieldset-in_registration').style.display="none";
		}
		else
		{
		var answer = confirm("You entered a total gift designation of $" + document.getElementById('TotalC').value + ". At this time, gifts made \"in honor of someone special\" are not eligible for the designation option. Clicking the OK button will delete all your designation(s). Do you want to continue?")
		if (answer)
				{
				document.getElementById('TotalC').value="0.00";
				  				                                      document.getElementById('d').value="0";
  				document.getElementById('e').value="0";
							document.getElementById('fieldset-in_honor').style.display=""; // this is for hiding
				document.getElementById('fieldset-in_registration').style.display="none";

				}
				else
				{
				document.getElementById('checkmemoriam').checked=false;
				}
			}

	}
	else
	{
	if ((document.getElementById('donate_honor_name').value="") && (document.getElementById('donate_honor_acknowledgement').value=""))
		{
		document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding
		document.getElementById('fieldset-in_registration').style.display="";
		}
		else
		{
		var answer = confirm("The field you are trying to close will delete all information you entered \"in honor of someone special\" but it will allow you to designate. Clicking the OK button will show the designation list. Do you still want to continue?")
				if (answer)
				{
				document.getElementById('donate_honor_name').value = "";
				document.getElementById('donate_honor_acknowledgement').value = "";
				document.getElementById('fieldset-in_honor').style.display="none"; // this is for hiding
				document.getElementById('fieldset-in_registration').style.display="";
				}
				else
				{
				document.getElementById('checkmemoriam').checked=false;
				document.getElementById('fieldset-in_honor').style.display=""; // this is for showing
				document.getElementById('fieldset-in_registration').style.display="none";
				}
		}

	}
}

Helloo

Im new to javascript.. I need help badly... here are two tabless.
1. information of a friend.
2nd table i get when i click da image (ADD ANOTHER FRIEND)

but, on validation and submission.. the second table is not showing upp...

When i once click ADD FRIEND.. i want the table to show up on reload and validation....

Thanks

Here is my code

<?
if (isset($_POST['submit'])) {
if (!$frndname) {
$frndname_error = 1;
$problems=1;
}
if (!$frndcity) {
$frndcity_error = 1;
$problems=1;
}
///doo db stuff insertion

}

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showTable() {
var table = document.getElementById("myTable");
if (table)
table.style.display = "block";
var div = document.getElementById("frndimg");
if(div)
div.style.display = "none";



}
</script>
</head>

<body>
<form action="" method="POST" name="form1">
<?php if(!isset($_POST['submit']) or $problems) {


?>
<table>


<tr> <td colspan="2"> <table width="21%">
<tr> <td width="3%" align="left" valign="top">&nbsp;</td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr>
<tr>
<td width="3%" align="left" valign="top">&nbsp;</td>
<td width="16%"><? if ($frndname_error) {

echo ("<font color='#FF0000'>Name:</font>");

} else {

echo ("Name:");

}?> <b><font color="#FF0000">*</font></b><br>
<input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td>
<td width="81%" colspan="3">City:
<b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td>
</tr>



</table></td></tr>
<tr> <td width="4%" align="left" valign="top">&nbsp;</td> <td > <div style="float:left;cursorointer;">
<img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg">
</div> </td></tr>


<tr> <td colspan="2">
<table width="100%" id="myTable" style="display:none;">
<tr> <td width="4%" align="left" valign="top">&nbsp;</td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr>
<tr>
<td width="4%" align="left" valign="top">&nbsp;</td>
<td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br>
<input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td>
<td width="47%" colspan="3">City:
<b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td>
</tr>
<tr>
<td width="4%" align="left" valign="top">&nbsp;</td>
<td>Phone Number: <b></b><br>
<input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td>
<td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td>
</tr>
<tr><td>&nbsp; </td></tr>
</table>
</td></tr>

<tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr>
<tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr>
</table>
<? } ?>
</form>
</body>
</html>

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

Hy everyone!

It's a simple question. I need to create a drodbox menu in a way that when the thrid option is selected, it opens up a check box in the same form.

How can that be done?

Txs a lot!

Hi Guys,

I'm a new member, so hello all!
I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help!

Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other.
these two types are available in a selection box.

What I want to happen is when the "RSVP" option is selected, the following options are displayed:
"Yes/No" radio buttons
"additional info" textarea

And when the "Other" option is selected, the following option is displayed:
"Message" text area

How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide!

At the moment, my form looks like this: -

Code:

<form method="POST" action="contact.php">
<table class="contact">
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select size="1" name="type">
<option value="rsvp" >RSVP</option>
<option value="other">Other</option></td>
</tr>
<tr>
<td colspan=2>&nbsp;</td>
</tr>

<div id="rsvp" style="display:none;">
<tr>
<td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td>
</tr>
<tr>
<td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td>
</tr>
<tr>
<td colspan=2>Additional Comments (Please include any special dietary requirements): </td>
</tr>
<tr>
<td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td>
</tr>
</div>

<div id="other" style="display:none;">
<tr>
<td colspan=2>Message:</td>
</tr>
<tr>
<td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td>
</tr>
</div>

<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Submit" name="submit"> &nbsp; <input type="reset" value="Reset" name="reset"></td>
</tr>
</table>
</form>

Please note, the style="display:none;" parts aren't even working

I appreciate any help you can give!

thanks!