I plan to submit a form according to the option. But there is a javascript problem. I want to submit the form but I don't know the following code how to program. And the submit url is /dashboard/speed?speed=xxx Could someone help me ? Thanks a lot !
<script type="text/javascript">
$("select[name=population_speed] option").click(function(){
var rate = $(this).attr('value');
var url = "/dashboard/speed?speed=" + rate + "&id=123456";
$("#speed_form").attr("action", url);
/*
What should I do next ??
*/
});
</script>
<div class="btn-group">
<form id="speed_form" class="form-inline pull-right">
<select name="population_speed">
<option value="1">1 Rate</option>
<option value="2">2 Rate</option>
<option value="3">3 Rate</option>
</select>
</form>
</div>
You can submit the form with:
$("#speed_form").submit();
You just need to submit the form, which you can do immediately after setting the action property (.attr() probably works too, but it's actually the property you should be setting):
$("#speed_form").prop("action", url).submit();
You can submit form with $("#speed_form").submit(); like;
<script type="text/javascript">
$("select[name=population_speed] option").click(function(){
var rate = $(this).attr('value');
var url = "/dashboard/speed?speed=" + rate + "&id=123456";
$("#speed_form").attr("action", url);
$("#speed_form").submit();
});
</script>
<div class="btn-group">
<form id="speed_form" class="form-inline pull-right">
<select name="population_speed">
<option value="1">1 Rate</option>
<option value="2">2 Rate</option>
<option value="3">3 Rate</option>
</select>
</form>
</div>
You can see working demo here: http://jsfiddle.net/4YmyL/
it would also help you in single line :
replace
$("#speed_form").attr("action", url);
to
$("#speed_form").attr("action", url).submit();
You just want to mimic the submit button with a select, there's no need to mimic all the native form functionality. So here's my approach:
<script type="text/javascript">
$("select[name=speed]").change(function(){
if($(this).val()!=""){
$("#speed_form").submit();
}
});
</script>
<div class="btn-group">
<form id="speed_form" class="form-inline pull-right" action="/dashboard/speed" method="get">
<select name="speed">
<option value="">Select your speed</option>
<option value="1">1 Rate</option>
<option value="2">2 Rate</option>
<option value="3">3 Rate</option>
</select>
<input type="hidden" name="id" value="123456" />
</form>
</div>
Fiddle
Related
Below is my HTML and Javascript. I am using thymeleaf.All i want is to perform blur operation on this select tag i.e on blur alerting the value selected by user.
$(document).ready(function(){
alert("called");
});
});
function addSubject(){
var x = document.getElementById("sub").value;
alert(x);
}
<body>
<div class="form-group" style="margin-top: 10px;">
<label th:text="'Subject'"></label>
<select class="form-control" id="sub" th:onblur="'addSubject()'">
<option value="" th:disabled="disabled" th:selected="selected" th:text="'Select Subject'"></option>
<option th:text="'Add New Subject'" th:value="addSub"></option>
<option th:each="freesub : ${detailsofexams}"
th:text="${#strings.capitalize(freesub)}"
th:value="${#strings.toUpperCase(freesub)}">
</option>
</select>
</div>
<script
th:src="#{${#mvcResourceUrlProvider.getForLookupPath('/admin/dist/js/freecontent.js')}}"></script>
</body>
Their was typo error in my JS file and as suggested by #Simon sir in first comment after doing that my code starts working. Below is correct code
$(document).ready(function(){
alert("called");
});
function addSubject(){
alert("x");
}
<div class="form-group" style="margin-top: 10px;">
<label th:text="'Subject'"></label>
<select class="form-control" id="sub" th:onblur="'addSubject()'">
<option value="" th:disabled="disabled" th:selected="selected" th:text="'Select Subject'"></option>
<option th:text="'Add New Subject'" th:value="addSub"></option>
<option th:each="freesub : ${detailsofexams}"
th:text="${#strings.capitalize(freesub)}"
th:value="${#strings.toUpperCase(freesub)}">
</option>
</select>
</div>
if the select drop-down menu has value of NULL, it should stop the page from loading. The jQuery works alerting the user of the issue, however the page still continues to the next page. Any assistance would be superb. Thanks
Luke
<fieldset class="form-group">
<label for="question-1">1. What age group are you?</label> <br>
<select class="drop-down" id = "ageChoice">
<option value="">Please Select</option>
<option value="16minus">16 or below</option>
<option value="16-18">16 to 18</option>
<option value="19-25">19 to 25</option>
<option value="26-34">26 to 34</option>
<option value="35-42">35 to 42</option>
<option value="43-50">43 to 50</option>
<option value="51-60">51 to 60</option>
<option value="61plus">61+</option>
</select>
</fieldset>
<input class="btn btn-primary" type="button" id= "next" value="Next" onClick="location.href='first-test.html' ">
$("#next").click(function () {
var age = $('#ageChoice');
if (age.val() === '') {
event.preventDefault();
alert("Please select your age group, thank you.");
}
else
return;
});
Ok, so because you have two click handlers, the event is being processed twice. The 'Default' you are trying to prevent is not the onClick="location.href='first-test.html' . That is being processed after your jQuery click function. So we take the onClick out of the html. and add the functionality to the jQuery click event (we could do it either way, but becuase you already have most of the code set up already we'll do it this way)
Here is the reworked code:
<fieldset class="form-group">
<label for="question-1">1. What age group are you?</label> <br>
<select class="drop-down" id = "ageChoice">
<option value="">Please Select</option>
<option value="16minus">16 or below</option>
<option value="16-18">16 to 18</option>
<option value="19-25">19 to 25</option>
<option value="26-34">26 to 34</option>
<option value="35-42">35 to 42</option>
<option value="43-50">43 to 50</option>
<option value="51-60">51 to 60</option>
<option value="61plus">61+</option>
</select>
</fieldset>
<input class="btn btn-primary" type="button" id= "next" value="Next">
and the jquery:
$("#next").on('click', function (event) {
var age = $('#ageChoice');
if (age.val() === '') {
alert("Please select your age group, thank you.");
} else {
location.href='first-test.html'
}
});
EDIT: Ok, I really want to get this so I've decided to simplify what I need. I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.
<script type="text/javascript"><!--
function OnSelectionChanged(listBox) {
var textInput = document.getElementById("dn");
textInput.value = listBox.value;
}
//--></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Text</h1>
<div id="intro"><h5>Text</h5>
<div id="content"><h2>Text:</h2>
<p>Text</p>
</div>
<form method="POST" action="submit" name="myForm"><fieldset>
<legend>Text</legend>
<label>[?]
Disposition Code<br />
<select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
<option value="-1" selected>——Select one——</option>
<option value="Text ">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="195">195</option>
<option value="270">270</option>
<option value="300">300</option>
<option value="340">340</option>
<option value="350">350</option>
<option value="370">370</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
</select>
</label>
<label>[?]
Cause Code<br />
<select size="1" name="cause">
<option value="-1" selected>——Select one——</option>
<option value="">Cause - 190</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</label><br /><br />
<label><!--[?] -->
Disposition Narrative
<textarea id="dn" rows="8" cols="30" name="dn"></textarea>
</label>
Im still getting used to how stack overflow wants us to format the code but hopefully you guys can read it well enough to help find a solution. Thanks again.
All I can really give you at this point is
Attach onchange handlers to your drop downs. Your handlers will
add/replace the text.
Use regular expressions to replace text when dd2 and dd3 change.
If you can provide more details about the text you want to replace then someone will be able to help you with your regular expressions.
I'm updating the selected option programmatically using jQuery, but nothing changes in the browser. (That is, the old selected option remains selected instead of switching to the newly selected option.) Suggestions?
Thanks. --Jeff
I have a simple form like this:
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p> Task A: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form></div>
and my jQuery code looks like this:
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var form = $(this).parents('form');
var assigned = form.find(':selected').first().val();
form.find(':selected').each(function(index){
$(this).val( assigned ).change();
});
}
);
});
</script>
I'm updating the selected option programmatically using jQuery
Not as far as I can see. You're re-setting the value of the selected option, but not doing anything as far as I can tell to the actual select box.
To change a select box, you need to identify it, then call val on it, not one of its option elements.
I can't make out what you want your input[name="button1"] to do, but here's an example of updating a select box: Live copy | source
HTML:
<select id="theSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">
JavaScript:
jQuery(function($) {
$("#theButton").click(function() {
$("#theSelect").val("2");
});
});
Separately, as j08691 pointed out in the comments, you can't assign the same id value ("assigner") to more than one element. id values must be unique in the document. Your code doesn't show you using that id, so this may well be unrelated, but it's worth flagging up.
<form id="form1" name="form1" method="" action="">
<p>Assign:
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
<option value="Harry">Harry</option>
<option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>
Task A: <select name="assignment[]" id="assigner2">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
<p>
Task B: <select name="assignment[]" id="assigner3">
<option value="Sam">Sam</option>
<option value="Harry" selected="selected">Harry</option>
<option value="Fred">Fred</option>
</select>
</p>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
$('[name="button1"]').click(
function(){
var assigned = $("#assigner").val();
$('#form1 select').val( assigned );
}
);
});
</script>
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>