|
JavaScript - Java Script Show/hide Retaining On Form Validation
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"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="3%" align="left" valign="top"> </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"> </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"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="4%" align="left" valign="top"> </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"> </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> </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> Similar TutorialsAs you can see the above warning will be only shown when there is an error while inserting the data into the login form. Now I have tried to achieve it by: Hiding the div say "warning". Use a javascript while submitting the form to check for input validation. If found any error, the hidden div "warning" will show above the form as shown as in the image. I have tried it in Edit fiddle - JSFiddle Ples help I have a form that was created in Adobe Professional. I have hidden the toolbars on initial view of the form, however, the people using the form have discovered how to un-hide them. Is there any Java Script that I can add to the document that will disable certain menu commands (i.e. "Attach to E-mail")?
Hey everyone. I have a simple hide/show script that is doing what I want, but I was wondering if there is an easier way around having to specify show and hide requirements "onclick" each time. Here is what I've got: Javascript: Code: <script type="text/javascript">
function show(boxid) {
document.getElementById(boxid).style.display="block";
}
function hide(boxid) {
document.getElementById(boxid).style.display="none";
}
</script>
HTML: Code: <body onload="hide('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4'); ">
<div id="homePoster1"><img src="img/posters/babystory.gif" width="419" height="419" /></div>
<div id="homePoster2"><img src="img/posters/converse.gif" width="419" height="419" /></div>
<div id="homePoster3"><img src="img/posters/cookingchannel.jpg" width="419" height="419" /></div>
<div id="homePoster4"><img src="img/posters/culturesofresistance.jpg" width="419" height="419" /></div>
<div class="filmDescAll">
<h2>Film 1 title</h2>
<div id = "filmDesc1">Film 1 description</div>
<div class="more"><a href="#" onclick="show('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 2 title</h2>
<div id="filmDesc2">Film 2 description</div>
<div class="more"><a href="#" onclick="show('filmDesc2'); hide('filmDesc1'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster2'); hide('homePoster1'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 3 title</h2>
<div id="filmDesc3">Film 3 description</div>
<div class="more"><a href="#" onclick="show('filmDesc3'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc4');
show('homePoster3'); hide('homePoster1'); hide('homePoster2'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 4 title</h2>
<div id="filmDesc4">Film 4 description</div>
<div class="more"><a href="#" onclick="show('filmDesc4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3');
show('homePoster4'); hide('homePoster1'); hide('homePoster2'); hide('homePoster3');"class="more4">+ more info</a></div>
</div>
Hi, I'm trying to use the code from DHTMLGoodies' show/hide script, from he http://www.dhtmlgoodies.com/index.ht..._content_slide but I want to use it for two different classes in my HTML, as I have two sizes of header buttons (I have a taller button to cope with text that is too long to fit in one line, as it wraps around). I have created the CSS styles as given on the website, but I have made a second style, to display the taller button, but I would like to know how to make the javascript work with it. Currently I have: Code: /*********** DHTML_GOODIES SLIDING TEXT START ***********/
div#thincolumn .dhtmlgoodies_question, div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue.jpg) no-repeat top left;height: 32px;color:#FFFFFF;padding:8px 14px 0 14px;font:bold 1.1em Arial, sans-serif;overflow:hidden;cursor:pointer;}
div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue2.jpg) no-repeat top left;height:50px;}
div#thincolumn .dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
width:150px;
/* End layout CSS */
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
div#thincolumn .dhtmlgoodies_answer_content, .dhtmlgoodies_answer_content_big { /* Content that is slided down */
padding:1px;
font-size:1em;
position:relative;
}
/*********** DHTML_GOODIES SLIDING TEXT END ***********/
(div#thincolumn is the column that I place the buttons in). I added a new style, .dhtmlgoodies_question_big, to style the taller buttons, but I don't know how to change the Javascript so that it works on these divs as well as the normal, dhtmlgoodies_question divs. Near the end of the Javascript it says: Code: if(divs[no].className=='dhtmlgoodies_question'){
Is it possible to put an "or" in there and have something like Code: if(divs[no].className=='dhtmlgoodies_question')or(divs[no].className=='dhtmlgoodies_question_big'){
Please forgive my ignorance, I am fine with CSS and HTML, but I have never used Javascript before, and searching for "Javascript" and "or" on Google obviously didn't produce the result I was looking for! I don't even know if it's possible to use "or" in Javascript. I have tried duplicated the entire Javascript like this: Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
and Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question_big'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content_big';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
but now it only works for the taller buttons (which the second piece of Javascript refer to). I think it might be possible to just use one instance of the original code, and some "or" operators, but I'm not sure. Any help would be very much appreciated. Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James 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 I have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button? test3.html looks like this: Code:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>
</head>
<body>
<form name="tester" action="test3.html" method="get">
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it. Rather than waste tons of space pasting it here, here's the pastebin: http://pastebin.ca/1822165 alternatively here is the live version: http://soniajacobwedding.com/site/rsvptest.html I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy. What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. hi there i got an website with lots of images on different foods and udner all the images i want to be able to put an html form and in javascript i want to be able to set an string or number for each different html for so if the user get the string or number right then move to an page i have set them to go to if they get it wrong it takes them to an errors page how would i do this in javascript i would like to have an different string or number for each html form on the page Code: <form id="apple" name="apple" method="post" action="">
<label>apple
<input name="apple" type="text" id="apple" value="apple password here" />
</label>
</form>
<p>
<input name="submit" type="submit" value="submit" />
thank you for your help Hello, Working With a touch screen, have created HTML page that has a custom keyboard for password input, no mouse or keyboard connected. Is there a way to enter keystrokes from the HTML into a (my form) text area (password) using Java. From the example below I am trying to put (1) into myform. <td><a class="Keys" type="password" target="myform">1</a></td> <!-- This Did not Work--> Thank You for any Info. Hello, I am trying to create simple Java Script form that will open a URL based on the contents entered into the form. The form shall consist of only a text box and submit button. A user will enter XXXX in the text box and click submit. The form would then load a URL consisting of http://www.company.com/XXXX I know this can be done because I had a code like this a few years back but I have lost it. I've been searching for over an hour, trying to figure this out. Any help would be grately appreciated. Thanks! I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head>
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';
}
</script>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>
Here is a demo of it in action: http://www.mousegrey.com/layers.html Hi Guys, Im new to JS and need some help.. I have a contact form on my webpage and i want to put in an alert box if people done enter a field. Below is the html i have for the form PHP Code: <form id="form" method="post" action="consultation.php" onsubmit="return validate(this)"> <p> <label>Name:</label> <input type="text" name="name" id="name" /> </p> <p> <label>Company:</label> <input type="text" name="company" id="company" /> </p> <p> <label>Email:</label> <input type="text" name="email" id="email" /> </p> <p> <label>Phone:</label> <input type="text" name="phone" id="phone"/> </p> <p style="margin-bottom:0px"> <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit" /> </p> </form> and here is the external Java Script file that iv made so far PHP Code: var nName = nForm['name']; var nCompany = nForm['company']; var nEmail = nForm['email']; var nPhone = nForm['phone']; if (nName.value.replace(/s/g, "").length < 1) { alert('Please enter your full name'); return false; } if (nCompany.value.replace(/s/g, "").length < 1) { alert('Please enter your company name'); return false; } if (!/^w+[w|.|-]{0,1}w*[w|.|-]{0,1}w*@w+[w|-]{0,1}w*[w|-]{0,1}w*.{1,1}[a-z]{2,4}$/.test(nEmail.value)) { alert('Please enter your correct email address'); return false; } if (!/[ds-]+$/.test(nPhone.value) || !/d{10}/.test(nMobile.value.replace(/[s-]/g, ""))) // must contain 10 digits; { alert('Please enter your correct phone number'); return false; } iv referenced this Java script file in the head of the html document.. Can anyone help me make this script please... THanks I have two seperate js files. One that houses the functions mylibrary.js and another that call the validated functions myform.js. I can not get the form to validate any data. The data just sits there and will not report errors. Any help would be greatly appreciated. Code: function valForm()
{
if(!isAlpha(document.myform.firstname.value))
{
myform.firstname.focus();
return false;
}
if(!validEmail(document.myform.email.value))
{
myform.email.focus();
return false;
}
if(!isRequired1(document.myform.options.value))
{
myform.options.focus();
return false;
}
return true;
}
// JavaScript Document seperate js file mylibrary.js
function isNumber(num) { return !(/\D/.test(num)); }
function isAlpha(text){ return text.match(/\w+/) }
function validEmail(email){ return email.match(/^([a-zA-Z0-9]{3,})(((\.|\-|\_)[a-zA-Z0-9]{2,})+)?@([a-z]{3,})(\-[a-z0-9]{3,})?(\.[a-z]{2,})+$/i ) }
function isRequired1(){
if(myform.food.selectedIndex ==0)
{
alert("Please select from the drop-down list.");
}
}
"<scr'+'ipt type="text/javascript" src="js/val_feedback_Email.js<\/scr'+'ipt>" How should I call the js validation script for a feedback form that was document.written in a pop up? I have a page which contains a button. Onclick it produces a pop up window that contains a small feedback form produced by document.write. This much works. NOW I need to call the js validate script but nothing seems to work I tried this is the head of the page <script type="text/javascript" src="js/val_feedback_Email.js"> I tried this is the head of the doumnet.write part "<scr'+'ipt type="text/javascript" src="js/val_feedback_Email.js<\/scr'+'ipt>" How do I call the js script to validate the form in the pop up? Where if anywhere should it go? I'm stumped Any and all ideas welcomed LT THis is the start of my script Code: <script type="text/javascript">
var newWindow;
function subWrite() {
newWindow = window.open("","","status,height=500,width=700")
//bring subwindow to front
newWindow.focus();
//assemble content for new window
var newContent = '<html><head><title>ACES UK. Send us your Email</title>';
newContent += '</head><body>';
newContent += '<form action="feedback.php" method="post" name="feedback_1" id="feedback_1" onsubmit="return validate(this.form)"';
Hi coders, I have a form where customers can register thierselves by entering the relevant fields. There is a control() javascript which ckecks if everything on the form is ok before submitting it. Althugh IE applies the script for its every check, Firefox only applies the first check (first if statement) of the script. The rest is ignored. Here is the javascript code: Code: function control()
{
if (document.member.FirstName.value == ""){
document.member.FirstName.focus();
alert("Please fill the name field");
return false;
}
if (document.member.FirstName.value.length<2) {
alert("Name field cannot be shorter than 2 characters.");
document.member.FirstName.focus();
return false;
}
if (/[\d]/.test(document.getElementById("FirstName").value)) {
alert("Entered numbers into the Name field");
return false;
}
if (document.member.LastName.value == ""){
document.member.LastName.focus();
alert("Please fill the Lastname field");
return false;
}
if (document.member.LastName.value.length<2) {
alert("Lastname field cannot be shorter than 2 charcters. Please check again.");
document.member.LastName.focus();
return false;
}
if (/[\d]/.test(document.getElementById("LastName").value)) {
alert("Entered numbers into the Lastname field");
return false;
}
if (document.member.Address1.value.length<10) {
alert("Address field contains less than 2 characters.");
document.member.Address1.focus();
return false;
}
if (document.member.Username.value == ""){
document.member.Username.focus();
alert("Username field cannot be blank");
return false;
}
if (document.member.Address1.value == ""){
document.member.Address1.focus();
alert("Address field cannot be blank ");
return false;
}
if (document.member.City.value == ""){
document.member.City.focus();
alert("City field cannot be blank");
return false;
}
if (document.member.Email.value == ""){
document.member.Email.focus();
alert("E-Mail field cannot be blank.");
return false;
}
if (echeck(document.member.Email.value)==false){
document.member.Email.focus();
return false;
}
if (document.member.PhoneNumber.value == ""){
document.member.PhoneNumber.focus();
alert("Phone number field cannot be blank");
return false;
}
if (!/^\d*$/.test(document.getElementById("PhoneNumber").value)) {
alert("Entered characters into the Phone Number field");
return false;
}
if (document.member.Pass.value == ""){
document.member.Pass.focus();
alert("Password field cannot be blank.");
return false;
}
if (document.member.Pass2.value == ""){
document.member.Pass2.focus();
alert("Password confirmation field cannot be blank.");
return false;
}
if (document.forms[0].Pass.value.length<6) {
alert("Password field cannot contain less than 6 characters. Please check");
document.member.Pass.focus();
return false;
}
if (document.member.Pass.value != document.member.Pass2.value) {
alert("Password and password confirmation fields are not identical. Please check ");
document.member.Pass.focus();
return false;
}
if (!isTelNum(document.forms[0].PhoneNumber,'Telefon ')) return false;
if (!isNum(document.forms[0].InternalPhoneNumber,'Internal Phone number')) return false;
//if (!isValidEmail(document.forms[0].Email)) return false;
return true;
}
Well its interesting that only the first check is taken into consideration. if (document.member.FirstName.value == ""){ The rest is not even seen. Even if you do not fill the rest of the form, the submit button tries to submit the form regardless what more needs to be checked. Here is the submit button: Code: <input type="submit" name="member" value="Register Me" id="member" onclick="return control()";> Any observations and comments are appreciated. this is my javascript used to validate form.having problem when one selection is made and submit button is clicked.the checked button becomes unchecked. i've to check all the radio button in order to proceed with submission. here is the code...anyone pls help how to solve this..tq <script type = "text/javascript"> function validate_form ( ) { valid = true; if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); gender.focus(); valid = false; } if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) ) { alert ( "Please choose your Nationality" ); nationality.focus(); valid = false; } if ( document.myform.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); age.focus(); valid = false; } return valid; } </script> Hi all I have just joined the forum in hope someone could help me with a problem i am having with my Java code. This is my bit of code and I will try to explain what I want to achieve. <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="30"><font size="-2">Day</font></td> <td width="50"><font size="-2">Period</font></td> <td width="50"><font size="-2">Time</font></td> <td width="50"><font size="-2">Total</font></td> <td width="35"><font size="-2">Code</font></td> <td><font size="-2">Note</font></td> </tr> </table> <? for ($x=1;$x<=7;$x++) { ?> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="30" rowspan ="8"><p align="center"><font size="-2"><? print $day[$x]?></font></p> <p align="center"><font size="-2"><? print date("dS",$week_timestamp +($x-1)*90000)?></font></p></td> <? for ($y=1;$y<=8;$y++) { $start = "start".$y; $finish="finish".$y; $code="code".$y; $note="note".$y; $total="total".$y; ?> <td width="50"><font size="-2">Start</font></td> <td width="50"> <font size="-2"> <? if (${$start}[$x] != ""){ print ${$start}[$x]; }else{ print " "; } ?> </font></td> <td width="50" rowspan ="2"><div align="center"><font size="-2"> <? print ${$total}[$x] ?><font></div></td> <td width="35" rowspan ="2"><div align="center"><font size="-2"> <? if (${$code}[$x] != ""){ print ${$code}[$x]; }else{ print " "; } ?> </font></div></td> <td rowspan ="2"> <font size="-2"> <? if (${$note}[$x] != ""){ print ${$note}[$x]; }else{ print " "; } ?></font></td> </tr> <tr> <td width="50"><font size="-2">Finish</font></td> <td width="50"> <font size="-2"> <? if (${$finish}[$x] != ""){ print ${$finish}[$x]; }else{ print " "; } ?> </font></td> </tr> <? } ?> </table> Basically this gives me a table with all the start and finish times for each day from Monday to Sunday. What I'm looking at is the ability to hide particular day using java if possible. I know you can use div's to do this and I've searched the forum for solution but it looks like my case is unusual. I wan't to use show/hide buttons to display certain day and hide rest of them. Is it possible to put the new code around the existing one? Any help would me much appreciated. If you need any more details please let me know. Thanks |
|||||||