JavaScript - Convert Input Text To Uppercase As User Types
This should be simple, but I can't quite get it to work without some kind of side-effect. I've checked the forum and there doesn't seem to be anything that directly relates. What I want to do is convert the text that a user is typing to uppercase as they type it. What I have so far:
function convertToUppercase(aControl) { var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"; if (cursorKeys.indexOf(event.keyCode+";") == -1) { aControl.value = aControl.value.toUpperCase(); } } <input onkeyup="convertToUppercase(this)"/> The problem that I have is that this moves the cursor to the end of the line after every character. If you want to go and add something to the middle of what you've typed, you can type one character and then the cursor jumps to the end. e.g. inserting "abc" between the "R" and "E" of "FRED" gets you: FRAEDBC What I need is either: 1) ability to get the cursor/caret position and restore it after I set the uppercase string -- or -- 2) ability to intercept the keystroke in the event and make it uppercase before the browser adds it naturally to the input's value. Solution should be browser-independent (if at all possible). I'm mostly interested in IE though. Thanks, Chris Similar TutorialsHey guys, I just joined the forums (literally) and just started coding (mainly with CSS and HTML) about 3-4 weeks ago. I'd really like to get into JavaScript to make cool things happen on my website. With that being said, I've come up with a pretty cool idea but am not sure how to go about my problem. Enough with the chit chat. What I'm trying to do is add text to a user's input. For instance, if they write "Hello", the function should automatically add "World" to the output. I'd ideally like for the output to be searched on Google (think search engine) with the results displayed on a new page. Thanks in advance for any help! Hey everyone, I've looked around quite a bit and can't seem to find anything but I was wondering if there is some open source software offering a text editor/input field similar to the one used on this forum when submitting a comment or thread? Where you can click a bold button or Italic button or URL button to structure it? Thanks Josh Yes - I need a script that will validate user input against a text file - exactly like the one in the left sidebar at http://www.oilpatchfuel.com/Pages/Welcome.aspx titled "Delivery Area". Thanks! This is pretty basic. I have a coupon code text box and need to ensure whatever the user enters is converted to uppercase before it is validated. The problem is, someone else wrote the code and I have no idea where or how to put in the code to change the text to uppercase. I would appreciate your help. Payment.php: PHP Code: <input type="text" name="coupon" id="coupon-input" class="coupon-input" placeholder="Enter coupon code" style="color:#000;"> <input class="bt2 apply-btn" type="button" value="Apply" id="apply-btn"> <script> // When the browser is ready... $(function(){ $("#apply-btn").click(function(){ $("#apply-btn").attr("disabled", "disabled"); $("#apply-btn").val('Checking'); $("#amount").val(<?php echo number_format($item_price, 2); ?>); $(".form-product-details").html('<b>$<span id="input_14_1001_price"><?php echo number_format($item_price, 2); ?></span></b>'); $.ajax({ url: 'validate-coupon.php', type: "POST", data: {val: $("#coupon-input").val(), amt:$("#amount").val()}, dataType: 'JSON', success: function(res) { $("#apply-btn").val('Apply'); $("#apply-btn").prop("disabled", false); if(res.type=='error'){ $("#msg").html("<span style='color:red;font-weight:bold;'>Invalid Coupon.</span>"); } else { $("#msg").html("<span style='color:green;font-weight:bold;'>Coupon is valid.</span>"); $(".form-product-details").html('<b><span style="text-decoration:line-through">$<?php echo number_format($item_price, 2); ?></span> $<span id="input_14_1001_price" class="underlined">'+res.amt+'</span><br /><span>'+res.msg+'</span></b>'); $("#amount").val(res.amt); } } }); }); }); </script> validate-coupon.php: PHP Code: $coupon = array( array("code" => "COUPON50", 'value'=>'50', 'type'=>'P'), ); if(isset($_POST['val']) && $_POST['val']!='' && isset($_POST['amt']) && $_POST['amt']!=''){ $matched = false; foreach($coupon as $coup){ if($coup['code']==$_POST['val']){ $matched = true; $amt = $_POST['amt']; if($coup['type']=='P'){ $new_amt = $amt - ($amt/100)*$coup['value']; $msg = $coup['value']."% off coupon code applied"; } else if($coup['type']=='F'){ $new_amt = $amt - $coup['value']; $msg = "$".$coup['value']." off coupon code applied"; } break; } } if($matched){ echo json_encode(array("type" => "success", 'amt'=>number_format($new_amt, 2), 'msg'=>$msg)); } else { echo json_encode(array("type" => "error")); } } else { echo json_encode(array("type" => "error")); } exit; Hello, I am trying to add radio buttons in this quiz script that i'm using, but when i change the drop down box to radio buttons the quiz script stops working, i.e it will not calculate the correct answers / percentage. I dont think i am correctly adding the input type "radio" and the script cannot recognise the value properly as i'am trying to make custom radio buttons from javascript / css. here is the script thats stopped working but how do i make the radio buttons send the correct value to the quiz script? Hope someone can help, i can add the css file if need be.. Code: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" /> <TITLE>Seventies Trivia Quizzes & Games</TITLE> <link rel="stylesheet" type="text/css" href="style.css" /> <script language=Javascript> <!-- function stopErrors(){ return true; } window.onerror=stopErrors; // --> </script> <script language="JavaScript1.1"> <!-- Hide from old browsers function quiz(form) { var i = 0 var result1=document.form1.answer1.selectedIndex var result2=document.form2.answer2.selectedIndex var result3=document.form3.answer3.selectedIndex var result4=document.form4.answer4.selectedIndex var result5=document.form5.answer5.selectedIndex var result6=document.form6.answer6.selectedIndex var result7=document.form7.answer7.selectedIndex var result8=document.form8.answer8.selectedIndex if (result1==0){ alert("Question #1 was not answered");} if (result2==0){ alert("Question #2 was not answered");} if (result3==0){ alert("Question #3 was not answered");} if (result4==0){ alert("Question #4 was not answered");} if (result5==0){ alert("Question #5 was not answered");} if (result6==0){ alert("Question #6 was not answered");} if (result7==0){ alert("Question #7 was not answered");} if (result8==0){ alert("Question #8 was not answered");} else { if (result1==3){i++} if (result2==3){i++} if (result3==1){i++} if (result4==4){i++} if (result5==3){i++} if (result6==1){i++} if (result7==1){i++} if (result8==2){i++} document.total.score.value = i var per = Math.round((i / 20) * 100) document.total.percent.value = per if (result1 != 3){document.form1.check1.checked = true} else {document.form1.check1.checked = false} if (result2 != 3){document.form2.check2.checked = true} else {document.form2.check2.checked = false} if (result3 != 1){document.form3.check3.checked = true} else {document.form3.check3.checked = false} if (result4 != 4){document.form4.check4.checked = true} else {document.form4.check4.checked = false} if (result5 != 3){document.form5.check5.checked = true} else {document.form5.check5.checked = false} if (result6 != 1){document.form6.check6.checked = true} else {document.form6.check6.checked = false} if (result7 != 1){document.form7.check7.checked = true} else {document.form7.check7.checked = false} if (result8 != 2){document.form8.check8.checked = true} else {document.form8.check8.checked = false} } } //--> </SCRIPT> <style type="text/css"> <!-- body { margin-left: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; } --> </style></HEAD> <BODY> <FORM NAME="form1"><INPUT TYPE="hidden" NAME="check1"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer1" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-1a0"> <input name="sample-radio" id="sample-radio-1a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-1a1"> <input name="sample-radio" id="sample-radio-1a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-1a2"> <input name="sample-radio" id="sample-radio-1a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-1a3"> <input name="sample-radio" id="sample-radio-1a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-1a4"> <input name="sample-radio" id="sample-radio-1a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form2"><INPUT TYPE="hidden" NAME="check2"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer2" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-2a0"> <input name="sample-radio" id="sample-radio-2a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-2a1"> <input name="sample-radio" id="sample-radio-2a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-2a2"> <input name="sample-radio" id="sample-radio-2a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-2a3"> <input name="sample-radio" id="sample-radio-2a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-2a4"> <input name="sample-radio" id="sample-radio-2a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form3"><INPUT TYPE="hidden" NAME="check3"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer3" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-3a0"> <input name="sample-radio" id="sample-radio-3a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-3a1"> <input name="sample-radio" id="sample-radio-3a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-3a2"> <input name="sample-radio" id="sample-radio-3a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-3a3"> <input name="sample-radio" id="sample-radio-3a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-3a4"> <input name="sample-radio" id="sample-radio-3a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form4"><INPUT TYPE="hidden" NAME="check4"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer4" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-4a0"> <input name="sample-radio" id="sample-radio-4a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-4a1"> <input name="sample-radio" id="sample-radio-4a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-4a2"> <input name="sample-radio" id="sample-radio-4a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-4a3"> <input name="sample-radio" id="sample-radio-4a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-4a4"> <input name="sample-radio" id="sample-radio-4a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form5"><INPUT TYPE="hidden" NAME="check5"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer5" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-5a0"> <input name="sample-radio" id="sample-radio-5a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-5a1"> <input name="sample-radio" id="sample-radio-5a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-5a2"> <input name="sample-radio" id="sample-radio-5a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-5a3"> <input name="sample-radio" id="sample-radio-5a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-5a4"> <input name="sample-radio" id="sample-radio-5a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form6"><INPUT TYPE="hidden" NAME="check6"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer6" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-6a0"> <input name="sample-radio" id="sample-radio-6a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-6a1"> <input name="sample-radio" id="sample-radio-6a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-6a2"> <input name="sample-radio" id="sample-radio-6a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-6a3"> <input name="sample-radio" id="sample-radio-6a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-6a4"> <input name="sample-radio" id="sample-radio-6a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form7"><INPUT TYPE="hidden" NAME="check7"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer7" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-7a0"> <input name="sample-radio" id="sample-radio-7a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-7a1"> <input name="sample-radio" id="sample-radio-7a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-7a2"> <input name="sample-radio" id="sample-radio-7a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-7a3"> <input name="sample-radio" id="sample-radio-7a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-7a4"> <input name="sample-radio" id="sample-radio-7a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <FORM NAME="form8"><INPUT TYPE="hidden" NAME="check8"> <b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR> <input type="hidden" SELECT NAME="answer8" SIZE=1> <fieldset class="radios"> <label class="label_radio" for="sample-radio-8a0"> <input name="sample-radio" id="sample-radio-8a0" NAME="radio" type="radio" SELECTED VALUE="0"/> CHOOSE AN ANSWER</label> <label class="label_radio" for="sample-radio-8a1"> <input name="sample-radio" id="sample-radio-8a1" NAME="radio" type="radio" VALUE="1" /> Randy Meisner</label> <label class="label_radio" for="sample-radio-8a2"> <input name="sample-radio" id="sample-radio-8a2" NAME="radio" type="radio" VALUE="2" /> J.D. Souther</label> <label class="label_radio" for="sample-radio-8a3"> <input name="sample-radio" id="sample-radio-8a3" NAME="radio" type="radio" VALUE="3" /> Jackson Browne & Glenn Frey</label> <label class="label_radio" for="sample-radio-8a4"> <input name="sample-radio" id="sample-radio-8a4" NAME="radio" type="radio" VALUE="4" /> Don Henley</label> </fieldset> </SELECT></FORM> <BR> <BR><BR><HR> <P>That's it! Now click the "Submit" button to grade your Seventies music knowledge.<BR> <form name="total"> <INPUT TYPE="BUTTON" VALUE="Submit" onClick="quiz()"> <INPUT TYPE="button" VALUE="Reload Quiz" onClick='parent.location="javascript:location.reload()"'><BR><HR><BR>Results:<BR><BR> You scored <INPUT TYPE="TEXT" NAME="score" VALUE="" SIZE=5> out of <INPUT TYPE="TEXT" NAME="outof" VALUE="8" SIZE=5> questions correct.<BR><BR> Your Sco <INPUT TYPE="TEXT" NAME="percent" VALUE="" SIZE=3> %<BR><BR> <HR> </FORM> <script> var d = document; var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false; var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); }; onload = function() { var body = gebtn(d,'body')[0]; body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js'; if (!d.getElementById || !d.createTextNode) return; var ls = gebtn(d,'label'); for (var i = 0; i < ls.length; i++) { var l = ls[i]; if (l.className.indexOf('label_') == -1) continue; var inp = gebtn(l,'input')[0]; if (l.className == 'label_check') { l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off'; l.onclick = check_it; }; if (l.className == 'label_radio') { l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off'; l.onclick = turn_radio; }; }; }; var check_it = function() { var inp = gebtn(this,'input')[0]; if (this.className == 'label_check c_off' || (!safari && inp.checked)) { this.className = 'label_check c_on'; if (safari) inp.click(); } else { this.className = 'label_check c_off'; if (safari) inp.click(); }; }; var turn_radio = function() { var inp = gebtn(this,'input')[0]; if (this.className == 'label_radio r_off' || inp.checked) { var ls = gebtn(this.parentNode,'label'); for (var i = 0; i < ls.length; i++) { var l = ls[i]; if (l.className.indexOf('label_radio') == -1) continue; l.className = 'label_radio r_off'; }; this.className = 'label_radio r_on'; if (safari) inp.click(); } else { this.className = 'label_radio r_off'; if (safari) inp.click(); }; }; </script> <P>Ratings:<br><br> 90-100% - "I Just Want To Celebrate"<br> 80-89% - "I Want To Take You Higher"<br> 70-79% - "One Toke Over The Line"<br> 60-69% - "What's Going On"<br> 50-59% - "Stuck In The Middle With You"<br> 0-49% - "Ball of Confusion"<br> </blockquote> </BODY> </HTML> Hey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript"> function clickFocus(input){ input.className = 'focus'; if (input.value = input.defaultValue){ input.value = ''; } } function unFocus(input){ input.className = 'entered'; if (input.value == ''){ input.value = input.defaultValue; input.className = 'normal' } } </script> <form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)"> <input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" /> <input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" /> <input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" /> <textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea> <input class="submit" name="submit"type="submit" value="Send Message" /> </form> Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Hello all, First off I would like to say a big hello and thank you to the forum for helping me with code over the years... I am trying to create an iframe with a user input, however, I dont simply want the iframe to display the URL the user has entered in the iframe. I want it to be used within a URL string. For example: The iframe should display http://www.google.co.uk/search?q=UserKeyword I havent got a clue where to start from.... Any help would be highly appreciated! Thanks! Hey, so i've been learning basics and I can get the following code to work as a prompt and I thought hey, I wounder if I can get it to work of a UI system, so I edited the code and got this Read Below Post Can you please help me to find where I am going wrong. Thanks MancunianMacca So I have been working on this exercise for about a month. In the book I am reading it say's this:"For each number that the user enters, the text boxes on the web page should display: the last score that was entered, the number of scores that have been entered, the total of these scores, the average score, the best score, and the worst score. When you write the code for this function, you should enclose the prompt method within a loop, but you decide which type of loop is best for this application. Now, write and test the code." The first peice of code is my HTML, and the second piece of code is the function that I have to start from in a .js file. I just seem to be confused at how my structuring needs to be. The 999 in the function is what the prompt says to enter to escape. Code: <body> <div id="content"> <h1>Using Loops</h1> <label for="lastScore">Last Sco </label> <input type="text" id="lastScore" /><br /> <p></p> <label for="scoreCount">Score Count:</label> <input type="text" id="scoreCount" /><br /> <label for="scoreTotal">Score Total:</label> <input type="text" id="scoreTotal" /><br /> <p></p> <label for="scoreAverage">Average Sco </label> <input type="text" id="scoreAverage" /><br /> <label for="bestScore">Best Sco </label> <input type="text" id="bestScore" /><br /> <label for="worstScore">Worst Sco </label> <input type="text" id="worstScore" /><br /> <p></p> </div> Code: var process_test_scores = function () { var testScore; testScore = parseInt(prompt( "Enter a valid test score between 0 and 100.\n" + "To end test score entry, enter 999.", 999)); } _________
In a normal chatroom, when the user "says" something, the text will be displayed normally on a line with the date/time attached like the example below. 2011/11/09 Capypara: Blah balh blah I would like to make it so that the text typed in by the user will appear inside a graphic (square, or those chat bubbles) like the example below. The graphic will only appear when a user says something, so essentially both the graphic and the text will appear together. ~~~~~~~~~~~~~~~~~~~~~~~~ | | | 2011/11/09 Capypara: Blah balh blah | | | ~~~~~~~~~~~~~~~~~~~~~~~~ Is it possible to go about doing this? Thanks for reading this. Is there any possible way for JS to save changes that a user has made? my situation is that I'm a photographer who offers photobooks. My customers often have hundreds or thousands of photos and want captions on lots of them. I want to post a photo gallery with a user input form. I've created a simple form, but I want the user to be able to save comments straight to the gallery so I can look at them... it's only a very simple form and isn't quite finished yet, oh by the way, I'm not sure how to use the check box... but, i'll work on that. Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- #divWrapper { text-align: center; width: 430px; margin-right: auto; margin-left: auto; } --> </style> </head> <body> <script type="text/javascript"> function picForm() { if(document.frmInput.addPic.value="yes") { document.frmOutput.outChoice.value="will" } else { document.frmOutput.outChoice.value="will NOT" } document.frmOutput.outCap.value=document.frmInput.addCap.value; document.frmOutput.outComm.value=document.frmInput.addComm.value; } </script> <div id="divWrapper"> <p>Uncheck the box if you do NOT want this photo to appear in your photobook. Please write your caption in the box provided. Any further comments you wish to make can be entered in the second box.</p> <div id="divInput"> <form name="frmInput"> <table id="tblForm" cellpadding="3px"> <tr> <td><input name="addPic" type="checkbox" value="yes"> Add to Photobook</td> <td> </td> </tr> <tr> <td>Caption<br> <textarea name="addCap" cols="24" rows="3" value="...Add Caption Here..."></textarea></td> <td>Comments<br> <textarea name="addComm" cols="24" rows="3" value="...Add Comments Here..."></textarea></td> </tr> <tr> <td></td> <td><div align="right"> <input name="btnSubmit" type="button" value="Submit" onClick="picForm()" /> </div></td> </tr> </table> </form> </div> <div id="divOutput"> <form name="frmOutput"> <p>This photo <input name="outChoice" type="text" value="" size="7" style="border:0px" /> appear in your photo book.</p> <p>You would like the caption to read: <input name="outCap" type="text" value="" size="50" style="border:0px" /> </p> <p>Your comments to us a <input name="outComm" type="text" value="" size="50" style="border:0px" /> </p> </form> </div> </div> </body> </html> Please help! Basically what we are trying to accomplish is this... We have a php file in which a hyperlink "Select Forms" is present. What we want to happen is when the "Select Forms" link is clicked on a pop-up window will open. The content of this window is generated from our database and displayed for the user. The php in this window generates a list of checkboxes for the user to select and an "OK" button. What we want to happen is when the user selects the various checkboxes and clicks "OK" the window closes and the previous "Select Forms" link is converted to text based on the checkboxes selected from the pop-up window. We have the pop-up window already taken care of, as well as the php codes. We are having a hard time getting the php variables for the checkboxes transferring to the previous window and converting that link to the text variables. Any ideas? Thanks!! Dear expert (Ok, i am new to this and should maybe not address this as a letter ) I hope someone can help me ... this is what i want to achieve (I am using frontpage) I want to create a table (this i can do!) that require a user input (number of guests). It then has SEVERAL options: - Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later) - Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation. a number of the above options, and a grand total on the bottom. I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works Can someone PLEASE help me, or point me in the right direction? (I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn) Below is a link to the example .. http://www.ouma-se-kombuis.co.za/test.html Thank you! Hi there, I'll try to be brief: When a user submits a website in the input field on my site, I'd like there to be a background process that takes a screenshot of that website and then displays that image to the user. This website does it perfectly. The user writes the website to the right, and the screenshot is displayed to the left. I'm looking for a free alternative, and read that perhaps webkit(s) might be the solution? I'm a total newbie when it comes to this so any feedback is gold to me. Thank you so much guys/gals. The assignment is to take a form and determine whether or not the user has put in data into the parts of the form. We are using Javascript to validate the form input and html to create the form itself. My code was running before, but then I added a confirm user input at the bottom of the form and it stopped working. I have no idea what to do at this point. Any help would be useful. I don't have any error messages because I don't know how to test it in the firefox javascript console, if someone wants to instruct me on this i can get back to you guys with the error messages. Thanks Also, my submit button has not been running the validate program when selected. Code: <html> <head> <title>Order Form</title> <script language="javascript"> function validate(objForm) { str=""; checkstr=""; checkstr2=""; stateselect = "false"; //VALIDATING CONTACT INFORMATION if (objForm.firstName.value == "") { str+= "You must enter your First Name\n"; } if (objForm.lastName.value == "") { str+= "You must enter your Last Name\n"; } if (objForm.phoneNumber.value == "") { str+= "You must enter a Phone Number\n"; } //VALIDATING SHIPPING ADDRESS if (objForm.address.value == "") { str+= "You must enter an address\n"; } if (objForm.city.value == "") { str+= "You must enter a city\n"; } for(i=1; i<objForm.state.options.length; i++) { if (objForm.state.options[i].selected) stateselect = "true"; } if (stateselect != "true") str+= "You must select a state\n"; if(isNaN(myForm.zipcode.value)||myForm.zipcode.value.length!=5) { str+= "You must enter a 5 digit zipcode\n"; } //VALIDATING CHECK BOX if (!objForm.doublechocchip.checked && !objForm.vanillachip.checked && !objForm.zebra.checked && !objForm.tiger.checked && !objForm.choccoveredstrawberry.checked && !objForm.mintcchochip.checked && !objForm.raspberry.checked && !objForm.redvelvet.checked && !objForm.kailua.checked && !objForm.blackforest.checked && !objForm.peanutbutter.checked && !objForm.mandm.checked && !objForm.oreo.checked && !objForm.mocha.checked && !objForm.gingerbread.checked && !objForm.pumpkin.checked && !objForm.pistachio.checked && !objForm.lavender.checked && !objForm.carrotcake.checked && !objForm.strawberrybanana.checked) str+= "You must select at least one cupcake\n"; //VALIDATING CHECKED BOXES if (objForm.doublechocchip.checked) checkstr += objForm.doublechocchip.value + ", "; if (objForm.vanillachip.checked) checkstr += objForm.vanillachip.value + ", "; if (objForm.zebra.checked) checkstr += objForm.zebra.value + ", "; if (objForm.tiger.checked) checkstr += objForm.tiger.value + ", "; if (objForm.choccoveredstrawberry.checked) checkstr += objForm.choccoveredstrawberry.value + ", "; if (objForm.mintchocchip.checked) checkstr += objForm.mintchocchip.value + ", "; if (objForm.raspberry.checked) checkstr += objForm.raspberry.value + ", "; if (objForm.redvelvet.checked) checkstr += objForm.redvelvet.value + ", "; if (objForm.kailua.checked) checkstr += objForm.kailua.value + ", "; if (objForm.blackforest.checked) checkstr += objForm.blackforest.value + ", "; if (objForm.peanutbutter.checked) checkstr += objForm.peanutbutter.value + ", "; if (objForm.mandm.checked) checkstr += objForm.mandm.value + ", "; if (objForm.oreo.checked) checkstr += objForm.oreo.value + ", "; if (objForm.mocha.checked) checkstr += objForm.mocha.value + ", "; if (objForm.gingerbread.checked) checkstr += objForm.gingerbread.value + ", "; if (objForm.pumpkin.checked) checkstr += objForm.pumpkin.value + ", "; if (objForm.pistachio.checked) checkstr += objForm.pistachio.value + ", "; if (objForm.lavender.checked) checkstr += objForm.lavender.value + ", "; if (objForm.carrotcake.checked) checkstr += objForm.carrotcake.value + ", "; if (objForm.strawberrybanana.checked) checkstr += objForm.starwberrybanana.value + ", "; //VALIDATING CHECK BOX if (!objForm.mini.checked && !objForm.regular.checked && !objForm.collossal.checked) str+= "You must select a size\n"; //VALIDATING CHECKED BOXES if (objForm.mini.checked) checkstr2 += objForm.mini.value + ", "; if (objForm.regular.checked) checkstr2 += objForm.regular.value + ", "; if (objForm.collossal.checked) checkstr2 += objForm.collossal.value + ", "; //print all form input if (str != ""){ alert(str); return false; } else{ str= "Please Confirm Your Information:"; str += "\nFirst Name: " +objForm.firstName.value; str += "\nLast Name: " +objForm.lastName.value; str += "\nPhone Number: " +objForm.phoneNumber.value; str += "\nAddress: " +objForm.address.value; str += "\nCity: " +objForm.city.value; str += "\nZip Code: " +objForm.zipcode.value; str += "\nCupcakes: " +checkstr; str += "\nSize: " +checkstr2; alert(str); return true; } } </script> </head> <link rel="stylesheet" type="text/CSS" href="CellFormating.css"/> <body onLoad="document.forms[0].elements[0].focus()"> <h2 align="center" class="CellFormat1"> Please Use the Following Form to Place Your Order: </h2> <form id ="CellFormat2" name="myForm" method="post" action="orderconfirmation.html" onSubmit="return validate(myForm)"> <table align="center"> <tr> <td id="CellFormat4">Contact Information:</td> </tr> <tr> <td>First Name: </td> <td><input name="firstName" size="15" /></td> </tr> <tr> <td>Last Name: </td> <td><input type="text" name="lastName" size="15" maxlength="20" /></td> </tr> <tr> <td>Phone Number: </td> <td><input type="text" name="phoneNumber" size="10" maxlength="10" /></td> </tr> </table> <p> </p> <table align="center"> <tr> <td id="CellFormat4">Shipping Address:</td> </tr> <td>Address: </td> <td><input type="text" name="address" size="22" maxlength="30" /></td> </tr> <tr> <td>City: </td> <td><input type="text" name="city" size="10" maxlength="15" /></td> </tr> <tr> <td>State: </td> <td> <select name="state" size="1"> <option selected>Select your State</option> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <option>California</option> <option>Colorado</option> <option>Connecticut</option> <option>Delaware</option> <option>Florida</option> <option>Georgia</option> <option>Hawaii</option> <option>Idaho</option> <option>Illinois</option> <option>Indiana</option> <option>Iowa</option> <option>Kansas</option> <option>Kentucky</option> <option>Louisiana</option> <option>Maine</option> <option>Maryland</option> <option>Massachusetts</option> <option>Michigan</option> <option>Minnesota</option> <option>Mississippi</option> <option>Missouri</option> <option>Montana</option> <option>Nebraska</option> <option>Nevada</option> <option>New Hampshire</option> <option>New Jersey</option> <option>New Mexico</option> <option>New York</option> <option>North Carolina</option> <option>North Dakota</option> <option>Ohio</option> <option>Oklahoma</option> <option>Oregon</option> <option>Pennsylvania</option> <option>Rhode Island</option> <option>South Carolina</option> <option>South Dakota</option> <option>Tennessee</option> <option>Texas</option> <option>Utah</option> <option>Vermont</option> <option>Virginia</option> <option>Washington</option> <option>West Virginia</option> <option>Wisconsin</option> <option>Wyoming</option> </select> </td> </tr> <tr> <td>Zip Code: </td> <td><input type="text" name="zipcode" size="10" maxlength="15" /></td> </tr> </table> <p> </p> <table align="center"> <tr> <td><div align="center" id="CellFormat4">Select Your Cupcakes:</div></td> <td><div align="center" id="CellFormat4">Select Your Size(s):</div></td> <td><div align="center" id="CellFormat4">Select The Amount:</div></td> </tr> <tr> <td><input type="checkbox"name="doublechocchip" value="doublechocchip"/>Double Chocolate Chip</td> <td><input type="checkbox"name="mini" value="mini"/>Mini</td> <td>Amount: <input type="text" name="amt" size="5" maxlength="10" /></td> </tr> <tr> <td><input type="checkbox"name="vanillachip" value="vanillachip"/>Vanilla Chip</td> </tr> <tr> <td><input type="checkbox"name="zebra" value="zebra"/>Zebra</td> <td><input type="checkbox"name="regular" value="regular"/>Regular</td> </tr> <tr> <td><input type="checkbox"name="tiger" value="tiger"/>Tiger</td> </tr> <tr> <td><input type="checkbox"name="choccoveredstrawberry" value="choccoveredstrawberry"/>Chocolate Covered Strawberry</td> <td><input type="checkbox"name="collosal" value="collossal"/>Collossal</td> </tr> <tr> <td><input type="checkbox"name="mintchocchip" value="mintchocchip"/>Mind Chocolate Chip</td> </tr> <tr> <td><input type="checkbox"name="raspberry" value="raspberry"/>Raspberry</td> </tr> <tr> <td><input type="checkbox"name="redvelvet" value="redvelvet"/>Red Velvet</td> </tr> <tr> <td><input type="checkbox"name="kailua" value="kailua"/>Kailua</td> </tr> <tr> <td><input type="checkbox"name="blackforest" value="blackforest"/>Black Forest</td> </tr> <tr> <td><input type="checkbox"name="peanutbutter" value="peanutbutter"/>Peanut Butter</td> </tr> <tr> <td><input type="checkbox"name="mandm" value="mandm"/>M&M's</td> </tr> <tr> <td><input type="checkbox"name="oreo" value="oreo"/>Oreo</td> </tr> <tr> <td><input type="checkbox"name="mocha" value="mocha"/>Mocha</td> </tr> <tr> <td><input type="checkbox"name="gingerbread" value="gingerbread"/>Gingerbread</td> </tr> <tr> <td><input type="checkbox"name="pumpkin" value="pumpkin"/>Pumpkin</td> </tr> <tr> <td><input type="checkbox"name="pistachio" value="pistachio"/>Pistachio</td> </tr> <tr> <td><input type="checkbox"name="lavender" value="lavender"/>Lavender</td> </tr> <tr> <td><input type="checkbox"name="carrotcake" value="carrotcake"/>Carrot Cake</td> </tr> <tr> <td><input type="checkbox"name="strawberrybanana" value="strawberrybanana"/>Strawberry Banana</td> </tr> </table> <p> </p> <div align="center" id="CellFormat4">Payment Method:</div> <table align="center"> <tr> <td>Credit Card Type: </td> </tr> <tr> <td>Visa:<input type="radio" name="visa" value="visa" /></td> <td>Master Card:<input type="radio" name="master" value="master" /></td> <td>Discovery:<input type="radio" name="discovery" value="discovery" /></td> <td>Chase:<input type="radio" name="chase" value="chase" /></td> </tr> <tr> <td>Credit Card Number: </td> <td><input type="text" name="creditNumber" size="12" maxlength="12" /></td> </tr> <tr> <td>Expiration Date: </td> <td><input type="text" name="ExpDate" size="5" maxlength="5" /></td> </tr> <tr> <td>Security Code: </td> <td><input type="text" name="SecurityCode" size="3" maxlength="3" /></td> </tr> </table> <p> </p> <table align="center"> <tr> <td><textarea rows="10" cols="25" wrap="soft">Please let us know how we are doing</textarea></td> </tr> </table> <table align="center"> <tr> <td><input type="submit" name="Order" value="Submit Order" onSubmt="return validate(myForm)";/></td> <td><input type="button" name="confirm" value="Confirm Information" onClick="validate(myForm)"/></td> <td><input type="reset" name="Clear" value="Reset"/></td> </tr> </table> </form> <table align="center"> <tr> <td><a href="cupcakes.htm">View the Cupcakes</a></td> <td><a href="home.html">Go Home!</a></td> </tr> </table> </body> </html> Hi I have a form with some input tags, and when the user submit the form I which if a new hidden tag get submitted with the value the user did tip. I am thinking for doing that but not sure if it is the right thing : Code: <form method="POST" <input type="text" name="{actionForm.Name}" id="username"> <input type="password" name="{actionForm.Passwd}" id="password"> <input type="hidden" name="usernameh" value="document.getElementById('username')"> <input type="hidden" name="passwordh" value="document.getElementById('password')"> </form> Is it alright ? I mean when the user enter the username and password, the hidden tags should contain those two values that the user has made. |