JavaScript - Randomize Form Input Tags
Hey all,
I have a simple form that looks something like this: Code: <div id="responses"> <input class="checkbox" type="checkbox" name="group1" value="1" id="option1"/><label class="label" for="option1">Option one text</label> <input class="checkbox" type="checkbox" name="group1" value="0" id="option2"/><label class="label" for="option2">Option two text</label> <input class="checkbox" type="checkbox" name="group1" value="1" id="option3"/><label class="label" for="option3">Option three text</label> </div> I am trying to figure out a way to use javascript to take these and randomize the order of them. For example, if you were looking at it and clicked a randomize button it would shuffle around the options. I am fairly new to javascript and don't really know where to start with something like this. I would greatly appreciate it if someone could get me started or point me in the right direction. Thanks! Similar TutorialsIs it necessary (or advisable) to place <form> tags around input buttons? They seem to work fine either way. Code: <input type="button" value=" Home " onClick="parent.main.location='home.htm'"> Hello, I have a simple form with simple validation. I am just playing around a bit with forms and don't really have concrete knowledge. What I have done is created a form. Asking for first name, last name, age and email. When the user clicks the submit button I want 2 functions to run, the first checking the input is correct and also making sure all fields have a value. Once everything is checked and is O.K I want to go into another function which sends all this information to an array one by one. I am having difficulty accessing each individual input tag. I could achieve what I want to do, but it will take double the lines of code because each input has a different 'name'. So, what I am trying to do is access the input tags the same as you would do an array. Here is my code: HTML: Code: <form name="regForm" id="form"> <fieldset> <legend>Real Heroes - Registration Form</legend> <p>First Name:<input type="text" size="30" maxlength="20" name="txtFirstName" /></p> <p>Last Name:<input type="text" size="30" maxlength="20" name="txtLastName" /></p> <p>Age:<input type="text" size="30" maxlength="3" name="txtAge" /></p> <p>Email Address:<input type="text" size="30" maxlength="50" name="email" /></p> <p><input type="button" value="Submit Registration" name="butChkForm" onclick="callFuncs_onclick()" /> <input type="reset" value="Reset" name="resetForm" /></p> </fieldset> </form> JavaScript: Code: //CALLING THE FORM SCRIPTS// function callFuncs_onclick() { chkForm_onclick(); creatingDatabase_onclick(); } //**************FORM VALIDATION***************// function chkForm_onclick() { var theForm = document.regForm; if (theForm.txtFirstName.value == "" || theForm.txtLastName.value == "" || theForm.txtAge.value == "" || theForm.email.value == "") { alert("Please complete all of the form."); if (theForm.txtFirstName.value == "") { theForm.txtFirstName.focus(); } if (theForm.txtLastName.value == "") { theForm.txtLastName.focus(); } if (theForm.txtAge.value == "") { theForm.txtAge.focus(); } if (theForm.email.value == "") { theForm.email.focus(); } } else if (isNaN(theForm.txtAge.value)) { alert("That is not valid input for this field. Please re-enter your age."); theForm.txtAge.focus(); } else { alert("Thank you for completing the form, " + theForm.txtFirstName.value); } } function creatingDatabase_onclick() { var form = document.regForm; var index = form.input[0].value; alert(index); } I'm not quite sure where I am going wrong. Please note that these functions really labour the point, I know I have way too many lines of code but I am still very amateur with JS. Thank you for any help/information. Kind Regards, LC. 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. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax Hey Everybody, It has been a few years since I have dealt with coding in JavaScript. I will admit up-front that this is for a part of homework that I have been stuck on for about 2 weeks. I will apologize in advance for the length of this. The first portion is showing what I'm going for. The second portion is what I'm currently wanting help with. Here is what is happening: I'm in a Human Computer Interaction class and my group is developing a "Group Randomizer" web page. I figured using an ArrayList would be easiest rather than coding a database. My group is using Weebly.com to do our site. Things that the site will do (trying to keep this aspect to a single web page): 1) Add/Remove names to/from an ArrayList that is hidden in the background 2) Click a button to generate a randomized order of the ArrayList 3) Be able to split the list with line-breaks based on a number for "group size". Example: (adding names) name[0]=student1 name[1]=student2 name[2]=student3 ... ... ... Number of Groups: [User Input] ----> 3 (press generate button) (resulting random output) Group1: student2 student5 Group2: student1 student4 Group3: student3 student6 Then being able to remove the names as needed too. Now, I AM NOT looking for somebody to do all of this for me. What I am wanting at this time is help figuring out how to produce a randomized order output from an ArrayList such as follows: (temporary ArrayList) student[0]=student1 student[1]=student2 student[2]=student3 ... ... ... (generate output) student4 student2 student7 student1 student5 ... ... ... Any help with that portion would be helpful. Hi, I got following script + HTML: Code: <script type="text/javascript"> function tjek() { if ((document.forms[0].spil.value=='HIDDENWORD')) { alert('Correct message'); window.location.reload( true ); } else if ((document.forms[0].spil)) { alert('Wrong message'); } } function tastkontrol() { document.forms[0].spil.value = document.forms[0].spil.value.toUpperCase(); } </script> <form method="post" onsubmit="tjek();return false;"> <input type="text" name="spil" onkeyup="tastkontrol();return false;"> <input type="submit" value="Send"> </form> It's a game, were the person has to guess the hidden word. I know want to add this to the script, so the HIDDENWORD changes into either APPLE or HOUSE when refreshing page: Code: <script type="text/javascript"> code=new Array; code[1]="APPLE"; code[2]="HOUSE"; function Show() { num = Math.random(); num = 1 + ( num * ((code.length - 1)-1)); num = Math.round(num); document.write("" + code[num] + ""); } Show(); </script> I've tried some stuff, but I don't got a clue, how to merge these to scripts into eachother. Thanks in Advance. I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
Hi, I was hoping someone might have a solution to randomizing a URL in javascript... in this case for an embedded Simpleviewer link? At the moment the link is http://timperceval.com/guiran/intro1/ but I would like to have the site randomly choose from four URLs. The embedded code is as follows: <!--START SIMPLEVIEWER EMBED.--> <script type="text/javascript" src="http://timperceval.com/guiran/intro1/svcore/js/simpleviewer.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.baseURL = "http://timperceval.com/guiran/intro1/"; simpleviewer.ready(function () { simpleviewer.load("sv-container", "100%", "100%", "000000", true, flashvars); }); </script> <div id="sv-container"></div> <!-- END SIMPLEVIEWER EMBED -- Any ideas would really help! Thanks, Tim I am bringing in twitter feed and appending it via a for loop to div( .container ) and assigning each "tweet" with a separate div(.content). I also have divs(.content) that I am manually placing in. All of these are being displayed through http://masonry.desandro.com/. The divs are being segregated (manually placed divs) and (for loop, appended divs). I would like to randomize all of the divs so they are not seperated and show in random orders on load. But it is only randomizing the "manually placed divs". Can and how do I go about fixing this? I am new(er) at jQuery so keep that in mind. I would paste code but it's very long. Any and all help is appreciated! hi, i currently have an array of 20 images. on load a random selection of 15 are taken, then they ordered randomly on the page and doubled (to play a match the pairs memory game) clicking restart will reorder the images randomly, but will use the same 15 chosen on page load. i need the restart button to choose another random 15 images from the 20 in the array. here is the site: http://www.thebigappwall.com/test.htm and here is the code: Code: // Concentration Memory Game with Images - Head Script // copyright Stephen Chapman, 28th February 2006, 24th December 2009 // you may copy this script provided that you retain the copyright notice function randomOrd(){return (Math.round(Math.random())-0.5); } var back = '/images/back.png'; var tile = ['/images/lij.png','/images/myh_appwall.png','/images/Tap-Forms-icon-40.png','/images/urban-rivals-app-40.png','/images/warshipicon.png','/images/www2pdf-40.png', '/images/pandora.png','/images/preschoolicon.png','/images/my_virtual_girlfriend_40x40_01.jpg','/images/my_virtual_girlfriend_40x40_02.jpg','/images/my_virtual_girlfriend_40x40_03.jpg','/images/my_virtual_girlfriend_40x40_04.jpg','/images/www2pdf-40.png','/images/preschoolicon.png','/images/pandora.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png']; tile.sort( randomOrd ); function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im = []; for (var i = 0; i < 15; i++) {im[i] = new Image(); im[i].src = tile[i]; tile[i] = '<img src="'+tile[i]+'" width="40" height="40" alt="tile" \/>'; tile[i+15] = tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML = '<div onclick="disp('+i+');return false;"><img src="'+back+'" width="40" height="40" onclick="addClick();" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt; window.onload=start; function start() {for (var i = 0; i <= 29 ;i++) displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd );cntr(); tid = setInterval('cntr()', 1000);} function cntr() {var min = Math.floor(tmr/60);var sec = tmr%60;document.getElementById('c-timer').innerHTML = min+':'+ (sec<10 ? '0' : '') + sec;tmr++;} function disp(sel) {if (tno>1) {clearTimeout(cid); conceal();}document.getElementById('t'+sel).innerHTML = tile[sel];if (tno==0) ch1 = sel;else {ch2 = sel; cid = setTimeout('conceal()', 900);}tno++;} function conceal() {tno = 0; if (tile[ch1] != tile[ch2]) {displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15) clearInterval(tid); } Thanks Hello guys, I am a js noobie really, and am looking for something specific. I have googled for quite some time now looking for a script to randomize a list of images on refresh. For example, If I have 8 images in a line in this order 12345678, when I refresh, I would like them to go into a new random order - 84567321, or anything. What I have found are scripts to allow random new images to appear in place of a single image, which is as close as I have gotten. Does anyone know of a script that can do this, or know how to make one? I have looked everywhere, and can't seem to locate one. Any help is greatly appreciated. Is there a way so that I can move the submit button outside of the form tags? and if this is possible, can you make it with multiple text boxes, each with their corresponding submit button? heres the coding Code: <html> <head> <script type="text/javascript"> <!-- function gotoURL() { var newURL = document.url2go.go.value document.location.href=newURL } //--> </script> </head> <body> <form action="javaScript:gotoURL()" method="get" name="url2go"> <input type="text" name="go" value="http://" size="50"> <INPUT TYPE="image" SRC="" id="go" HEIGHT="150" WIDTH="150" BORDER="0" ALT="Submit Form"> </form> </body> </html> Hi, Im using a authoring tool to develop an elearning test course. The course is composed of several HTML pages with Buttons for the multiple choice test. The setup of the course is that it will only ask 10 questions out of a pool of 30 questions. When the HTML & JS files are online, the test takes 20-40seconds to load. I believe it is related to the code that selects the 10 questions from the 30. I've singled out the code that does the select random pages... Is there any way to optimize the code? I've attached the HTML (in txt format) page where the javascript can be found. Looking forward to your replies! Hey guys, have a bit of an issue/question... Not sure what I am doing wrong...i do not know javascript at all lol I have a URL stucture which needs to be changed according to the input fields https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122&adminflag=Y This part stays the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= after the "=" sign, I want it to input text from a input box "J-JOE123", so if I put J-DOE123 in the first input box and run the search, I want it to pull up https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= J-DOE123 after the "J-DOE123", the next part "&vgroupName1=Dealer-" remains the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123 &vgroupName1=Dealer- the next input box would have a drop down with 2 selections (jcode and lcode) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer- jcode next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode - the next input box would have a drop down with 2 selections (USA or CAN) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode- USA next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA - next, i will have a drop down box containing several hundred codes such as "P0122" and many more. for this, I would need for the display value to be "P0122" but when the URL gets populated, it would have to be "P4038P0122" https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA- P4038P0122 The reason why the entire code must change is because P0122 would be P4038P0122, but if it is P0165, it would be N1534P0165, so each code would have its own first part and second part, but in the drop down box, i want it to only display the 2nd part P0122/P0165/etc.. because that is what I go by, but the system only reads full codes. I do have a spreadsheet with the entire list of FULL codes and can do an extract from each cell in order to get the SHORT code. and finally, the URL would have to end with "&adminflag=Y" and will remain the same at all times. https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122 &adminflag=Y So, all together I would have 4 input fields in the form. UserID, jcode/lcode, USA/CAN, and Code. Please help who ever can. If you need more info, please let me know and I shall try my best to explain further. Thanks in advance guys Hi, I've devised a javascript to guess what a user is typing in. That all works, but I'm stuck on how to take that value the user has submitted and put it back into the form. At the moment my form is: <form method="post" action="/bin/openathenssp_isapi.dll?type=ukfed&dir=req&requestURL=index.php" onsubmit="send_sso('login_form', 'loading', '<?=SITE_URL?>'); return false;"> <input type='text' name='uni_name' id='uni_name' value='' autocomplete="off"> <input type="hidden" name="entityID" id="entityID" /> //Where the name is guessed <script>actb(document.getElementById("uni_name"),customarray);</script> <input type='submit' name='submit' value='submit'> </form> So basically I'm trying to put uni_name into the entityID. Here's my javascript: function send_sso(ajax_div, loading_div, site_url) { replace_this_div = ajax_div; replace_loading_div = loading_div; var entityID = document.getElementById("entityID").value; if (uni_name == "Bournemouth University"){ document.getElementById('entityID').value = "https://idp.bournemouth.ac.uk/shibboleth"; ...MORE INSTITUTIONS GO HERE... } else { alert("Sorry, the institution '" +uni_name+ "' was not recognised or does not have access to this service."); } } But this does not seem to be working - any ideas? Not sure how to describe this. I've been tasked with the responsibility of creating a web form. That's not the problem and I can do that. The trick is, each field needs to be incased in it's own box that flies in from the left. So, the first box that flies in from the left would be email address, when you click enter, it flies off to the right and the next box flies in from the left asking for the persons name. Is it possible to do this and where might I go to learn more about doing this type of coding. Allright, so i got index html, and on the head of the document i got jquery already, and what i got is a form, and what i want it to do is that once the input is sumbmited, to post it on a list. BUt something is missing here or maybe im doing it wrong, i need some guidance plz. here is my table: Code: <form name="postbar_add_post" id="postbar_add_post" method="post"> <fieldset> <legend>Write text here ...</legend> <input type="text" name="addcontentbox" id="addcontentbox" /> <input type="button" name="addpost" value="Submit" class="submit" /> </fieldset> </form> and heres is the function that i have on the head, where what i try is to make it post on the list: Code: <script type="text/javascript"> $(document).ready(function(){ $("form#postbar_add_post").submit(function() { var message_wall = $('#addcontentbox').attr('value'); $.ajax({ type: "POST", data:"addcontentbox="+ addcontentbox, success: function(){ $("ul#wall").prepend("<li>"+addcontentbox+"</li>"); $("ul#wall li:first").fadeIn(); } }); return false; }); }); </script> But is just not working :S .... any ideas/guidance? xD . Btw, on the body, theres only that table above, and a " <ul id="wall"></ul> " , wich is where im trying the content to be posted on. Any ideas where the flaw is ? =\ Hi, I have a registration form with the following input field: textbox -name textbox -surname textbox -phone listbox - country listbox - state Am populating my country & state listbox from my database, state depends on the country. However when i select my country&state the page refreshes & all my other values i.e name, surname, phone & others disappears i have to retype all again, any suggestion? thanks Using .htaccess i have a password protected folder online containing 7 files with one single user/pass combination. User is not allowed to see that 7 files are available. User enters 1 of 7 "Access Keys" in a simple HTML Form text input which is then processed (script?) User is then redirected automatically to the related file (for download) e.g. Access Key #1 redirects user to Protected File #1 Access Key #4 redirects user to Protected File #4 etc. What's the best way to implement this? Perl/CGI? PHP? Javascript? 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> |