Question

I have a scenario where a visitor can select a value from a drop-down box, and then choose select one of two submit buttons [that trigger two different form actions and are both in separate elements].

The drop-down box is relevant for both submit buttons, however, is only under one of the element.

I’ve tried a write a javascript function that pulls the drop-down value from one form element to the other, but it doesn’t seem to work. PLease see my code below, any ideas?

<script type="text/javascript">
function grabselection(){
var select_genre = document.getElementById("genre");
var genre = select_genre.value;
var genre_cloaked = document.getElementById("genre2");
genre_cloaked.value = genre;
}
</script>


<form class="youtubeupload" action="uploadfinalised.php" method="post"      enctype="multipart/form-data">
<input name="token" type="hidden" value="Alhl"/>
<select  id="genre2" class="genre" name="genre"><option value="">What style is your video?</option></select>
<input value="" onclick="grabselection();" type="submit" id="uploadbutton" /></div>
    </form>     

<form id="provideurl" class="provideurl" method="post" action="provideurl.php">
<select id="genre" class="genre" name="genre">
    <option value="">What style is your video?</option>             
    <option id="genreid_1" value="1">first genre</option>
    <option id="genreid_2" value="2">second genre</option>
    <option id="genreid_3" value="3">third genre</option>
    <option id="genreid_4" value="4">fourth genre</option>  
</select>

I am sure there is a simpler solution to this – linking one form element to two different forms, but I’m not sure how to do it – any help greatly appreciated

Answer 1

You’re setting the value on the genre2 select box but it doesn’t contain any options with that value. To accomplish what you’re trying to achieve, the options would have to be defined in both select fields.

Why don’t you just use a hidden input and update the value on that?

<input type="hidden" name="genre2" />

Arguably the best thing to do would be to determine the form action based on user input so that you only have 1 form… there’s a brief discussion here: http://www.javascript-coder.com/html-form/html-form-action.phtml