JavaScript - Java To Take A Form Field Content And Make Linked
I have a form with a postcode field in it
I want to add a button or text link next to this field which if clicked on goes to the google maps url querying that postcode i.e. if the postcode text in the field (form not submitted) was SW1A 1AA then without submitting that form there would be a button / link next to it which when clicked on went to "http://maps.google.co.uk/?q=SW1A1AA" Pretty sure Java should be able to do this ? Similar TutorialsHi all: This script and code works great, but in order for me to finish, I need a way of passing to the next PHP page which check box is checked. Currently, it is just passing a single value (1, 2, 3, 4, 5, or 6) depending on the last box checked. I need a way to record which check boxes are selected. Code: <html> <head> <script type="text/javascript"> var majors = { "001 - Exchange" : [ 2, 6 ], "003 - Academic Foundations" : [ 2, 6 ], "005 - Pre-Engineering" : [ 2, 6 ], "006 - Pre-Business" : [ 2, 6 ], "008 - Pre-Nursing" : [ 2, 6 ], "010 - Accounting" : [ 3, 4 ], "014 - Afro-American Studies" : [ 2, 6 ], "050 - American Studies" : [ 2, 6 ], "070 - Anthropology" : [ 2, 6 ], "080 - Art" : [ 2, 6 ], "082 - Art History" : [ 2, 6 ], "090 - Arts and Sciences" : [ 2, 6 ], "100 - Astronomy" : [ 2, 6 ], "115 - Biochemistry" : [ 2, 6 ], "120 - Biology" : [ 2, 5, 6 ], "124 - Biomedical Technology" : [ 2, 6 ], "130 - Botany" : [ 2, 6 ], "135 - Business Administration" : [ 3, 4 ], "140 - Business Law" : [ 3, 4 ], "160 - Chemistry" : [ 2, 5, 6 ], "163 - Childhood Studies" : [ 2, 5, 6 ], "190 - Classics" : [ 2, 6 ], "198 - Computer Science" : [ 2, 5, 6 ], "200 - Creative Writing" : [ 5 ], "202 - Criminal Justice" : [ 2, 5, 6 ], "203 - Dance" : [ 2, 6 ], "220 - Economics" : [ 2, 6 ], "300 - Education" : [ 2, 6 ], "350 - English" : [ 2, 5, 6 ], "352 - English - American Literature" : [ 2, 5, 6 ], "354 - English - Film Studies" : [ 2, 5, 6 ], "360 - European Studies" : [ 2, 6 ], "387 - Film Studies" : [ 2, 6 ], "390 - Finance" : [ 3, 4 ], "415 - Foreign Languages" : [ 2, 6 ], "420 - French" : [ 2, 6 ], "460 - Geological Sciences" : [ 2, 6 ], "470 - German" : [ 2, 6 ], "490 - Greek" : [ 2, 6 ], "500 - Hebraic Studies" : [ 2, 6 ], "509 - Historical Methods and Skills" : [ 2, 6 ], "510 - History, General" : [ 2, 6 ], "512 - History, American" : [ 2, 5, 6 ], "516 - African Asian Latin American and World Hist" : [ 2, 6 ], "520 - Home Economics" : [ 2, 6 ], "525 - Honors Program" : [ 2, 6 ], "533 - Human Resource Development" : [ 3 ], "537 - Hospitality Management" : [ 3 ], "549 - International Studies" : [ 2, 6 ], "555 - Student Proposed Major" : [ 2, 6 ], "560 - Italian" : [ 2, 6 ], "565 - Japanese" : [ 2, 6 ], "570 - Journalism" : [ 2, 6 ], "580 - Latin" : [ 2, 6 ], "590 - Latin American Studies" : [ 2, 6 ], "601 - Law - Day Student" : [ 1 ], "602 - Law - Evening Student" : [ 1 ], "606 - Liberal Studies" : [ 2, 5, 6 ], "615 - Linguistics" : [ 2, 5, 6 ], "620 - Management" : [ 3, 4 ], "623 - Management Science and Info Systems" : [ 3, 4 ], "626 - Managerial Economics" : [ 4 ], "630 - Marketing" : [ 3, 4 ], "640 - Mathematics" : [ 2, 6 ], "645 - Mathematical Science" : [ 5 ], "660 - Medical Technology" : [ 2, 6 ], "680 - Microbiology" : [ 2, 6 ], "698 - Museum Studies" : [ 2, 6 ], "700 - Music" : [ 2, 6 ], "701 - Music, Applied" : [ 2, 6 ], "705 - Nursing" : [ 2, 6 ], "730 - Philosophy" : [ 2, 6 ], "740 - Physical Education" : [ 2, 6 ], "742 - Physical Therapy" : [ 5 ], "750 - Physics" : [ 2, 6 ], "760 - Physiology" : [ 2, 6 ], "780 - Plant Physiology" : [ 2, 6 ], "790 - Political Science" : [ 2, 6 ], "830 - Psychology" : [ 2, 5, 6 ], "834 - Public Administration" : [ 5 ], "840 - Religon" : [ 2, 6 ], "842 - Rhetoric" : [ 5 ], "860 - Russian" : [ 2, 6 ], "890 - General Science" : [ 2, 6 ], "910 - Social Work" : [ 2, 6 ], "920 - Sociology" : [ 2, 6 ], "940 - Spanish" : [ 2, 6 ], "950 - Speech" : [ 2, 6 ], "960 - Statistics" : [ 2, 6 ], "964 - Teacher Preparation" : [ 2, 6 ], "965 - Theater Arts" : [ 2, 6 ], "975 - Urban Studies and Community Development" : [ 2, 6 ], "976 - Urban Planning" : [ 2, 6 ], "981 - Volunteer Organization and Leadership" : [ 2, 6 ], "988 - Womens & Gender Studies" : [ 2, 6 ], "989 - Writing" : [ 2, 6 ], "990 - Zoology" : [ 2, 6 ] }; Array.prototype.isMember = function( find ) { for ( var i = 0; i < this.length; ++i ) { if ( this[i] == find ) return true; } return false; } function resetOptions( ) { var form = document.theForm; var sel = form.Majors; for ( var s = sel.options.length-1; s > 0; --s ) { sel.options[s] = null; } var checked = [ ]; for ( var cb = 0; cb < form.schools.length; ++cb ) { if ( form.schools[cb].checked ) checked.push( form.schools[cb].value ); } for( major in majors ) { var mschools = majors[major]; for ( var c = 0; c < checked.length; ++c ) { if ( mschools.isMember( checked[c] ) ) { sel.options[sel.options.length] = new Option( major, major ); break; } } } } </script> </head> <title>Search</title> <body bgcolor="99CCFF"> <center> <br> <center>Search:<table border='1'> <form name='theForm' action='display.php' method='post'> <tr><td>ID: </td><td><input type="text" name="ID"/></td></tr> <tr><td>Last Name: </td><td><input type="text" name="NAME_LAST"/></td></tr> <tr><td>First Name: </td><td><input type="text" name="NAME_FIRST"/></td></tr> <tr><td valign="top">School: </td> <td> <input type="checkbox" name="schools" value="1" onClick="resetOptions()"> Law School<br/> <input type="checkbox" name="schools" value="2" onClick="resetOptions()"> College of Arts and Sciences<br/> <input type="checkbox" name="schools" value="3" onClick="resetOptions()"> School of Business (Undergraduate)<br/> <input type="checkbox" name="schools" value="4" onClick="resetOptions()"> School of Business (Graduate)<br/> <input type="checkbox" name="schools" value="5" onClick="resetOptions()"> Graduate School<br/> <input type="checkbox" name="schools" value="6" onClick="resetOptions()"> University College </td> </tr> <tr><td>Major: </td><td><select name="Majors"> <option value="" selected>Select a major</option> </select></td></tr> <tr><td>Order By: </td><td> <select name="ORDER_BY"> <option value = "" selected> Select One </option> <option name="NAME_LAST" value = "NAME_LAST ASC"> Last Name </option> <option name="CURRIC_CD" value = "CURRIC_CD ASC"> Major </option> <option name="ID" value = "ID ASC"> RUID </option> <option name="UNIT_OF_REG_CD" value = "UNIT_OF_REG_CD ASC"> School </option> <option name="EMAIL_ADDR" value = "EMAIL_ADDR ASC"> Email Address </option> </select></td> </tr> </table> <br><br> <input type='submit'/> </form><br><br> </center> </body> </html> Thanks in advance. Hey there guys, I am building a site of which I would like the contact information and form to pop up from the button on the menu/header frame into the main frame as a lightbox ...no matter which page is loaded in the main frame. I was trying to experiment with the archived "jQuery Contact form for your website" tutorial from web devlopment blog . com. (I didnt want to post a link to it as I dont want to possibly flag the moderators) Any Ideas? Go to http://whitetailfantasies.com to see the layout and what I am going for. Thanks I have this code Code: <script language=javascript> <!-- redirect to profile.php var user = location.search; window.location="profile.php" +user; // --> </script> but I want it to do this profile.php?epuid=<?=bin2hex($session->username);?> how would I do this as the java code up the top takes the user nickname from chatroom HI every one I want to change a div content in my page via javascript , the problem is the index.php file is coded and I can't read it , but I could execute some JavaScript codes from somewhere else . The problem is that the <div> is in the lowest side of the page and my javascript code is above it , so The javascript code runs first and It couldn't find the div because it's not loaded yet . my javascript code is something like this : <script> document.getElementById("test").innerHTML= "ddd"; </script> <div id="test">dude</div> in the example above , it's not working But if I insert the JavaScript below the <div> it's working . How can I run it in this example ? If the javascript code is above the <div> , how can I change the div's content ? Thanks I am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in. I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me. How my list.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // if records present if (mysql_num_rows($result) > 0) { // iterate through resultset // print news titles while($row = mysql_fetch_object($result)) { ?> <b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font> <br> <font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font> <p> <? } } // if no records present // display message else { ?> <font size="-1">No news is bad news</font> <? } How my story.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // get resultset as object $row = mysql_fetch_object($result); // Show me the news if ($row) { ?> <p> <b><? echo $row->title; ?></b> <p> <font size="-1"><? echo nl2br($row->content); ?></font> <p> <font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font> <? } else { ?> <p> <font size="-1">That news post could is not found.</font> <? } If you need more information for this I will provide whatever you need. hi i need to merge this code in 1 file the files in attach the code for auto popup window withe cookis i need merge it for switch it to vb mood i think the job very easy but am not java script cooder Hello, I'd like to make sure that a field is a field: Code: if ( typeof( myField ) != "field" ) { } This doesn't work, and I can't seem to find the answer. I can know if a field is a checkbox, for example, but I don't how to find the broader category of "input field". I have a text box with add button. When the add button is clicked i want it to add the contents of the text box as a new line in the select field. I also want a button that would allow me to remove the selected item in the select field. is this possible? when someone selects a date it shows ok in the field but the checker script can not view it for some reason, i have an alert show the content, if i place the alert before everything it unblurs and the tick shows, but i have to click the alert off for the tick to show. The alert show nothing on the first run. just a thought, but would the DOM not be updating quick enough for the next line to read the content ? reason i ask is that with the alert line in the code it shows the previous state of the field when i change the date to something else. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type='text/javascript'> function checkValidFormInput() { redX = '<img alt="Invalid" src="images/redX.png" style="width: 18px;">'; greenTick = '<img alt="Valid" src="images/icongreentick.png">'; alert('.' + document.getElementsByName('j1date')[0].value + '.'); document.getElementsByName('j1date').blur(); if (document.getElementsByName('j1date')[0].value == '') { document.getElementById('j1dateImg').innerHTML = redX;// } else { document.getElementById('j1dateImg').innerHTML = greenTick;// } } </script> </head> <body> <? // for some strange reason the following lines need to be here for the date picker to work! ?> <table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;"> <tr><td id="ds_calclass"></td></tr> </table> <script type="text/javascript" src="datetimepicker.js"></script> <? // end of date picker storage ?> <form method="POST" action="index.php"> <li class="value"> <input type="text" autocomplete="off" name="j1date" id="j1date" value="<?=$j1date;?>" style="width: 200px; float: left;" onClick="ds_sh(this);" onBlur="checkValidFormInput();"> <div style="float: left;" id="j1dateImg"></div><br style="clear:both"> </li> </form> </body> </html> attached is the datetimepicker.js you will need to remove the last part .txt from the above file name Hi Guys, i am wondering if there is a way to have an auto Complete form field from a db table data ? thanks Here is my validation script from dreamweaver i also have it in php for server side. But I trying to get a checkbox to make a text field required when you select it. Right now I have it so when you hit submit whether the text field is filled out or whether the checkbox is selected or not the error message comes up no matter what i do please help. the link to the page is http://www.mark-10.com/inquiries2 Code: function validateCheckbox() { if(document.forms["form1"].sales.checked) { if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx return false ; } else { return true; } } } function MM_validateForm() { //v4.0 if (document.getElementById){ var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]); if (val) { nm=val.name; if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; } } if(!validateCheckbox()) { errors+="If checkbox checked, please include telephone number"; } if (errors) alert('The following error(s) occurred:\n'+errors); document.MM_returnValue = (errors == ''); } } //--> I'm absolutely new to JavaScript and HTML, although I've done a fair amount with Visual Basic (VB6 and macros in Word and Excel). I'm trying to create a form with different sections. When the user checks a checkbox for a section, the table with the input areas for that section will appear; if the user changes his mind and unchecks the box, that table will go away. I've played with the visibility attribute, and that works - sort of. I can hide the table from view, but it's still there in the page, taking up as much room as it does whether visible or not. There's a big empty gap containing an invisible table or two if the user only selects the third or fourth section. Code: function showhide(element){ if(document.getElementById(element).style.visibility=="hidden"){ document.getElementById(element).style.visibility="visible"; document.getElementById(element).style.display="block"; }else{ document.getElementById(element).style.visibility="hidden"; document.getElementById(element).style.display="none"; } } And I played with the height attribute, and that works - to a point. I can only collapse the table ror height when there's nothing in it. But if there's text, or a text box, or a textarea box, the row will not go down to zero, even if that's what I set it to. Code: <tr ID="targetrow" style="height:0px;"></tr> I'm hoping the only solution isn't to write the table into the document on the fly when the box is checked, and then delete it if the box is unchecked. Any help? Ed Hi, I have advertiser adbrite, and they are pressuring me to create a mature content gateway. Do you know how on some porn sites it has "click here if you are 18 and older to proceed" and "Click Here to exit if you are not over 18" (redtube.com has an example) I have figured out the easiest way for me to do this is: when a user clicks on a link to mature content, they are redirected to the mature content gateway. the gateway will have options: "Continue" and "Exit" Continue will link them to the original Mature Content URL, while Exit will reffer them to the home page. How would I do this? I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: .... <script type="text/javascript"> window.onload = function() { document.forms[0].username.focus(); } function validate(form) { var form = document.getElementById("reg"); var e = document.getElementById("error"); e.style.background = "red"; for(var i = 0; i < form.elements.length; i++) { var el = form.elements[i]; if(el.type == "text" || el.type == "password") { if(el.value == "") { e.innerHTML = "Please fill in all fields!"; el.style.border = "1px solid red"; el.focus(); return false; } else { el.style.border = "1px solid green"; return false; } } } var un = form.username; un.value = un.value.replace(/^\s+|\s+$/g,""); if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value))) { e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters"; un.focus(); return false; } var pw = form.password; pw.value = pw.value.replace(/^\s+|\s+$/g,""); if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value))) { e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters"; pw.focus(); return false; } e.innerHTML = "You filled in all the fields, well done!"; e.style.background = "green"; return false; } </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>My Cool Website</h1> </div> <div id="content"> <div class="padding"> <h2>Registration</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <form id="reg" action="#" method="post" onsubmit="return validate(this)"> <div id="error"></div> <div><label for="username">Username</label></div> <div><input type="text" name="username" id="username" size="30" maxlength="16" /></div> <div><label for="password">Password</label></div> <div><input type="password" name="password" id="password" size="30" maxlength="16" /></div> <div><label for="c_password">Confirm Password</label></div> <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div> <div><label for="email">Email address</label></div> <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div> <div><label for="c_email">Confirm Email address</label></div> <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div> <div><label for="firstname">First name</label></div> <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div> <div><label for="surname">Surname</label></div> <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div> <div><label for="gender">Gender</label></div> <div> <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div> <div><input type="radio" name="gender" value="f" />Female</div> </div> <div><input type="submit" value="Register" name="submit" /></div> </form> </div> </div> <div id="footer"> <p>Copyright © 2009 My Cool Website</p> </div> </div> </body> </html> 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. 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 cant get my head around this..i had a form posting data to my sql database but it would show the thank you using {if} ect so created java vaildation script what points it to ?action=registered showing thank you message but it not submitting to sql or sending notification email?? can any one help me? thanks dan thanks I am having trouble getting this code to work correctly. What I am trying to do is on my site i will have a button that will open this popup window with a login form and what i would like it to do is when the form is submitted i want the window to close and the main page to redirect to whatever page i would like it sent to. And if the login information is wrong i would like the popup window to stay open and say that it is wrong in red letters at the top. Here is the code for the popup window: PHP Code: <?php if($target == "LogIn") { if($view == "Form") { echo ' <script language="JavaScript" src="window.js"> </SCRIPT> <style type="text/css"> <!-- body { background-color: #000000; } --> </style> <FORM action="index.php?act=Login&CODE=50" onSubmit="javascript:login();" method="post" name="mlogin"> <p> <font face="verdana" color="#76a5d5" size="1"><B> Username: </b></font><INPUT class="textInput1" style="border: 1px solid #76A5D5; font-family: verdana, helvetica, sans-serif; font-size: 11px; padding: 2px; vertical-align: middle; margin: 0; width: 80px" type="username" size="25" name="username" value="Username"/> <br> <FONT face="verdana" color="#76a5d5" size="1"><B> Password: </b></font><INPUT class="textInput1" style="border: 1px solid #76A5D5; font-family: verdana, helvetica, sans-serif; font-size: 11px; padding: 2px; vertical-align: middle; margin: 0; width: 80px" type="password" size="25" name="password" value="*******"/> <INPUT type="image" src="images/login.jpg" ALT="Click Here to Login!" BORDER="0" ALIGN="middle" value="submit" name="submit"> </p> </form>'; } } ?> Code for the javascript: PHP Code: //Open up a new window with specific dimensions function info(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=100,left = 300,top = 500');"); } <!-- function login() { setTimeout('window.close()',2000); opener.location.href='/main/index.php'; } //--> Any help would be greatly appreciated 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! |