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

Submitting correct form variable

Hi,
I have some code that allows the user to select an image (similar to the way a radio button would be selected) and the result of the selection appears in a text box.  The user can then submit the form and pass the variable.  

See: http://www.prontopage.net/a_parse/testselect_why.htm 

The form is submitting the numeric variable result instead of the text result which is what I want.

I cannot change the input id "element_1" because that Id name is required on submit.  

Is there a simple way to pass the "text" result as "element_1"

Thanks
<!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>
<body class="no_guidelines firefox" onload="top.scrollTo(0,0)" id="main_body">
<!--code for select image button-->
<script type="text/javascript">  
  function   element_1func(text) {
  document.getElementById("element_1" + document.getElementById("element_1").value).style.border = "2px solid white";
  document.getElementById("element_1" + text).style.border = "3px dotted #ffcc00";
  document.getElementById("element_1").value = text;
}
function displayValue(element)
{
        var h2text = element.parentNode.parentNode.getElementsByTagName('h2')[0].innerHTML;
        document.getElementById('selectproduct_display_dummy').value = h2text.substr(0, h2text.length);
}
</script>
<!--end code for select image button-->
</head>
		<form id="form_10" class="appnitro" method="post" action="http://prontopage.net/webform/view.php?id=10#main_body">
		<label class="description" for="element_1">This is your word selection <span id="required_1" class="required">*</span></label>
		  <input id="element_1" name="element_1" class="element text large" type="text" /> <!--this result is normall hidden and only the "dummy" result is displayed-->
          <input class="result" type="text" class="txtbox" id="selectproduct_display_dummy" value="No Keyword Selected" readonly />
	      <input name="form_id" value="10" type="hidden">
		  <input name="submit" value="1" type="hidden"><span id="submitButtonSpace"><input id="saveForm" class="button_text" name="submit" value="Submit" type="submit">
		</form>	

<table id="test1" class="sortable-onload-3-reverse rowstyle-alt no-arrow" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="-moz-user-select: none;" class="fd-column-1 sortable-text  forwardSort reverseSort"><a title="Sort on Keyword" href="#">Keyword</a></th>
<th style="-moz-user-select: none;" class="sortable-numeric fd-column-2"><a title="Sort on Monthly Volumek" href="#">Montly Volume</a></th>
<th style="-moz-user-select: none;" class=""><a title="select" href="#"></a></th>
</tr>
</thead>
<pre>
<tbody><tr><td><div><h2>clothes</h2></td><td>201,000</td><td><img src="green.jpg" id="element_11"onClick="element_1func('1');displayValue(this);" /></td></tr><tr><td><div><h2>kids clothes</h2></td><td>49,500</td><td><img src="green.jpg" id="element_12"onClick="element_1func('2');displayValue(this);" /></td></tr><tr><td><div><h2>old dominion university</h2></td><td>49,500</td><td><img src="green.jpg" id="element_13"onClick="element_1func('3');displayValue(this);" /></td></tr><tr><td><div><h2>baby maternity clothing</h2></td><td>40,500</td><td><img src="green.jpg" id="element_14"onClick="element_1func('4');displayValue(this);" /></td></tr><tr><td><div><h2>www oldnavy com</h2></td><td>40,500</td><td><img src="green.jpg" id="element_15"onClick="element_1func('5');displayValue(this);" /></td></tr><tr><td><div><h2>dominion</h2></td><td>33,100</td><td><img src="green.jpg" id="element_16"onClick="element_1func('6');displayValue(this);" /></td></tr><tr><td><div><h2>odu</h2></td><td>27,100</td><td><img src="green.jpg" id="element_17"onClick="element_1func('7');displayValue(this);" /></td></tr><tr><td><div><h2>old dominion</h2></td><td>27,100</td><td><img src="green.jpg" id="element_18"onClick="element_1func('8');displayValue(this);" /></td></tr><tr><td><div><h2>mens clothes</h2></td><td>12,100</td><td><img src="green.jpg" id="element_19"onClick="element_1func('9');displayValue(this);" /></td></tr><tr><td><div><h2>norfolk colleges</h2></td><td>9,900</td><td><img src="green.jpg" id="element_110"onClick="element_1func('10');displayValue(this);" /></td></tr></tbody></table>

<!--END CJ FORM STUFF-->
    
    
	</body></html>

Open in new window

0
chrisj1963
Asked:
chrisj1963
2 Solutions
 
DrDamnitCommented:
Your link is dead.
0
 
chrisj1963Author Commented:
Thanks for pointing that out. It's good now.
0
 
kadabaCommented:
avoid having name as submit

<input name="submit" value="1" type="hidden">

<span id="submitButtonSpace">
<input id="saveForm" class="button_text" name="submit" value="Submit" type="submit">

have it something like

<input name="mysubmit" value="1" type="hidden">

<span id="submitButtonSpace">
<input id="saveForm" class="button_text" name="submitform" value="Submit" type="submit">
0
Industry Leaders: 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!

 
kadabaCommented:
document.getElementById("element_1").value = text; -- This line will populate the number,
not sure why.. its being used for display purpose like selection 1/2/3 etc

so if you need that when you hit the submit you can change the value of the element_1

you can have this function

function populateText()
{
 document.getElementById("element_1").value = document.getElementById('selectproduct_display_dummy').value;
 
 return true;
}

and call it this way
<form id="form_10" class="appnitro" method="post" action="http://prontopage.net/webform/view.php?id=10#main_body" onsubmit= "return populateText();">

and you could also consider "selectproduct_display_dummy" value itself.

hope this helps
0
 
chrisj1963Author Commented:
Hi Kadaba,
I tried what you suggested but the numeric value is still being submitted...
I attached the changed code.
Any other suggestions?
<!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>
<body class="no_guidelines firefox" onload="top.scrollTo(0,0)" id="main_body">
<!--code for select image button-->
<script type="text/javascript">  
  function   element_1func(text) {
  document.getElementById("element_1" + document.getElementById("element_1").value).style.border = "2px solid white";
  document.getElementById("element_1" + text).style.border = "3px dotted #ffcc00";
  document.getElementById("element_1").value = text;
}
function displayValue(element)
{
        var h2text = element.parentNode.parentNode.getElementsByTagName('h2')[0].innerHTML;
        document.getElementById('selectproduct_display_dummy').value = h2text.substr(0, h2text.length);
}

function populateText()
{
document.getElementById("element_1").value = document.getElementById('selectproduct_display_dummy').value;

 return true;
}

</script>
<!--end code for select image button-->
</head>
		<form id="form_10" class="appnitro" method="post" action="http://prontopage.net/webform/view.php?id=10#main_body">
		<label class="description" for="element_1">This is your word selection <span id="required_1" class="required">*</span></label>
		  <input id="element_1" name="element_1" class="element text large" type="text" /> <!--this result is normall hidden and only the "dummy" result is displayed-->
          <input class="result" type="text" class="txtbox" id="selectproduct_display_dummy" value="No Keyword Selected" readonly />
	      <input name="form_id" value="10" type="hidden" onsubmit= "return populateText();">
		  <input name="submit" value="1" type="hidden"><span id="submitButtonSpace"><input id="saveForm" class="button_text" name="submit" value="Submit" type="submit">
		</form>	

<table id="test1" class="sortable-onload-3-reverse rowstyle-alt no-arrow" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="-moz-user-select: none;" class="fd-column-1 sortable-text  forwardSort reverseSort"><a title="Sort on Keyword" href="#">Keyword</a></th>
<th style="-moz-user-select: none;" class="sortable-numeric fd-column-2"><a title="Sort on Monthly Volumek" href="#">Montly Volume</a></th>
<th style="-moz-user-select: none;" class=""><a title="select" href="#"></a></th>
</tr>
</thead>
<pre>
<tbody><tr><td><div><h2>clothes</h2></td><td>201,000</td><td><img src="green.jpg" id="element_11"onClick="element_1func('1');displayValue(this);" /></td></tr><tr><td><div><h2>kids clothes</h2></td><td>49,500</td><td><img src="green.jpg" id="element_12"onClick="element_1func('2');displayValue(this);" /></td></tr><tr><td><div><h2>old dominion university</h2></td><td>49,500</td><td><img src="green.jpg" id="element_13"onClick="element_1func('3');displayValue(this);" /></td></tr><tr><td><div><h2>baby maternity clothing</h2></td><td>40,500</td><td><img src="green.jpg" id="element_14"onClick="element_1func('4');displayValue(this);" /></td></tr><tr><td><div><h2>www oldnavy com</h2></td><td>40,500</td><td><img src="green.jpg" id="element_15"onClick="element_1func('5');displayValue(this);" /></td></tr><tr><td><div><h2>dominion</h2></td><td>33,100</td><td><img src="green.jpg" id="element_16"onClick="element_1func('6');displayValue(this);" /></td></tr><tr><td><div><h2>odu</h2></td><td>27,100</td><td><img src="green.jpg" id="element_17"onClick="element_1func('7');displayValue(this);" /></td></tr><tr><td><div><h2>old dominion</h2></td><td>27,100</td><td><img src="green.jpg" id="element_18"onClick="element_1func('8');displayValue(this);" /></td></tr><tr><td><div><h2>mens clothes</h2></td><td>12,100</td><td><img src="green.jpg" id="element_19"onClick="element_1func('9');displayValue(this);" /></td></tr><tr><td><div><h2>norfolk colleges</h2></td><td>9,900</td><td><img src="green.jpg" id="element_110"onClick="element_1func('10');displayValue(this);" /></td></tr></tbody></table>

<!--END CJ FORM STUFF-->
    
    
	</body></html>

Open in new window

0
 
kadabaCommented:
you forgot to include this

<form id="form_10" class="appnitro" method="post" action="http://prontopage.net/webform/view.php?id=10#main_body" onsubmit= "return populateText();">

0
 
kadabaCommented:
>> <input name="form_id" value="10" type="hidden" onsubmit= "return populateText();">
I did not mention this... perhaps a typo from your side
0
 
Ray PaseurCommented:
When you fire the submit button the form will submit all the data fields to the action script. These will arrive in the PHP var $_POST

You can use var_dump($_POST) to print out what is getting submitted.  You probably want to add that to the top of the action script so you can see the data that you're working with.

Stripped of all the fluff, here is your form.  As you can see, you have two fields named "submit" and that is a no-no because that name is used as a key into the $_POST array.  Start by deciding which one of those you want, then we can move forward.

best regards, ~Ray
<form method="post" action="http://prontopage.net/webform/view.php?id=10#main_body">
                
<input name="element_1" type="text"                                          />
<input                  type="text"    value="No Keyword Selected" readonly  />
<input name="form_id"   type="hidden"  value="10"                            />
<input name="submit"    type="hidden"  value="1"                             />
<input name="submit"    type="submit"  value="Submit"                        />

</form>

Open in new window

0
 
chrisj1963Author Commented:
Kadaba. Your solutoion worked. Thanks very much!
Ray, thanks for pointing out by "submit" issues.
0

Featured Post

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!

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