|
JavaScript - Need Javascript To Check A Form And Trigger A Hidden Form To Become Visible.
Similar TutorialsI'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Afternoon All, I have managed to secure some JavaScript code from another site that allows me to access values from within my Google Analytics cookie: <!-- begin Referer Check --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>"); </script> <script type='text/javascript'> var pageTracker = _gat._getTracker("UA-1-1"); pageTracker._trackPageview(); // // This is a function that I "borrowed" from the urchin.js file. // It parses a string and returns a value. I used it to get // data from the __utmz cookie // function _uGC(l,n,s) { if (!l || l=="" || !n || n=="" || !s || s=="") return "-"; var i,i2,i3,c="-"; i=l.indexOf(n); i3=n.indexOf("=")+1; if (i > -1) { i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; } c=l.substring((i+i3),i2); } return c; } // // Get the __utmz cookie value. This is the cookies that // stores all campaign information. // var z = _uGC(document.cookie, '__utmz=', ';'); // // The cookie has a number of name-value pairs. // Each identifies an aspect of the campaign. // // utmcsr = campaign source // utmcmd = campaign medium // utmctr = campaign term (keyword) // utmcct = campaign content // utmccn = campaign name // utmgclid = unique identifier used when AdWords auto tagging is enabled // // This is very basic code. It separates the campaign-tracking cookie // and populates a variable with each piece of campaign info. // var source = _uGC(z, 'utmcsr=', '|'); var medium = _uGC(z, 'utmcmd=', '|'); var term = _uGC(z, 'utmctr=', '|'); var content = _uGC(z, 'utmcct=', '|'); var campaign = _uGC(z, 'utmccn=', '|'); var gclid = _uGC(z, 'utmgclid=', '|'); // // The gclid is ONLY present when auto tagging has been enabled. // All other variables, except the term variable, will be '(not set)'. // Because the gclid is only present for Google AdWords we can // populate some other variables that would normally // be left blank. // if (gclid !="-") { source = 'google'; medium = 'cpc'; } // Data from the custom segmentation cookie can also be passed // back to your server via a hidden form field var csegment = _uGC(document.cookie, '__utmv=', ';'); if (csegment != '-') { var csegmentex = /[1-9]*?\.(.*)/; csegment = csegment.match(csegmentex); csegment = csegment[1]; } else { csegment = '(not set)'; } // // One more bonus piece of information. // We're going to extract the number of visits that the visitor // has generated. It's also stored in a cookie, the __utma cookis // var a = _uGC(document.cookie, '__utma=', ';'); var aParts = a.split("."); var nVisits = aParts[5]; /* function populateHiddenFields(f) { f.source.value = source; f.medium.value = medium; f.term.value = term; f.content.value = content; f.campaign.value = campaign; f.segment.value = csegment; f.numVisits.value = nVisits; alert('source='+f.source.value); alert('medium='+f.medium.value); alert('term='+f.term.value); alert('content='+f.content.value); alert('campaign='+f.campaign.value); alert('custom segment='+f.segment.value); alert('number of visits='+f.numVisits.value); return false; } */ document.forms["cforms2"].elements["cf2_field_1"].value = source; </script> The key outputs from this code are the vars: source medium term content campaign csegment nVisits My question is, how can I get the source var into the hidden field in the form in my footer http://www.yogaholidays.co? I have tried to pass just the source var from within the <script> tags. document.forms["cforms2"].elements["cf2_field_1"].value = source; I have commented out part of original code that I did not think I needed. Any help that can be offered I would be grateful, ultimately I would like to be able to pass all these values to hidden fields. Thanks Paul Brown Okay this is part of an ajax driven shopping cart. the problem is i need to check for 2 different selections that would be for the same payment method. here is the code as it sits now Code: if ( typeof document.checkout.payment[3] != 'undefined'){
if (document.checkout.payment[3].checked == true)
{
if (document.checkout.cc_owner.value == "" )
{errMsg += 'Please complete or verify the information in the Name on the card field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_number.value == "")
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_cvv2.value == "")
{
errMsg += 'Please complete or verify the information in the CVC/CVV code field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_phone.value == "")
{
errMsg += 'Please complete or verify the information in the Card company\'s telephone number field in the \'Payment Method\' section.' + "\n";
}
else
{
myCardNo = document.checkout.cc_number.value;
myCardType = document.checkout.surcharge.value;
if (!checkCreditCard (myCardNo,myCardType))
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
}
}
}
}
}}
}
the problem is in the first 2 lines i basically need it to do this, but when i do it like how i need it to be it will not work. it looks like i am doing it incorrectly maybe. firebug gives me an undefined error on the first checked value because it does not exist when i need it to check for the 2 value. Code: if ( typeof document.checkout.payment[3] != 'undefined' || typeof document.checkout.payment[2] != 'undefined'){
if (document.checkout.payment[3].checked == true || document.checkout.payment[2].checked == true)
{
if (document.checkout.cc_owner.value == "" )
{errMsg += 'Please complete or verify the information in the Name on the card field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_number.value == "")
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_cvv2.value == "")
{
errMsg += 'Please complete or verify the information in the CVC/CVV code field in the \'Payment Method\' section.' + "\n";
}
else
{
if(document.checkout.cc_phone.value == "")
{
errMsg += 'Please complete or verify the information in the Card company\'s telephone number field in the \'Payment Method\' section.' + "\n";
}
else
{
myCardNo = document.checkout.cc_number.value;
myCardType = document.checkout.surcharge.value;
if (!checkCreditCard (myCardNo,myCardType))
{
errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n";
}
}
}
}
}
}}
}
I am just starting out using Javascript and created a simple knowledge check to give a learner feedback on a question. It will allow the learner to quickly check if they have mastered a topic. The problem that I am having is that if I put two of these knowledge checks on the same webpage than it just posts the same answer when the submit button is clicked. What I have been doing is just pasting the code below twice on the page and changing the question and answer out. When I click "Check Answer" it is the same answer for both questions. Here is my code: Code: <fieldset>
<legend><strong>Question 1</strong></legend>
<SCRIPT LANGUAGE="JavaScript">
function readText (form) {
TestVar =form.inputbox.value;
alert ("You typed: " + TestVar);
}
function writeText (form) {
form.inputbox.value = "The wavelength of the blue light scatters better than the rest, predominates over the other colors in the light spectrum, and makes the sky appear blue to us."
}
</SCRIPT>
<form name="myform" action="" method="GET">
<label for="question">Why is the Sky Blue?</label><br><br>
<input name="inputbox" value="" type="text" style="width: 287px; height: 112px">
<p>
<input id="question" value="Check Answer" onclick="writeText(this.form)" type="button">
</p>
</form>
</fieldset>
Any help would be much appreciated in terms of direction. Thank you. Hello, I have the following DIV tag Code: <div id = "cbContainer"> </div> The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below: Code: var chkboxes = '';
for(var r = 0; r < related.length; r++)
{
chkboxes = chkboxes +
'<div class ="versionswidth">'+
'<input type="checkbox" name="version" value = related[r] />'+ related[r] +
'</div>';
}
var div = document.getElementById("cbContainer");
div.innerHTML = chkboxes;
div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting. I will be grateful for any help. Thank you. Hi I'm trying to create a questionnaire style series of radio buttons which are hidden and then a different set of radio buttons displayed depending on the previous answer. eg Q1 Is it a man? (if select yes then display) Q2 Is he called John? (if no then display) Q3 Is he called Gary? and so on... I've been testing using the code below but wondered if anyone had any ideas on how this could be done easily? Be grateful for any advice, Matt. Code: Is it a Man?
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
<br />
<p id="continue">
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
</p>
<script>
var continue_button = document.getElementById('continue');
continue_button.style.visibility = 'hidden';
function toggle(switchElement) {
if (switchElement.value == 'y')
continue_button.style.visibility = 'visible';
else
continue_button.style.visibility = 'hidden';
}
</script>
Hello everyone, I have tried about 8 different variations of code to try to get this to work properly and cannot accomplish it. Please help if you can figure it out. I have 2 div's that are hidden. each div contains a FLV video, autostart=false. when button 1 is clicked, DIV 1 becomes visible and you may click on video to start playing it. When button 2 is clicked, DIV 1 goes to hidden and DIV 2 becomes visible with video 2. -- Ok so problem is this, the video that was playing in DIV 1 remains playing or at least the audio remains playing. If video 2 is started then you have 1 video source and 2 audio sources playing. I am trying to get the video in DIV 1 or DIV 2 to STOP or PAUSE when the DIV's state becomes hidden. here is the last code I tried below before frustration over come me. any suggestions would be great. Robert 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>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 13px;
top: 47px;
visibility: hidden;
}
#Layer2 {
position:absolute;
width:600px;
height:645px;
z-index:2;
left: 14px;
top: 47px;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
</head>
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display DIV 1" width="27" height="22" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide')" />
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/spacer.gif" width="60" height="1" />
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display Div 2" width="27" height="22" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show')"/>
<div id="Layer1">VIDEO 1
<object id="player1" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
<div id="Layer2">VIDEO 2
<object id="player2" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
</body>
</html>
Hi! I have a javascript in the head of the document which has a variable named "ref2" ... ref2 is already working as I can see its value working in another function. I need to send this variable as the value of a hidden field in the form which is in the body of the document. This is my JavaScript Code: Code: function WriteContactFormStatement1 () {
var ContactFormValue = ref2;
document.write('<input type="hidden" name="UReferrersName" value="' + ContactFormValue + '" />');
}
var WriteContactFormStatement = WriteContactFormStatement1 ();
And at the end of my form, before the submit button, I have the following code: Code: <!-- START -- Javascript to print the statement for UReferrersName --> <script language="JavaScript" type="text/JavaScript"> //WriteContactFormStatement(); document.write (WriteContactFormStatement); </script> <!-- End -- Javascript to print the statement for UReferrersName --> When I execute the form, it doesn't work the way it should, plus, gives me a word "undefined" next to the "Submit" button ..... Please help !... - Xeirus. hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?
Hi All, I'm pretty sure that this will need a javascript solution but could an admin please move it if I have placed it in the wrong section! Basically I am populating a span id with a number value... Code: <div id="behaviour_management" style="overflow: auto;"> Behaviour Management <br><br> <span id="behaviour_management_rating">4</span> What I need to do is grab that value... 4 in this case and pass it to a hidden field or via another method so that it because part of the form for processing on the next page. I've tried a couple of things but I am very shakey on javscript and have a very limited knowledge of it. I've basically tried (and managed) to assign the value to a javscript var by using getElementByID... Code: <script type="text/javascript">
function getRatings() {
var s1 = document.getElementById('behaviour_management_rating').innerHTML;
}
</script>
Code: <input type="image" name="submit" src="images/search_list_btn.png" onclick="getRatings()"/> my next plan was to pass that var to a hidden input at which point I am becoming stuck. Can someone tell me if this is even possible and if so perhaps they would be kind enough to point me in the right direction. Any help would be greatly appreciated.. Many thanks Greens85 Say I have a form so long that i want to group sections by category and have them expandable, using css to display:none or display:block these groups. If a user selects an option or two in one of these divs, then fills in some fields, then hides the div... is it going to cause problems when they submit the form if the div is hidden? Thanks! edit: let me ask another question too--what if we add validation into the mix. What happens if a field in a hidden div does not pass validation? I have been staring at this code for too long and need some help. I want to pass a value received through the Url to another screen with new data by a form using the method="get". I have tried several different ways, my latest attempt was to use a hidden field hoping that would add to the url string but it isn't working. Thank you in advance Here is my code, its not pretty 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=utf-8" />
<title>Field Location</title>
<link rel="stylesheet"
href="css/INTERPRETING_TR_CONTROL_ELECTRICAL_READINGS.css"
type="text/css" media="screen" />
</head>
<body>
<div>
<form id="form1" name="form1" method="get" action="./nameplateInformation.html">
<h3>Where is this field located?</h3>
<select name="fieldValue" id="fieldValue"
title="Where is this field located">
<option value="field1">Inlet Field</option>
<option value="field2">Second Field</option>
<option value="field3">Third Field</option>
<option value="field4 ">Outlet Field</option>
</select>
<script type="text/javascript">
(function(){ // Import GET Vars :D
document.getVars = [];
var urlHalves = String(document.location).split('?');
if(urlHalves[1]){
var urlVars = urlHalves[1].split('&');
for(var i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
var urlVarPair = urlVars[i].split('=');
document.getVars[urlVarPair[0]] = urlVarPair[1];
}
}
}
})();
prceptType = document.getVars.preceptType;
document.write('<input type="hidden" name="preceptType" value='+preceptType+' />');
</script>
<input type="submit" value="Submit" />
<input type="button" name="backButton" value="Back"
onclick="parent.location = './welcome.html'" /> <input type="button"
name="homeButton" value="Home"
onclick="parent.location = '../index.html'" /></form>
</div>
</body>
</html>
I need when I click to type into a form field, I need an onclick event to show another form field. I would assume this would be a hiddin div or an on click event to post another form field. So in theory just because I actually clicked into one form field...another form field shows up underneath it...can anyone help... I have modified a free JS function from he http://www.tangorangers.com/examples...post/index.php To dynamically add text fields to the form. My work-in-progress version is he http://jimpix.co.uk/junk/test/6.html On the form, I have a hidden text field: Code: <input type="hidden" name="hiddenCount" value="" /> What I'd like to do is to increment the hiddenCount each time the "Add" fields button is clicked. This is the button: <input id="add_contact()" onclick="add_contact()" value="Add" type="button"> And this is the JS function: Code: var contact_counter = 0;
function add_contact()
{
if (contact_counter < 9)
{
contact_counter++;
var newFields = document.getElementById('add_contact').cloneNode(true);
newFields.id = 'contact';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + contact_counter;
}
var insertHere = document.getElementById('add_contact');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
}
I'm new to JS. I could just about edit the JS function to slightly modify it from the tangorangers version (I only changed it v. slightly). To somehow increment the value in the hidden field each time the button is pressed is beyond me though! Any advice much appreciated. Thanks I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form: Code: <input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent"> The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe? Hello, I am pretty new at javascript and I am trying to create a payment form that has both fields for payment by check and payment by credit card. I am wondering how I would go about having a radio button that asks the user how they would like to pay "credit card" or "check" and depending on which one they pick it shows the fields pertaining to that type of payment. the fields in the form look like this: Credit Card Fields: Code: <select name="card_type" size="1"> <option value="">- Card Type - </option> <option value="1">Visa</option> <option value="2">Mastercard</option> <option value="3">Discover</option> <option value="4">American Express</option> </select> Expiration Date<input type="text" name="exp_date" value="" id="exp_date"> CVC Code<input type="text" name="cvc" value="" id="cvc"> Card Number<input type="text" name="card_number" value="" id="card_number"> Amount On Credit Card<input type="text" name="card_amount" value="" id="card_amount"> Name On Card<input type="text" name="name_on_card" value="" id="name_on_card"> Billing Address<input type="text" name="billing_address" value="" id="billing_address"> Billing City<input type="text" name="billing_city" value="" id="billing_city"> <select name="billing_state" size="1"> <option value="">- Billing State -</option> </select> Check Fields: Code: Name (as printed on check)<input type="text" name="check_name" value="" id="check_name"> Address On Check<input type="text" name="check_address" value="" id="check_address"> Amount On Check<input type="text" name="check_amount" value="" id="check_amount"> Checking Account Number<input type="text" name="check_acc_number" value="" id="check_acc_number"> Routing Number<input type="text" name="routing_number" value="" id="routing_number"> Check Number<input type="text" name="check_number" value="" id="check_number"> I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show. I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful. Code: <select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>
<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
<!-- the following is the new select group ive set up
<span id="alumni">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
-->
Hi there! I have two iframes, within each iframe are four drop down list boxes. On my main page I have one text input box and one text area input box. Aim: 1. Retrieve all the values. 2. Place them into a hidden form. 3. Submit the hidden form data to a Google Docs Spreadsheet. I need to export: (in this order, all are within form tags) "List1,2,3,4" (drop down lists) from form "initiatorform" within frame "initiatorframe" which is "initiator.html" "List5,6,7,8" (drop down lists) from form "finisherform" within frame "finisherframe" which is "finisher.html" "ComboName" (Text input box) and "Description" (text area input) from form "indexform" within "Index.html" I've been trying different pieces of code for the last few days with no luck. I've been using an alert to test whether the value has been recorded but it won't even pop up at all. I've been trying to use this example. Is this the correct format for what I'm trying to do? Code: <script language="JavaScript" type="text/javascript">
<!--
function whatever(iframeid,iframename){
mmspobj=document.getElementById(iframeid);
if (mmspobj.tagName=='IFRAME'){
mmsiobj=window.frames[iframename].document.getElementId('myfield1ID').value;
alert(mmsiobj);
}
alert(mmsiobj);
}
//-->
</script>
I'm just trying to retrieve the value atm, once its working I can set the hidden form data. I'm sorry if this is something simple but I've been teaching myself over the last week while making Google Apps. Any help would be greatly appreciated. Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/includes/website.php";
include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';
}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
}
document.getElementById(showndiv).style.display = 'block';
}
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";
/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "";
}
}
function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "none";
}
}
</script>
<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>
<div id="fleet1" style="display:block">
</div>
<div id="fleet2" style="display:none" class="fleetdiv"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img
src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W599 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network
Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>
<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img
src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W601 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
<div id="fleet4" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">122</FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W602 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>
http://nctfleetlist.co.uk/div3.php I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
|
|||||||