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>
Related
Here is my HTML;
<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
<div class="question">
<h2 class="question__title">Country</h2>
<div class="form-field form-field--dropdown">
<select required="1" name="country" data-parsley-group="group-0">
<option selected="selected" value="">Please select...</option>
<option value="great-britain">Great Britain</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="question"> // line 13
<h2 class="question__title">Postcode</h2>
<div class="form-field">
<input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
</div>
</div>
</div>
How can I hide the div starting on "line 13" (see comment in code) unless the Country question above's input is Great Britain?
It's dynamic so I can't assign the div directly to give it a name. All I have to go on is the input which has name of postcode.
If I could access that div, then I think it would be something like;
$('#country').on('change.postcode', function() {
$("#").toggle($(this).val() == 'great-britain');
}).trigger('change.postcode');
There is a function in JQuery called parent(). You can use get the input node via
$("input[name='postcode']")
and then access the parent of it's parent to hide it like that:
$("input[name='postcode']").parent().parent().hide();
Learn more about parent() here.
EDIT (thanks to andlrc):
You could also use closest() instead of the double parent():
$("input[name='postcode']").closest("div.question").hide();
see here.
A combination of parent and next should do the trick:
$(function(){
$('select[name="country"]').change(function(){
var country = $(this).val();
if(country == 'great-britain'){
$(this).parent().parent().next('.question').show();
}
else{
$(this).parent().parent().next('.question').hide();
}
});
});
In order to hide the dinamically generated html, you can do something like this:
$('.question').each(function(i,item){
if((i+1) % 2 ==0){
$(item).hide();
}
});
Updated fiddle: https://jsfiddle.net/robertrozas/pen942nf/1/
You This must work:
<style>
.hide{display:none;}
</style>
<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
<div class="question">
<h2 class="question__title">Country</h2>
<div class="form-field form-field--dropdown">
<select required="1" name="country" data-parsley-group="group-0">
<option selected="selected" value="">Please select...</option>
<option value="great-britain">Great Britain</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="question sh"> // line 13
<h2 class="question__title">Postcode</h2>
<div class="form-field">
<input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
</div>
</div>
</div>
<script>
$("#country").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="great-britain"){
$('.sh').show();
}
else{
$('.sh').hide();
});
});
</script>
I have 3 pages: index.php, soldc.php and soldf.php like in select option below.
On each page i have the same dropdown as header. So when i click the button , depending on dropown option, the button redirect to soldc.php or sodf.php where are displayed different information. I want to keep dropdown option selected on the next page i'm redirected by the button. Thx for help.
<html>
<body>
<form name="hop"><br>
<p align="center">
<select name="choose" style="width: 168px;height: 35px;">
<option value="./soldc.php">Sold clienti</option>
<option value="./soldf.php">Sold furnizori</option>
</select>
<input type="button" data-validate="submit" class="btn-primary" onclick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Calculate" style="
margin-left: 10px;">
</form>
</body>
</html>
Place this in your <head>
<script language="JavaScript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
</script>
Then use this as your html form
<form name="form1">
<select name="select" id="select">
<option value="./soldc.php?id=1" <?php if($_GET['id'] == 1) { ?> selected=selected <?php } ?>>Sold clienti</option>
<option value="./soldf.php?id=2" <?php if($_GET['id'] == 2) { ?> selected=selected <?php } ?>>Sold furnizori</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Go" onClick="MM_jumpMenuGo('select','parent',0)">
</form>
Hope this helps
I am not sure this will work, but I think it would:
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
Html
<p align="center">
<form name="hop" class="center">
<select name="choose" id="selection" style="width: 168px;height: 35px;">
<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" data-validate="submit" class="btn-primary" onclick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Calculate" style="
margin-left: 10px;">
</form>
</p>
When you go to target page that means you the last selected option is the current page , am i correct ? use the following js code in each page :
var option = document.location.pathname.match(/[^\/]+$/)[0];
document.getElementById('select').value = option;
change this line <select name="choose" style="width: 168px;height: 35px;">
to this
<select id=select name="choose" style="width: 168px;height: 35px;">
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
This is the javascript snippet which assigns the selected option value to a text box
function check() {
document.getElementById("inp").value=document.getElementById("id").value ;
}
this is the actual html code
<form>
<select id="id" onSelect="check( );">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp">
</form>
I Hope am done right ,but still am not able to get my solution
Here's your fix.
This one works
I guess the summary of it is that you should change onSelect to onChange.
<script>
function check() {
document.getElementById("inp").value=document.getElementById("id").value;
}
</script>
</head>
<body>
<form>
<select id="id" onChange="check();">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp" value="">
</form>
</body>
Assuming this html
<select id="id">
<option value="">Please select</option>
<option value="85.5">opt1</option>
<option value="95.5">opt2</option>
<option value="95.5">opt3</option>
<option value="95.5">opt4</option>
</select>
You can use unobtrusive JavaScript and add this to the head
Plain JS:
window.onload=function() {
document.getElementById("id").onchange=function() {
this.form.input.value=this.value;
}
}
Same in jQuery would be
$(function() {
$("#id").on("change",function() {
$("#inp").val($(this).val());
});
});
If you MUST do it inline, then
<select id="id" onchange="this.form.input.value=this.value;">
You HTML has multiple issues as well as your javascript
Your formatted HTML
<form>
<select id="id" onChange="check();">
<option></option>
<option value="85.5">opt1</option>
<option value="95.5">opt2</option>
<option value="95.5">opt3</option>
<option value="95.5">opt4</option>
</select>
<input type="text" name="input" id="inp" />
</form>
JS
function check() {
document.getElementById("inp").value = document.getElementById("id").value;
}
Working DEMO
Also you should enclose you values like value="". Besides this no major issues
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>