How to set form value with external select value

Question

therefore, I am using a playback structure, and I am trying to create several submit buttons that invoke one form:

So, I have a list of lines, and I would like to create two buttons that will return to the server and complete the event, the first will send the second, cancel. What I would like to do is set the original value equal to what is selected in the foo select object. How can I do it? Do I need to create javascript even if it is fired from the form and then get var inside this function and then hide the submission? Im not 100% familiar with the playback platform and scala, so I'm not sure if I can somehow get it inside this code without using the new method.

@(myList: List[String], theForm: Form[Obj]) @import helper._ @main("myVar Controller") { <select id="foo"> </select> <table border="1"> <tr> @for(myVar <- myList) { <td>@myVar @form(routes.Application.method()) { <div id="hiddenForm" style="visibility:hidden"> <input type="text" name="commandID" id="commandID" value="10" /> //Send Code <input type="text" name="source" id="source" value=**"Put selected value of foo here" />** <input type="text" name="destination" id="destination" value="@myVar" /> </div> <input type="submit" value="Send" /> } @form(routes.Application.method()) { <div id="hiddenForm" style="visibility:hidden"> <input type="text" name="commandID" id="commandID" value="18" /> //Undo code <input type="text" name="source" id="source" value=**"Put selected value of foo here" />** <input type="text" name="destination" id="destination" value="@myVar" /> </div> <input type="submit" value="Undo" /> } </td> } </tr> </table> 

}

Answer 1

First of all, html is invalid. First you need to make sure that there are no elements that have the same identifier.

You must use javascript to change the value in your form. I am not familiar with scalar or playframework, but if they allow you to use jQuery, I recommend the following solution.

 $("#foo").bind("change", function(){$("#source").val($("#foo").val()));});​ 

Example: http://jsfiddle.net/RubenJonker/a8a8p/5

If they do not allow you to use jQuery, then you should put some javascript in the onchange select event.

 <select onchange="document.getElementById('source').value = this.value"> </select> 

Example: http://jsfiddle.net/RubenJonker/a8a8p/4

Answer 2

If anyone else has this problem, I used the following to solve my problem: Thanks Ruup, because your code was the reason why I solved the problem

HTML:

 <select id="foo" > <option></option> <option value="test">test</option> </select> <input type="text" value="" name="field" id="field" />​ 

and javascript:

 $(document).ready(function() { obj = document.getElementById("foo"); obj.onchange = function() { var elements = document.getElementsByName('field'); for (i=0;i<elements.length;i++) { elements[i].value = $('#foo').val(); } }; });