asked on

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

DrDamnit

Your link is dead.

chrisj1963

ASKER

Thanks for pointing that out. It's good now.

kadaba

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">

kadaba

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

chrisj1963

ASKER

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

kadaba

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();">

ASKER CERTIFIED SOLUTION

kadaba

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chrisj1963

ASKER

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