so i am using the play framework and I'm try to create multiple submit buttons that call the one form:
So what I have is a list of strings, and i would like to create two buttons that will go back to the server and complete an event, the first is send the second is cancel. What i would like to also do is set the source value equal to what is selected in the foo select object. How would I go about doing this? Do i need to create a javascript even that is fired from the form and then get the var inside that function and then fire off the submit? Im not 100% familiar with play framework and scala, so im not sure if i can get it somehow inside this code without using a 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>
}
First of all, the html isn't valid.
You should first make sure that there aren't elements that have the same id.
You have to use javascript to change a value in your form.
I'm 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 don't allow you to use jQuery, then you should put some javascript in the onchange event of the select.
<select onchange="document.getElementById('source').value = this.value">
</select>
example:
http://jsfiddle.net/RubenJonker/a8a8p/4
Incase anyone else has this problem I used the following to solve my problem: Thanks Ruup as 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();
}
}; });
Related
I am using the validate plugin in order to send some ajax. I am having the problem that I cannot serialise select option and checkbox.
My end result is to have a string looking like dashName=aaa&dashSurname=bbb&dashArea=Blue...
With the code below I can just get the input text values; How can I validate and get the values from other elements?
here the fiddle
$('#updateMemberForm').validate();
$(document).on('click', '#saveMemberBtn', function() {
if ($('#updateMemberForm').valid()) {
var serialize = $("#updateMemberForm").serialize();
$("#test").text(serialize);
console.log(serialize);
}
return false;
});
HTML:
<form method="post" id="updateMemberForm">
<input class="" type="text" name="dashName" placeholder="Name" />
<input class="" type="text" name="dashSurname" placeholder="Surname" />
<br>
<select onchange="" name="dashArea">
<option value="" selected disabled>AREA</option>
<option value="Red">RED</option>
<option value="Blue">BLUE</option>
<option value="Green">GREEN</option>
</select>
<br>
<input class="" type="text" name="dashAddress" placeholder="Address" />
<input type="checkbox" id="checkbox1" name="dash_enable">
<br>
<input type="submit" class="" id="saveMemberBtn" value="SAVE" />
</form>
Since your SAVE button is a type="submit", you would not need a click handler to capture it and test validity. The submithandler built into the plugin is already doing this for you.
$('#updateMemberForm').validate({
submitHandler: function(form) { // only fires when valid
var serialize = $("#updateMemberForm").serialize();
$("#test").text(serialize);
console.log(serialize);
// AJAX goes here
return false;
}
});
DEMO: https://jsfiddle.net/rsfonzL7/
As already mentioned in the comments, when a checkbox is not checked, nothing is sent in the query string, and this is handled on the server side. This has nothing to do with jQuery Validate or .serialize()... this is just how form data is constructed and sent, no matter the method.
So this has been driving me nuts, im looking for a solution that will fill a input field from what ever selection is made from a drop down.
My current working solution (that does not include a drop down) is as follows :
<form method="link" action="dualstream/index.html">
<input value = 'apolloz' name="stream1" placeholder="" required="required"
autofocus="autofocus" />
<input type="submit" class="button" value="Click to watch the stream" />
</form>
So that auto fills the text field with "apolloz" then when you press submit it takes you to the relevant page which uses the word apolloz.
Im looking for a solution that you can select the streamer from a drop down list, select it and that option fills the text field, and you can then submit.
Im sure this is javascript based as i have seen similar things which use numerical values.
Sorry if this is a bit vague, but any and all help is much appreciated.
try this
<form method="link" action="dualstream/index.html">
<input value = 'apolloz' id="txt" name="stream1" placeholder="" required="required"
autofocus="autofocus" />
<select id="mySelect" onchange="selectionchange();">
<option value="abc" >abc</option>
<option value="xyz" >xyz</option>
</select>
<input type="submit" class="button" value="Click to watch the stream" />
</form>
and add following javascript function
function selectionchange()
{
var e = document.getElementById("mySelect");
var str = e.options[e.selectedIndex].value;
document.getElementById('txt').value = str;
}
This is simple, if you use jquery you can do this
$(function(){
$("#your_select").change(function(){
$("#your_input").val($('#your_select option:selected').val())
});
});
u can also do this using just javascript
on the onchange function of your select u can call a function that will put the selected value in your input
like
<select id="element1" onchange="pickvalue()"/>
<option>asad </option>
<option>asad2 </option>
</select>
and your pickvalue function can look something like this
function pickvalue()
{
document.getElementById('yourinputid').value = document.getElementById('element1').value
}
Suppose you have a selectbox #selectid then,
$("#selectid").live("change", function() { <br>
$("#stream1").val($(this).find("option:selected").attr("value")); <br>
});
I have a form with two radio buttons and a submit button which leads to a specific form based upon the user's selection.
I wanted to use jQuery to change between the two buttons but have gotten myself a bit lost.
Here is my javascript from another file in the proj:
function goTo()
{
var yesButton = $('#yesRad');
var noButton = $('#noRad');
if (yesButton[0].checked)
{
submitForm('yesForm') && noButton.Checked==false;
}
else (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}
Inside the jsp I have the following code:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name="radio" id="noRad" value="noForm" />No<br>
</form:form>
Submit
<script>
$("#yesRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked'))
$("#yesRad").prop("checked", false);
else if($input.is(':checked'))
$("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);
});
</script>
I have gotten some functionality out of my jQuery but it's definitely far from correct..
I hope I was clear and thorough in my question. Thanks in advance!!
To begin with, don't use prop, use attr. prop is slower.
You've defined variables so let's not look them up again. In your if/else statement just use the variables.
I'm not entirely sure what you're trying to do with the &&. I suspect you're trying to set the value of the two inputs. If so, they should be separate statements. If inputb is checked there is no reason to set it to checked, so we can remove that piece.
You probably want this change to fire on both inputs.
$("#yesRad, #noRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked')){
$input.attr("checked", false);
} else if($input.is(':checked')){
$inputb.attr("checked",false);
}
});
Solved: Using javascript and taking the radio buttons out of the separate form elements.
First let's take a look at the JSP form elements involved:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>
What I did here was simply take the radio buttons out of the separate forms and grouped them together...pretty obvious; now let's look at the javascript file.
function goHere()
{
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked)
{
submitForm('yesForm');
}
else if (noButton[0].checked)
{
submitForm('noForm');
}
else
{
document.write(str.fontcolor.font("red"));
}
}
As you can see the function 'goHere();' is going to tell the submit button in the following code where we want to go based on the user's selection on our radio buttons.
Here's the call from our javascript function in a submit button on the form...
<div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" name="submitBtn" onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>
That's it!! Simply put; sometimes, while it's invaluable to learn something new, if it's not broke--etc. Hope this helps someone later on down the line!
Im trying to create a button that generates already formated divs everytime it is pushed.
The divs are composed by forms and their fields should already be filled with data that is stored in variables in javascript.
eg.
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
<script>
$('#button_push').click(function()
{
//creating myDiv_#
}
</script>
I was searching arround web, but never found good results :s
Im asking you help with this, maybe a guide line or a start point.
The point is, everytime user push the button, a new div is created with parameters above.
Cheers
With markup as complex as that it's probably easier if have a hidden version of it which you can clone, amend attributes of then append to the page as required.
Something like this:
<div id="container"></div>
<div style="display: none;">
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
</div>
$('#button_push').click(function() {
var $div = $("#myDiv_\\#").clone(true); // keep events'
$div.attr('id', '').addClass('clone'); // example of amending attributes
$("#container").append($div); // append
});
Example fiddle
You can easily replace the someJavascriptVariable strings with the specific variable relevant to that clone instance too.
I am having trouble with some Ajax functionality.
I have a single dropdown that needs to update a record when the option changes. Here is a snippet of the Javascript:
function changeResponsibleParty(selectObj, targetDiv){
var idx = selectObj.selectedIndex;
var which = selectObj.options[idx].value;
target = document.getElementById(targetDiv);
target.value = which;
document.forms["changeResponsibleParty"].submit();
}
And the HTML:
<form name="changeResponsibleParty" action="javascript:changeResponsiblePartyAjax('project_todos');" method="post" style="display:inline;">
<input type="hidden" name="todo_id" id="todo_id_15" value="15" />
<input type="hidden" name="project_id" id="project_id_15" value="2" />
<input type="hidden" name="user_id" id="user_id_15" value="" />
<select name="user_id_pick" id="user_id_pick_15" onchange="changeResponsibleParty(this, 'user_id_15');" style="border:0;">
<option value="0">Anyone</option>
<option value="1" selected="selected">Allen McCabe</option>
<option value="2">Thomas Martinez</option>
</select>
</form>
I am using the function to update a hidden input element because for some reason, the tag was posting 1 regardless of which option I chose (1 is my user_id, which I set as selected if the database record value is 1.
Can anyone see what is wrong here?
You use changeResponsibleParty as name for the form and also as name for the function, which will cause conflicts. Rename one of them.