• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 282
  • Last Modified:

invisible submit button

Hi everyone:

I have a checkbox that has an onclick event associatedwith it however, I also need to include an invisible submit event with this checkbox, so that it will pass a couple of variables on the querystring to another page, the same one that it is going to go to with the onclick event.

Any ideas?-Midani2
0
midani2
Asked:
midani2
1 Solution
 
HDSportster08Commented:
if you will look over to the properties of the button, you should see where it says visible or not.  If you are using a web editor try right clicking on it and viewing the properties.
0
 
midani2Author Commented:
ok how do
i link the event of the onclick event for the checkbox to the invisible submit button?

i am trying to only pass two variables on the query string.
0
 
midani2Author Commented:
also in dreamweaver ther eis no visible properties
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hieloCommented:
try something like:
<script type="text/javascript">
function handleClick(o){
	var form = o.form;
	if( o.checked )
	{
		form.var1.value="Hi";
		form.var2.value="Bye";
		form.Submit.style.display='';
	}
}
</script>
<form method="get" >
	<input type="checkbox" name="chk" onclick="handleClick(this)"/>
	<input type="hidden" name="var1" value=""/>
	<input type="hidden" name="var2" value=""/>
	<input type="submit" style="display:none" value="Send" name="Submit"/>
</form>

Open in new window

0
 
midani2Author Commented:
there's an error in the javascript.
0
 
hieloCommented:
>>there's an error in the javascript.
Not on what I posted. You probably copied something incorrectly. If you continue to have problems, post your code.
0
 
midani2Author Commented:
I already have one form on the page. This is a second form element going on inside the form.

Can this be done?

0
 
hieloCommented:
you CANNOT nest form tags. This is NOT valid:
<form>
 ...<form...</form>
</form>
 
You may have multimple forms, as long as they are NOT nested. This is OK:
<form>...</form>
<form>...</form>

Open in new window

0
 
midani2Author Commented:
ok I am attaching my page it is called text.txt it can pass to itself, like a copy of test, calling it test2.html

the second form works. the first one does not but of course it is more complicated.
test.txt
0
 
hieloCommented:
can you clarify what the problem is. I see the button appears when the checkbox is checked on the first form, but I am not sure what is the problem with the second form. Can you clarify?
0
 
midani2Author Commented:
the second form works fine. it is the first form. it does not pass txtFirstName and txtLastName when the checkbox is selected. What happens is it refreshes the page and then the submit button appears, then the user types txtFirstName and txtLastName and it goes to the second page, (which is identical to this one except it includes a javascript attached in the file below), and it does not work.

if I strip everything out i can get it to work but if I leave everything in there, it does not work. is what I am trying to do impossible without .asp or cookies or php? -Midani2
p.s. i am jus trying to pass two values of two textfields along the querystring using the checkbox and the invisible submit button.
output.txt
0
 
hieloCommented:
You just attached a third form which is completely different from the first two. I don't know how that clarifies things. You need to realize that only YOU are familiar with your project, but you need to put your self in our shoes and ask yourself if what you supplied makes sense to a complete stranger.

>>it is the first form. it does not pass txtFirstName and txtLastName when the checkbox is selected.
On the first attachment, the fields you just mentioned exist only on the first form, not on the second form. It sounds like you are filling ALL the form fields and submitting the second form BUT expect to also see the values for the first form. The browser will only submit one of the forms, not all the form on the browser. Since the first and last name fields exist on a separate form, what you can do is:
a. Use a single form instead of two separate forms
OR
b. Include hidden fields in your second form and when the fields in the first form are filled, they will auto update the corresponding fields in the second form. So when you submit the second form, it will include a copy/clone of the fields in the first form.

I implemented option b on the attached code. NOTE: I left the fields as type="text" so you can see how they get updated after the value in the corresponding fields on the first form are changed:

<input type="text" name="txtFirstName" id="hiddentxtFirstName" value=""/>
<input type="text" name="txtLastName" id="hiddentxtLastName" value=""/>
 
However, you will need to change type="text" to type="hidden" on your second form.
 
 
 
<!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="no-cache; charset=utf-8" />
<!-- Web Trends <meta> tags here -->
<title>ADESA.COM :: Dealer Registration Step 1</title>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
 
<!-- <link href="../css/print.css" rel="stylesheet" type="text/css" media="print" /> -->
<!--[if IE]><link href="../css/IE-only.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
 
 
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
 
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
<style type="text/css">
INPUT.hintTextbox { color: #999999; }
INPUT.hintTextboxActive { color: #000; }
</style>
 
 
 
</head>
 
 
 
<body onload="Nifty('div.box','transparent')">
<div id="wrapper">
	<!--Begin Content-->
<div id="content">
 
  
    <div class="mod_brown">
	    <h1>DEALER REGISTRATION</h1>
	  <div style="float:left"><img src="../images/ui/step1.jpg"  width="201"alt="Dealer Registration Step 1" /></div>
	  <form method="get" action="test2.html">
		<script type="text/javascript">
function handleClick(o){
var form = o.form;
if( o.checked )
{
form.txtFirstName.value="";
form.txtLastName.value="";
form.Submit.style.display='';
}
}
</script>
	  <table width="0" border="0" cellpadding="0">
			<tr>
				<td width="212"><div align="right"><span class="red">* </span>
 
							<label for="label">First Name:</label>
					&nbsp;</div></td>
				<td width="254"><span id="sprytextfield1">
				<input name="txtFirstName" type="text" id="txtFirstName" size="28" tabindex="1"  onchange="document.getElementById('hidden' + this.id).value=this.value" />
				<br />
				<span class="textfieldRequiredMsg">A value is required.</span> <br />
				</span></td>
 
			</tr>
			<tr>
				<td><div align="right"><span class="red">* </span>
							<label for="label">Last Name:</label>
					&nbsp;</div></td>
				<td><span id="sprytextfield2">
				<input name="txtLastName" type="text" id="txtLastName" size="28" tabindex="2" onchange="document.getElementById('hidden' + this.id).value=this.value" />
				<br />
 
				<span class="textfieldRequiredMsg">A value is required.</span> <br />
				</span></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td><input type="checkbox" name="checkAAID" id="checkAAID" tabindex="3" onclick="handleClick(this)" />
					I don't have an Auction ACCESS Rep  ID. <input type="submit" style="display:none" value="Send" name="Submit" /></td>
 
			</tr>
		</table></form>
	  <br />
          <form name="form" action="public_dealerregistration-userinfo-waa.html" style="margin:0">
<input type="text" name="txtFirstName" id="hiddentxtFirstName" value=""/>
<input type="text" name="txtLastName" id="hiddentxtLastName" value=""/>
					<table width="61%" border="0" cellpadding="0" class="c_480">
			<tr>
			  <td width="46%"><div align="right"><span class="red">*</span><label for="label"> Auction ACCESS Rep ID:</label>&nbsp;</div><br /></td>
 
			  <td width="54%"><span id="sprytextfield3">
			  	<input name="txtAAID" type="text" class="hintTextbox" id="txtAAID" tabindex="4" value="1 _ _ _ _ _ _ _ _" size="28" maxlength="9" /></span>
			  	<br />
            <span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldRequiredMsg">A value is required.</span><br /></span></td>
			</tr>
		    <tr>
			  <td valign="top"><div align="right"><span class="red">*</span>
 
			  <label for="label"> Date of Birth:</label>&nbsp;</div><br /></td>
			  <td valign="top">
							<select name="selectMonth" id="selectMonth" tabindex="5">
								<option value="">Month</option>
								<option value="0">Jan </option>
								<option value="1">Feb </option>
 
								<option value="2">Mar </option>
								<option value="3">Apr </option>
								<option value="4">May </option>
								<option value="5">Jun </option>
								<option value="6">Jul </option>
								<option value="7">Aug </option>
 
								<option value="8">Sep </option>
								<option value="9">Oct </option>
								<option value="10">Nov </option>
								<option value="11">Dec </option>
							</select>
							<span id="sprytextfield4">
							<input name="txtday" type="text" id="txtday" size="4" tabindex="6" maxlength="2" class="hintTextbox" value="Day" />
 
							</span><span id="sprytextfield6">
							<input name="txtyear" type="text" id="txtyear" size="4" tabindex="7" maxlength="4" class="hintTextbox" value="Year" />
							<br />
							<span class="textfieldRequiredMsg">A value is required.</span><br />
						</span></td>
			</tr>
		    <tr>
			  <td valign="baseline"><div align="right"><span class="red">* </span>
 
				<label for="txtGovernmentID">Last 4 digits of Government ID:</label></div></td>
			  <td><span id="sprytextfield7">
				<div class="tooltip"><a href="#">
					<input name="txtGovernmentID" type="text" id="txtGovernmentID" tabindex="8" size="28" maxlength="4" />
					<span>the last 4 digits of your Government ID (SSN for US, SIN for Canada, CURP in Mexico) or of any Photo ID in Auction ACCESS</span></a></div>
				<span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldRequiredMsg">A value is required.</span></span><br /></td>
			</tr>
 
	      </table>
		  <div class="c_240"><span class="red">*</span> required fields</div>
          <br clear="all" />
          <br clear="all" />
          <br clear="all" />
          <br clear="all" />
      <div class="c_840" align="right">
 
            <input type="submit" name="submit" value="Continue"  class="btn-green" tabindex="9"/>
			<input type="reset" name="reset" value="Cancel"  class="btn-green" onclick="window.location='index.html'" tabindex="10"/>
      </div>
      <br clear="all" />
      <br />
    </form>
          <br />
	  			<div align="left"><a href="public_dealerregistration-error1.html">Error 1: Enter Required Information</a><br />
 
	  				<a href="public_dealerregistration-error2.html">Error 2: Auction Access Rep ID exists</a><br />
	  					<a href="public_dealerregistration-error3.html">Error 3: Unable to validate Auction Access Rep ID.</a>
			</div>
  
 	</div>
  <!-- Begin Footer -->
	<div id="footer"></div>
</div>
<script type="text/javascript">
<!--
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield3", "custom", {useCharacterMasking:true, pattern:"100000000", validateOn:["blur"]});
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "custom", {pattern:"0000", useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false, hint:"Day"});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {hint:"Year", validateOn:["blur"]});
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:["blur"]});
 
//-->
</script>
 
<script type="text/javascript" language="javascript">
/////////////////////////////////////////////////////////////////////////////////////////////////////
//this script allows the user to see a hint displayed on a textbox. /////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
var HintClass = "hintTextbox";
var HintActiveClass = "hintTextboxActive";
 
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); };
 
function initHintTextboxes() {
  var inputs = document.getElementsByTagName('input');
  for (i=0; i<inputs.length; i++) {
    var input = inputs[i];
    if (input.type!="text")
      continue;
      
    if (input.className.indexOf(HintClass)!=-1) {
      input.hintText = input.value;
      input.className = HintClass;
      input.onfocus = onHintTextboxFocus;
      input.onblur = onHintTextboxBlur;
    }
  }
}
 
function onHintTextboxFocus() {
  var input = this;
  if (input.value.trim()==input.hintText) {
    input.value = "";
    input.className = HintActiveClass;
  }
}
 
function onHintTextboxBlur() {
  var input = this;
  if (input.value.trim().length==0) {
    input.value = input.hintText;
    input.className = HintClass;
  }
}
 
window.onload = initHintTextboxes;
 
</script>
 
 
 
</body>
</html>

Open in new window

0
 
EliotBallCommented:
Hidden submit button:
<input type="submit" style="visibility: hidden;" />

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now