asked on

Using innerHTML and retrieving values for PHP

Hi,

I have created a form that uses a special Javascript -> this script creates HTML (innerHTML) on demand when the user wants to add something to a (option)list. If not used, the HTML-code will not be created. (Only if the user pushes the ADD-button after he had filled in a textbox, the value in the Textbox is moved to a listbox).

This code works fine, but I have the problem to retrieve the values in this optionlist because it is only generated dynamically.
I want to store the values in a table in MySQL.

Is there a way to get the values in this optionlist? Do you have any suggestions/solution to solve this problem?

Hereby the 3 functions in my Javascript :
function addOptions()
{
var url= document.CreateQuestion.URL.value;
var Item = document.CreateQuestion.nameLink.value;
var linkItem = url + "=" + Item;

if (isblank(url)|| isblank(Item))
      alert("You have to insert a URL and a name first!");
else
      {
       if (teller > 0)
       {
       teller=teller+1;
       var item = new Option(linkItem, "linkItem", false, false);
            var links = document.CreateQuestion.link
            links.options[links.options.length] = item;
       }

       if (teller == 0)
       {
       newCode();
       teller=teller+1;
       var item = new Option(linkItem, "linkItem", false, false);
       var links = document.CreateQuestion.link
       links.options[links.options.length] = item;
       }
       document.CreateQuestion.nameLink.value="";
       document.CreateQuestion.URL.value="";
      }
}

function newCode()
{
      var code ="<br>"
            code +="<table>"
            code +="<tr>"
            code +="<th align=right>"
            code +="<td>"
            code +="<select name='link' size=5>"
            code +="</select>"
            code +="<input type='button' name='removeLink' value='Remove' onclick='removeOptions()'>"

            code +="</table>";

      document.getElementById("list").innerHTML=code
}

function removeOptions()
{
      var i = document.CreateQuestion.link.selectedIndex;
      if (i>=0){document.CreateQuestion.link.options[i] = null;}
}

VGR

isn't this more or less a javascript/jscript question ? :D

Giovanni G

you mean that the dynamic options list goes here?

code +="<select name='link' size=5>"
code +="</select>"

it took me 5 min to figure out what you meant.

now, please be more specific. this is a sample code:

...
code +="<select name='link' size=5>"
<?php
$res = mysql_query("SELECT * FROM yourtable");

while ($rec = mysql_fetch_array($res)) {
print "code += \"<option value='" . $rec['opt_value'] . "'>" . $rec['opt_label'] . "\n";
}

?>
code +="</select>"
....

xedstr

ASKER

I'm sorry that the question was not clear from the beginning. I see in the sample code you send to me that my question is still not clear. I try to give you more details.

The Javascript is in another file.
In my HTML-code I use the following line : <input type="button" name="addLink" value="Add" onclick="addOptions()">
The Javascript function has the following funcitonality : it verifies that the user has put some content in 2 textfields in the form. If yes, then he puts the value from the 2 fields together and stores them in an optionlist.
The problem is that what has been put in the optionlist must also be send to a database when the form is submitted (and not the other way).
Because I use innerHTML, the optionlist is not present from the beginning! How do I reach this element?
Because the Javascript is in another file, I can't put here some PHP code I think.

I think a solution must be found in using DOM -> searching with a for-lus all the elements in the page. When the optionlist is found -> putting a variable (array) equal to the content of it.
Finally, by sending the form -> also sending the contents of this array.

But how ???

Big_Red_Dog

It isn't too hard, but I have to go to a meeting today (yes on Saturday) so I can't spend the time right now, but you are on the right track. Use the elements of the form object you are passed to drill down to find your optionlist.

Giovanni G

No, I *personally* would rather use the following solution if i understood his problem.

When you add the option to the select named "link", also add right after </select> (or before <select>) a series of input hidden elements this way:

<input type="hidden" name="options[]" value="xxx">
<input type="hidden" name="options[]" value="yyy">
<input type="hidden" name="options[]" value="zzz">

and so on. After submit you will have $_GET['options'] containing the array of the options there. This also doesn't require inserting PHP code in the javascript file.
(remember to check with is_array($_GET['options']) to prevent unwanted things to happen..)

ASKER CERTIFIED SOLUTION

harwantgrewal

membership

This solution is only available to members.

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

Start Free Trial

harwantgrewal

You can remove alert in the getvals() function this is for just alert. Here I made 2 changes in your code one the <select name="link[]"> this will send link as an array to the php file and hence php can get all the values .. Next as you want to send all the option fields so it must be multiple and for send all the option list you have to select all thats what getvals() function is doing its selecting all the option value in the list and then submitting the form. and remember. the addfunction and all the rest of the function of your javascript replace document.CreateQuestion.link

with

document.CreateQuestion.elements['link[]']

Harry

xedstr

ASKER

Hi,

Give me a little time to check it out... I give a response as soon as possible.

EDS

harwantgrewal

Ok no probs I checked on my PC its working fine rest you can also test it..

Harry