Meteor: using jQuery to retrieve selected value after clicking submit

Meteor: using jQuery to retrieve selected value after clicking submit - javascript

How do I retrieve the selected value from the dropdown list created within my form using the following bootstrap classes?
I am using Meteor 0.9.2 and mizzao:bootstrap-3
My HTML:
<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="field">Field</label>
<div class="col-sm-10">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<input type="submit" value="post">
</form></template>
CLIENT.JS:
Template.createpost.events({
'submit form#createpost': function(e) {
e.preventDefault();
var insertpost = {
field: //CODE TO RETRIEVE THE VALUE OF THE SELECTED ITEM //
}
Meteor.call('insertPostData', insertpost);
} });
SEVER.JS:
Meteor.methods({
'insertPostData': function(insertpost){
return insertpost._id = AllPosts.insert(insertpost);
}
});

Template.createpost.events({
'submit form#createpost': function(e, tmpl) {
e.preventDefault();
var selectedOption = tmpl.find('.form-control :selected');
var insertpost = {
field: (selectedOption && selectedOption.text)
}
}
});

I figured it out. I have to give the select an id and then reference this id in the javascript. i used "someId' for this example. This works perfect. Thanks for your initial help though.
<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="field">Field</label>
<div class="col-sm-10">
<select class="form-control" id="someId>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<input type="submit" value="post">
client.js:
Template.createpost.events({
'submit form#createpost': function(e, tmpl) {
e.preventDefault();
var insertpost = {
field: $( "#someId" ).val();
}
Meteor.call('insertPostData', insertpost);
} });

Related

How to use Thymeleaf blur/onblur event to call function?

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>

How to combine Selected price and input checkbox price Jquery?

i have a checkout form . where there are 2 fields are used o give total amount of checkout . 1 field is in select tag and second is input type check box i want when i select and option and checkbox there values should be combine to give total.
$(function() {
$('.price-input').change(function() {
var price = 0;
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
})
$("select.price").change(function() {
var selectedPrice = $(this).children("option:selected").val();
document.getElementById("totalPrice").innerHTML = selectedPrice;
});
$(".totalPrice").text(price);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">#lang('Number of Words'):</label>
<select class="price" name="word_prices_id" required>
<option value="">#lang('Select Words')</option>
#foreach($wordPrice as $wPrice)
<option value="{{$wPrice->id}}">{{$wPrice->page_quantity}} words</option>
#endforeach
</select>
</div>
</div>
<input class="price-input" type="checkbox" name="upsell" value="12">

I added a class .ajx to both Select and input to handle changes made on both of their values in the same function !
$(document).on('change', '.ajx', function () {
if ($( "input.price-input:checked" ).is(":checked") && $("select.price").val()!==''){
var price = 0;
price += parseInt($("select.price").val(),10);
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
});
$(".totalPrice").empty().text(price);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Price:</label>
<select class="price ajx" name="word_prices_id" required id="exampleFormControlSelect1">
<option value="">Choose Price</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<input class="price-input ajx" type="checkbox" name="upsell" value="12">
<input class="price-input ajx" type="checkbox" name="upsell1" value="15">
<div class="totalPrice">
</div>

how to hide and show button using dropdown options?

I just want to hide a button defaultly and when i select any dropdown list the button comes
FIDDLE HERE
$(function() {
$('#cashbill').change(function() {
$('#bill_icon').hide();
$('#bill_icon' + $(this).val()).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
to shown.. i just tried jQuery but its not work for me..

Just hide the button at first , then check if no value select to hide or show ( using value length as below )
$(this).val().length ? $('#bill_icon').show() : $('#bill_icon').hide();
see below snippet
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
$(this).val().length ? $('#bill_icon').show() : $('#bill_icon').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
if you want to check by text value not value use the beow snippet :
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
var text = $(this).children("option:selected").text();
( text == "Raw" || text == "Spare" )? $('#bill_icon').show() : $('#bill_icon').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>

This could be done this way in jQuery:
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
if (this.value) $('#bill_icon').show();
else $('#bill_icon').hide();
});
});
But this has some problems:
- If your page delays to load, it will show the button, and then it will hide it (flashing items)
- This depends on JS been enabled
What I suggest you, is to hide the button on css, and then control its visibility.
What I do when I want this kind of behavior:
<label>Bill type :</label>
<select name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
<button type="button">Bill</button>
Hide by default on CSS, and only show it when select has a valid option:
select:invalid + button {
display: none;
}
select:valid + button {
display: inline-block;
}

Another way is using jQuery's toggleClass:
Add hidden class to the button, it will hide the button at first load.
Use toggleClass inside change event of select like this:
$('#cashbill').change(function() {
$('#bill_icon').toggleClass('hidden', $(this).val() === '');
});
Basically you prevent toggling class when selected item is not first item.
Here is working fiddle.

add css above like here.
.bill-btn{
display: none;
}
change your jquery like this.
$(function() {
$('#cashbill').change(function() {
if($(this).val() != "others"){
$('#bill_icon').hide();
$('#bill_icon' + $(this).val()).show();
$(".bill-btn").show(); // added this line here
}
});
});

jQuery ajax not populating drop down list

I have been wrecking my brain trying to get around this issue. I'm having trouble where a Select dropdown list is not being populated with the results returned based on a previous selection.
The relevant HTML code is as follow:
<div class="widget property_search">
<form action="https://www.agentsforbidden.co.za/" id="searchproperty" name="searchproperty" method="get">
<div class="search_frm_left clearfix">
<div class="form_row clearfix advt-ptype">
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Sale" value="Sale" checked= checked><label for="property_type_Sale"> Sale</label></span>
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Rent" value="Rent"><label for="property_type_Rent"> Rent</label></span>
</div> <div class="form_row">
<label>Keyword</label>
<input type="text" value="" name="s" id="search_near-1135114534" class="searchpost" placeholder="" />
</div>
<div class="form_row clearfix">
<label>Province</label> <div class="selectbox">
<select name="adv_zone" id="adv_zone" class="adv_zone">
<option value="">Select province</option>
<option value="5">Eastern Cape</option>
<option value="3">Free State</option>
<option value="6">Gauteng</option>
<option value="2">KwaZulu-Natal</option>
<option value="9">Limpopo</option>
<option value="7">Mpumalanga</option>
<option value="10">North West</option>
<option value="8">Northern Cape</option>
<option value="11">Western Cape</option>
</select>
</div>
</div>
<div class="form_row clearfix">
<label>City</label> <div class="selectbox">
<select name="adv_city" id="adv_city" class="adv_city">
<option value="">Select City</option>
</select>
</div>
</div>
The problem is that when I select the Province that the City drop down list is not getting populated. When I inspect the POST and return values with FireBug I can see that I am getting the response that is required (All the options for the dropdown) however it just simply doesn't get populated.
Here's the relevant jQuery Ajax bit:
jQuery(".adv_zone").live("change", function () {
var e = jQuery(this),
t = e.parents(".form_front_style").find(".adv_city"),
i = jQuery(this).val();
jQuery.ajax({
url: ajaxUrl,
type: "POST",
data: "action=fill_city_cmb&state_id=" + i,
success: function (e) {
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
else {
var i = t.find("option").first();
t.next("span.select").text(i.text())
}
}
})
})
And lastly the response (truncated due to already long post):
<option value="">Select City</option><option value="5651">Akasia</option><option value="5652" >Alberton</option><option value="5653">Albertynsville</option><option value="5654" >Alexandra</option><option value="12694" >Alphen Park</option><option value="5655">Alrapark</option><option value="5656">Alrode</option><option value="5657">Althea</option>
When the ajax is fired I can see that the following part is true and is executed:
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
I would GREATLY appreciate any insight as to why this is not working as expected.

Select list auto update on any kind of change?

I have a jQuery that when you click on a select option it will show the next one, but you have to click, you cant just use the down arrow or "tab" to the next option. I am wondering what options do I have to make this work?
Here is my jQuery:
function typefunction()
{
var itemTypes = jQuery('#type');
var select = this.value;
itemTypes.change(function () {
if ($(this).val() == '1-Hand') {
$('.1-Hand').show();
$('.2-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.1-Hand').hide();
if ($(this).val() == '2-Hand') {
$('.2-Hand').show();
$('.1-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.2-Hand').hide();
if ($(this).val() == 'Armor') {
$('.Armor').show();
$('.2-Hand').hide();
$('.off').hide();
$('.1-Hand').hide();
}
else $('.Armor').hide();
if ($(this).val() == 'Off-Hand') {
$('.Off').show();
$('.2-Hand').hide();
$('.1-Hand').hide();
$('.Armor').hide();
}
else $('.Off').hide();
if ($(this).val() == '1-Hand') {
$('.one-hand-dps').show();
$('.item-armor').hide();
$('.two-hand-dps').hide();
}
else $('.one-hand-dps').hide();
if ($(this).val() == '2-Hand') {
$('.two-hand-dps').show();
$('.one-hand-dps').hide();
$('.item-armor').hide();
}
else $('.two-hand-dps').hide();
if ($(this).val() == 'Armor') {
$('.item-armor').show();
$('.one-hand-dps').hide();
$('.two-hand-dps').hide();
}
else $('.item-armor').hide();
});
}
And the HTML:
<div class="input-group item">
<span class="input-group-addon">Type</span>
<select id="type" name="type" class="form-control" onclick="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
</div>
<div class="input-group item">
<span class="1-Hand input-group-addon" style="display: none;">Sub-Type</span>
<select class="1-Hand form-control" name="sub[1]" style="display: none;">
<option value="All 1-Hand Item Types">All 1-Hand Item Types</option>
<option>Axe</option>
<option>Ceremonial Knife</option>
<option>Hand Crossbow</option>
<option>Dagger</option>
<option>Fist Weapon</option>
<option>Mace</option>
<option>Mighty Weapon</option>
<option>Spear</option>
<option>Sword</option>
<option>Wand</option>
</select>
</div>
<div class="input-group">
<span class="2-Hand input-group-addon" style="display: none; ">Sub-Type</span>
<select class="2-Hand form-control" name="sub[2]" style="display: none;">
<option>All 2-Hand Item Types</option>
<option>Two-Handed Axe</option>
<option>Bow</option>
<option>Diabo</option>
<option>Crossbow</option>
<option>Two-Handed Mace</option>
<option>Two-Handed Mighty Weapon</option>
<option>Polearm</option>
<option>Staff</option>
<option>Two-Handed Sword</option>
</select>
</div>
<div class="input-group">
<span class="Armor input-group-addon" style="display: none;">Sub-Type</span>
<select class="Armor form-control" name="sub[3]" style="display:none;">
<option>All Armor Item Types</option>
<option>Amulet</option>
<option>Belt</option>
<option>Boots</option>
<option>Bracers</option>
<option>Chest Armor</option>
<option>Cloak</option>
<option>Gloves</option>
<option>Helm</option>
<option>Pants</option>
<option>Mighty Belt</option>
<option>Ring</option>
<option>Shoulders</option>
<option>Spirit Stone</option>
<option>Voodoo Mask</option>
<option>Wizard Hat</option>
</select>
</div>
<div class="input-group">
<span class="Off input-group-addon" style="display: none;">Sub-Type</span>
<select class="Off form-control" name="sub[4]" style="display:none;">
<option>All Off-Hand Item Types</option>
<option>Mojo</option>
<option>Source</option>
<option>Quiver</option>
<option>Shield</option>
</select>
</div>

If you use onclick attribute in the select, then it stands to a reason that it requires a mouse click in order to work. Try using onchange for instance and keyboard usage should also work.
<select id="type" name="type" class="form-control" onchange="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
Also see this question, for more details about how to handle both clicks and keys immediately.

Develop Reference

JavaScript is the programming language of the Web.

Meteor: using jQuery to retrieve selected value after clicking submit - javascript

Template.createpost.events({ 'submit form#createpost': function(e, tmpl) { e.preventDefault(); var selectedOption = tmpl.find('.form-control :selected'); var insertpost = { field: (selectedOption && selectedOption.text) } } });

Related

How to use Thymeleaf blur/onblur event to call function?

How to combine Selected price and input checkbox price Jquery?

how to hide and show button using dropdown options?

jQuery ajax not populating drop down list

Select list auto update on any kind of change?

Categories

Resources