JavaScript - Hide Several Div From Textbox Results
Similar TutorialsHi, I am using a show / hide radiobuttons on my website but by default the YES box is shown, I need to swap this if there is content in my textarea name="Owner" here is my code: Code: <p> <label>Owner</label> <label> <input type="radio" name="group_name" value="Yes" id="group_name_0" /> Yes</label> <label> <input type="radio" name="group_name" value="No" id="group_name_1" /> No</label> <br /> <div id="yes_box"> <input class="text-input small-input" type="text" id="small-input" name="Owner" value="Yes" /> </div> <div id="no_box"> <p> <label>Landlords address</label> <textarea class="text-input small-input" id="small-input" name="Owner"><?php echo $row5['Owner']; ?></textarea> </p> </div> </p> <script> $(document).ready(function(){ $("input[name$='group_name']").click(function(){ var radio_value = $(this).val(); if(radio_value=='Yes') { $("#yes_box").show("slow"); $("#no_box").hide("fast"); } else if(radio_value=='No') { $("#no_box").show("slow"); $("#yes_box").hide("fast"); } }); $("#yes_box").show(); $("#no_box").hide(); }); </script> Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <html> <head> <script type="text/javascript"> function ini() { // Retrieve the code var code =document.getElementById ("code_read_box1").value; var code =document.getElementById ("code_read_box2").value; var code =document.getElementById ("code_read_box3").value; var code =document.getElementById ("code_read_box4").value; var code =document.getElementById ("code_read_box5").value; var code =document.getElementById ("code_read_box6").value; // Return false to prevent the form to submit return false; } </script> </head> <body onLoad="document.barcode.code_read_box1.focus()"> <form name=barcode onsubmit = "return ini()"> <input type="text" id="code_read_box1" value="" /><br/> <input type="text" id="code_read_box2" value="" /><br/> <input type="text" id="code_read_box3" value="" /><br/> <input type="text" id="code_read_box4" value="" /><br/> <input type="text" id="code_read_box5" value="" /><br/> <input type="text" id="code_read_box6" value="" /><br/> </form> </body> </html> Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post"> <table> <tr> <td>Date Of Birth:</td> <td> <input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" /> <input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" /> <input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td> </tr> <tr> <td></td> <td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td> </tr> </table> </form> <script type="text/javascript" language="javascript"> <!-- document.signup.DOBmonth.value="MM"; document.signup.DOBday.value="DD"; document.signup.DOByear.value="YYYY"; function clearDOBmonth() { document.signup.DOBmonth.value="";} function clearDOBday() { document.signup.DOBday.value="";} function clearDOByear() { document.signup.DOByear.value="";} function restoreDOBmonth() { if ('document.signup.DOBmonth.value = ""') { document.signup.DOBmonth.value = "MM"; // alert(document.signup.DOBmonth.value); } } //--> </script> Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand. click View all 3 comments and it will show all comments then click more button try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top. http://www.runningprofiles.com/membe...ll_Script.php# Why is this?? What do i need to do to fix it? PHP Code: <!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=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> $(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).html('<img src="moreajax.gif" />'); $.ajax({ type: "POST", url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php", data: "lastmsg="+ ID, cache: false, success: function(html){ $("ol#updates").append(html); $("#more"+ID).remove(); // removing old more button } }); } else { $(".morebox").html('The End');// no results } return false; }); }); $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); //comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } *{ margin:0px; padding:0px } ol.timeline { list-style:none } ol.timeline li { position:relative; border-bottom:1px #dedede dashed; padding:8px; } .morebox { font-weight:bold; color:#333333; text-align:center; border:solid 1px #333333; padding:8px; margin-top:8px; margin-bottom:8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .morebox a{ color:#333333; text-decoration:none} .morebox a:hover{ color:#333333; text-decoration:none} #container{margin-left:60px; width:580px } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <ol class="timeline" id="updates"> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="80%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> </ol> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> </div> </td> </tr> </table> </div> </body> </html> if it help here is ajax_more.php PHP Code: <?php include("../../../settings.php"); if(isSet($_POST['lastmsg'])) { $lastmsg=$_POST['lastmsg']; $lastmsg=mysql_real_escape_string($lastmsg); $small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div class="comments" id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> <?php } ?> Hi! I have been working on an assignment, and I seem to have things working okay, except that I'd like for the results (Message + list of 3 favorite movies or books) to show up in the Results box of the original page, not in a separate page. I'm sure it's something totally obvious that I'm missing, but I'm a newbie, and would appreciate any hints or tips that you all could give me. Thanks so much in advance! Heather W Hi, i got a textbox with a submit button but when submit button is clicked it works but it reloads the page. is possible to submit without reload the page? thanks Hey guys, I recently found a small code in internet which use option value in select tag to insert value in text box, so text box has the exact same value as selected option: Code: <form name="theform" onsubmit="CheckForm()"> <select name="myOptions" onchange="document.theform.showValue.value=this.value"> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the first option">I am the first option</option> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the second option">I am the second option</option> <option name="(some dynamic text)" id="(some dynamic text)" value="I am the third option">I am the third option</option> <option name="(some dynamic text)" id=""(some dynamic text)" value="I am the third option">I am the fourth third option</option> </select> <input type="text" name="showValue"><br> </form> Now what I want is simple and a little different from this one, I want the text box value to be as exact as selected option name or id (doesn't matter which one) which means if an option selected, text box value has to follow that option name or id. Thanks folks. I would like to type something into my textbox and then press ENTER, it will execute a function. I tried onFocus, onChange and onBlur but it doesn't do what I want it to. Here's an example I use for onChange. Code: Application: <input type="text" onchange="execProg(0);"> Any comments or suggestions is greatly how would you make a function that cheks if any text is in a text box.
Hi there, I have two textboxes and I want some images to be displayed in my textboxes randomly if randomNumber==1 let textbox1/textbox2 backgroundimage change and if randomnumber==2 let textbox1 backgroundimage change again. I think I need some fixing in the following lines: document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); Thanks for any help.. PHP Code: <script> setInterval("showimages()",500); function showimages() { var rno=Math.floor(Math.random()*2)+1; document.getElementById("box1").value=rno; if(rno==1){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(2.jpg)';"); } if(rno==2){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(3.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(4.jpg)';"); } } </script> <input type="text" id="txtbox1" style="position:absolute;top:200px;left:200px;height:150px"> <input type="text" id="txtbox2" style="position:absolute;top:200px;left:500px;height:150px"> <input type="text" id="box1" style="position:absolute;top:100px;left:100px;width:40px;"> <input type="button" onclick='location.reload()' style="position:absolute;top:20px;left:100px;"> hi, I am tring to display some texts in a textbox using \n to create a new line but it does not work. PHP Code: <script> document.getElementById("txtbox1").value=" this is my firstline \n This is my second line \n this is my third line" </script> <input type="text" id="txtbox1"> thanks how can i pass the var to textboxes Code: var win = 0; var loss = 0; var draw = 0; if (c == u) { draw++; return "It's a draw"; } else if ((c == "Fire") && (u == "Air")) { loss++; return "You Lose, Fire beats Air!"; } else if ((c == "Fire") && (u == "Earth")) { draw++; return "It's a draw!"; } else if ((c == "Fire") && (u == "Water")) { win++; return "You Win, Fire is beaten by Water!"; } <tr><td><input type=text size=5 name=w ></td><td>win</td></tr> <tr><td><input type=text size=5 name=l></td><td>loss</td></tr> <tr><td><input type=text size=5 name=d></td><td>draw</td></tr> hi, I would to validate a textbox, and limit it to 3alphabets and 3 numbers. That is after the user have input 3 alphabets, he can only enter 3 numbers and nothing more. Can someone help me out? Is it easy to add a smiley script to a guestbook ? I want a few faces like the ones on this page.. I hope there is some simple way to do this - google didnt really help me.. Its something like this im after : Visitor click on a smiley and following text goes to the textbook <img src="http://domain/images/smiley.gif" Thanks in advance... Hi, I am having a very difficult time trying to get my text box to validate. I successfully validated my first program using prompts but now when I am using a HTML form I cannot get it to work. I have spent hours upon hours trying to get this working, any help would be greatly appreciated. Code: <html> <head> <title></title> <script type="text/javascript"> function validateform() { var temp = document.forms["inputform"]["temperature"].value while ((isNaN(temp)) || (temp == "")) { alert("Please enter a number"); return false; } if (parseFloat(temp) > 35) { alert("Wow, it's really hot!"); } else if (parseFloat(temp) <= 35) && (parseFloat(temp) >= 18)) { alert("It's a comfortable temperature right now"); } else if (parseFloat(temp) < 18) { alert("Brrr, it's a little bit cold for my liking"); } else { alert("Goodbye, and thanks for using TempReader"); } } </script> </head> <body> <form name="inputform" method="post" action=""> <table> <tr><td>What Is The Temperature?</td><td><input type="text" name="temperature"></td></tr> <!-- Below is submit button that when pressed validates the form --> <tr><td></td><td><input type="submit" value="Submit Details" onclick = validateform()></td></tr> </table> </form> </body> </html> My code is not validating the textboxes..if someone could help me figure this out. Thank you <script type="text/javascript"> function validate() { with (document.form1) { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var alertMessage = "The following fields\nare REQUIRED:\n\n"; if (realname.value == "") { alertMessage += "Name\n" } if(reg.test(email.value) == "") { alertMessage += "Email\n" } if (phone.value == "") { alertMessage += "Phone\n" } if (security_code.value == "") { alertMessage += "Security Code\n" } if (alertMessage != "The following fields\nare REQUIRED:\n\n") { alert(alertMessage); return (false);} return (true) } } </script> <form action="formmail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return validate()" > Reply With Quote 01-31-2015, 09:12 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Have you tried using your error console (F12 key)? if(reg.test(email.value) == "") { should be if(!reg.test(email.value) { as test returns true or false. But form validation of the pattern if (document.formname.formfield.value == "") - that is blank or empty- is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses (as you have done). This topic has been covered many times before in this forum. The use of with is strongly deprecated and is forbidden in strict mode, and alerts are long obsolete as a way of displaying a message to your users. And so is assigning a name to a form - it is allowed only for the sake of backwards compatibility. In short - you should rewrite your code to modern standards. Hello How am I able to add a a cross to the right of a textbox which once click it clears the text from the textbox, sort of like the way Google do it, I have been trying to do this for ages now and can't seem to find a way to do it. Any help welcome, thank you. - DJCMBear OK, my javascript is not that good. So I need your help! I need to create a text box that will only work if a certain code is entered. So if 1234 is in the text box and submit is clicked, then it will take you to the site. IF not then it will print "Please enter correct code" next to the submit button. Here is what I have so far: <input name="txtBox" type="text"/> <input name="btnButton" type="button" value="Submit" onclick="return checkValue()" /> <script type="text/JavaScript"> function checkValue() { var secretcode = document.getElementById("txtBox"); if (secretcode == "1234") { document.location.href = 'secret.html'; } } </script> Thank you for your help! Hi, I have a text-box where you enter the phone nos. On key-press, i have written a validation code to enter only nos and "-". I have disabled Ctrl+v, but my customer want to enable ctrl+v for that text-box only. My requirement is after pasting the value it should automatically check for validation.. How to do it? Thanks... |