Combine form input value with selected option - javascript

I want to combine values from option and input fields in realtime by using jQuery.
<input name="recipe" id="recipe" value="tablespoons" />
<select id="spoon_value" name="spoon_value">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Maybe something like this would work, but I'm getting error.
Uncaught SyntaxError: Unexpected identifier
$('select#spoon_value').each(function(i) {
$(select[name=spoon_value] option[value=" + this.data.spoon_value + "]").html() + this.data.recipe);
The output I want is 2tablespoons or 3tablespoons and so on.

<!doctype>
<html>
<head>
<script>
function _(x){
return document.getElementById(x);
}
function update() {
var tbsVal = _("spoon_value").value;
var output = tbsVal + " tablespoons";
_("realtimeTbsVal").innerHTML = output;
}
</script>
</head>
<body>
<form action="yourFileName" method="post">
<select id="spoon_value" name="spoon_value" onblur="update()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Submit">
</form>
<div id="realtimeTbsVal">yo</div>
</body>
</html>

You're missing quotes around your selector inside your each function -- you also have an each function targeting an ID, which is bad because it most likely means you're repeating ID's. Here's a syntax correct version of your code:
$('select#spoon_value').each(function(i) {
var someData = $("select[name=spoon_value] option[value=" + this.data.spoon_value + "]").html() + this.data.recipe;
});

Related

Trying to add multiple selections together from a list on a website

$(function() {
var fields = $('#form1 :input').change(calculate)
$("#form1 option").text(function(i, t) {
if (this.value !== "0")
return t + " - " + this.value
})
function calculate() {
var price = 0;
fields.each(function() {
price += +$(this).val();
})
$('#price').html(price.toFixed(0));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
<p>
<select name="DMA1" multiple id="DMA1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
</p>
</form>
Total: <u id="price"></u>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
I found an example I was able to get working where I can have multiple drop-down lists add their values together. That page/code is working fine.
I have been unable to adapt it so you can shift-select (or command-select on mac) and have it Total the values in the Total field at the bottom of the page.
My current code is below and any assistance would be appreciated. I have been searching online for some time now and can't seem to find what I am looking for. Closest I could find is to have multiple drop-downs (mentioned above)
Here is the breakdown:
Javascript
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script type='text/javascript'>
$(function () {
var fields = $('#form1 :input').change(calculate)
$("#form1 option").text(function(i,t){
if (this.value!=="0")
return t + " - " + this.value
})
function calculate() {
var price = 0;
fields.each(function () {
price += +$(this).val();
})
$('#price').html(price.toFixed(0));
}
})
</script>
Body
<body>
<form id="form1" method="post" action="">
<p>
<select name="DMA1" multiple id="DMA1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
</p>
</form>
Total: <u id="price"></u>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>
You were trying to calculate against the <select> element. The fields variable was incorrectly set. Set it to the options as the attached.
$(function() {
var fields = $('option');
$('#form1 :input').change(calculate)
$("#form1 option").text(function(i, t) {
if (this.value !== "0")
return t + " - " + this.value
})
function calculate() {
var price = 0;
fields.each(function() {
if (this.selected) {
price += +$(this).val();
}
})
$('#price').html(price.toFixed(0));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
<p>
<select name="DMA1" multiple id="DMA1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
</p>
</form>
Total: <u id="price"></u>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

Multiselect options with each option selecting multiple times using jquery

Select numbers (you can select each number any number of times):
<select name="number_selection" method="post" id="number_selection" >
<option value="0">0</option>
<option value="1">1 </option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="Select" id="select_button"/>
<div id="feedback"> </div>
what I've tried in jquery is this....
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').html(gs);
});
Now, What i am trying to do is, if i select a number from the options, it should display in the 'div' and if i select another number or the same number again, it should display beside the first number, but i am only able to select only a single number, not multiple numbers. I want the do this using jquery
If you don't understand my problem, i can explain you further. Please help.
And also if I want to deselect each element from the list appended?
I've tried this... but isn't working.
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').append(gs + ' ' + '<input type="button" value="Remove" id="gs_remove" />' + '<br>');
});
$('#gs_remove').click(function(){
(this).hide();
});
but with this i am not able to remove each selected option.
Replace
$('#fcb_pt_gs').html(gs);
by
$('#fcb_pt_gs').append(gs);
$('#select_button').click(function() {
var _val = $('#fcb_pt_gs').text();
var gs= $('#number_selection').val();
if( _val == "" ) {
var _collection = [];
}
else {
// Add in collection
var _collection = [_val];
}
_collection.push( gs );
$('#fcb_pt_gs').html( _collection.join(',') );
});

concatenate two dropdown values into another dropdown

i'm looking for a way to concatenate two dropdown values into another dropdown using jquery and php, i want to do the same i did on with the textbox
<script type="text/javascript">
$(document).ready(function() {
$('#drop2').change(function() {
var currentVal = $('textarea').val();
var one = $('#drop1').val();
var two = $('#drop2').val() + "\n";
two.replace("\n","<br/>");
$('textarea').html(currentVal + one + " em " + two) ;
});
});
</script>
HTML part
<form id="inserirtextarea" action="#" method="post">
<p>
<select name="drop1" id="drop1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="drop2" id="drop2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<textarea name="txta" id="txta" cols="20" rows="5"></textarea>
<input name="btinsert" type="submit" />
</form>
Any help is appreciated if anyone tried similar please point me on the right direction
Try this,
$('<select>').html($('#drop1').html()+$('#drop1').html()).appendTo('#inserirtextarea');
Fiddle Demo

selected value from select box in javascript

I want to get the value of the select box using javascript i have the following code.
html part
<select name="marked" id="marked" onchange="checkdata(this); ">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
script
<script type="text/javascript">
function checkdata()
{
for(var i=0; i < document.myform.message.length; i++)
{
document.myform.message[i].checked=true;
}
}
</script>
i tried the code
var all = document.myform.marked.options[document.myform.selectedIndex].value;
alert(all);
no alert is coming
i also tried
var all= document.getElementById('marked').value;
alert(all);
alert is coming but the value for every selection in "1"
You missed the '.marked':
var all = document.myform.marked.options[document.myform.marked.selectedIndex].value;
alert(all);
var e = document.getElementById("ctl00_cphContent_ddlVoteType");
var strOption = e.options[e.selectedIndex].value;
working fine for me. please check
Try
<form method="POST" name="me">
<select size="1" name="D1" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<script Language="JavaScript"><!--
function checkData()
{
var myTest =
me.D1.options[me.D1.options.selectedIndex].value;
///or me.D1.options[me.D1.selectedIndex].value
alert(myTest);
}
</script>
the following code is working for me
Java Script :
function checkdata()
{
alert(document.getElementById('marked').value);
}
HTML :
<select name="marked" id="marked" onchange="checkdata(this);">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
get the selected value onchange
<script Language="JavaScript">
function checkdata(marked){
var marked_value = marked.value; // store the selected value marked_value
alert(marked_value); // do further processing with "marked_value" if needed
}
</script>
for option selects you don't use "checked" that is for radio and checkbox

Simple javascript form action direction

I am trying to use Jquery to re-form a target url for a form - see below. Any ideas where I am going wrong? many thanks ...
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// Needs to point at search page with eg: test.htm?s=SearchTerm&cat=3,7
// but I keep getting - test.htm?s=hh&cat1=3&cat2=0
$("#aSearch").click(function () {
$('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);
});
</script>
<form name="advancedSearch" action="" method="get">
<input id="s" type="text" name="s" size="40" />
<select name="cat1">
<option value="0"> - - - </option>
<option value="3">Chardonnay (6)</option>
<option value="23">Gewurztraminer (1)</option>
<option value="24">Pinot Gris (1)</option>
<option value="4">Sauvignon Blanc (3)</option>
</select>
<select name="cat2">
<option value="0"> - - - </option>
<option value="2">Burgandy (6)</option>
<option value="7">Shiraz (1)</option>
</select>
<div><input id="aSearch" type="submit" value="Search" /></div
</form>
</body>
</html>
In your original code, you were trying to access properties of this. The this keyword in the callback referred to the aSearch DOM object, and so it wasn't providing the right values.
$('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);
You'll need to select each element with jQuery and fetch its value with .val() instead:
<script>
$(document).ready(function() {
var s = $('#s');
var cat1 = $('#cat1');
var cat2 = $('#cat2');
$("#aSearch").click(function () {
$('form').attr('action', './test.htm?s=' + s.val() + '&cat=' . cat1.val() + ',' + cat2.val());
});
});
</script>

Categories