jQuery getting values from multiple selects together - javascript

I've got the following code which basically when the value of the select is changed I want to be able to take the new value and add it to the already existing value (or minus it).
I'm having an issue actually grabbing the value. I have this to create the select lists:
<li class="extraHeight">
<asp:Image runat="server" CssClass="iconImageMove" ID="Image14" ImageUrl="~/images/icons/carpark_off.png" />
<div class="flipWidth">
<select name="access" class="change" id="carpark_off" runat="server">
<option value="0">Off</option>
<option value="256">On</option>
</select>
</div> <br /> <p class="noWrap">Accessible Car parking facilities</p>
</li>
<li class="extraHeight">
<asp:Image runat="server" CssClass="iconImageMove" ID="Image15" ImageUrl="~/images/icons/parking_off.png" />
<div class="flipWidth">
<select name="access" class="change" id="parking_off" runat="server">
<option value="0">Off</option>
<option value="33554432">On</option>
</select>
</div> <br /> <p class="noWrap">Customer Car parking facilities</p>
</li>
<li class="extraHeight">
<asp:Image runat="server" CssClass="iconImageMove" ID="Image16" ImageUrl="~/images/icons/staff_off.png" />
<div class="flipWidth">
<select name="access" class="change" id="staff_off" runat="server">
<option value="0">Off</option>
<option value="8192">On</option>
</select>
(There are a lot more but that gives you an idea)
I'm using the following jQuery to detect the change and try and grab the value but it's not working:
<script>
var value = $("select").val()
$("select").change(function () {
alert(value);
})
</script>
Any suggestions would really be appreciated!
Tom

You are only selecting the initial value. You need to get the value inside the change event.
$("select").change(function () {
var value = $(this).val()
alert(value);
})

You set your value before the change try this:
<script>
$("select").change(function () {
var value = $(this).val()
alert(value);
})
</script>

Calling var value = $("select").val() will save the value of the first <select> element matched by the selector into a variable as it was when that code was run - it won't update when you change the value of that element.
Instead, what you can do is use this inside your change() callback function to refer to the <select> element that has changed, and get its value, like this:
$("select").change(function () {
alert(this.value);
});

You would do something like this:
$("select").change(function () {
alert($(this).val());
})
You are only getting the value out once and then just displaying the same thing on the change event.
See working demo : http://jsfiddle.net/JsKeS/

First of all wrap your script in $(document).ready(), so that it will be executed after the page loaded. Secondly get the value of select inside the callback:
$(document).ready(function(){
var value = $("select").val()
$("select").change(function () {
alert($(this).val());
});
})

Try:
<script>
$(document).ready(function () {
$("select").change(function () {
var value = $(this).val();
alert(value);
});
});
</script>
which will attach your change handler to the select elements after the DOM has loaded them.
Also, the value should be scoped in the handler, or the value will not necessarily be updated when other select elements fire the change event.

Related

How to get current element in order to select with javascript?

I've got the follwoing HTML structure (I do not have the IDs of the following elements because they are dynamically created):
<fieldset>
<div class="classA">
<select onchange="updateInputBox()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</selects>
</div>
<div class="classB">
<input data-myAttribute="case1">
</div>
<div class="classC">
<a type="button">
<i class="fa fa-remove">x</i>
</a>
</div>
</fieldset>
The filedset and it's children is dynamically created. I want to change the attribute in the inputBox depending on what the user selected in the selectBox.
Here is an example how I would have done if the element fieldset would not have been dynamic (the following contains elements have IDs, but only because I want to demonstrate what I want; in reality I don't have IDs because they are dynamically created by clicking a button, that I do not show here):
https://jsfiddle.net/thadeuszlay/6bsgazvv/4/
But unfortunately I don't have the id of the fieldset, because it is dynamically created. Is there a way how you can get the position of the current element?
I tried to pass itself in the updateInputBox-function:
<select id="selectBox" onchange="updateInputBox('+ this +')">
I also tried with jQuery:
$(this).parent().parent()
but in both cases the console would say
"Unexpected identifier"
Update:
Inside the function doing something like this (currentElement is the selectBox/DropDownBox):
currentElement.parent().parent().setAttribute("data-myAttribute", "hello");
Uncaught TypeError: selectBox.parent is not a function
You can use jquery 'closest' for this as below.
HTML
<select id="selectBox" onchange="updateInputBox(this)">
JS
function updateInputBox(selectElm) {
var inputElm = $(selectElm).closest('fieldset').find('input');
inputElm.attr('data-myAttribute', $(selectElm).val());
}
// instead of inline onchange event and the above code, you can use the below to trigger the event
$(document).on('change', 'fieldset select', function () {
var inputElm = $(this).closest('fieldset').find('input');
inputElm.attr('data-myAttribute', $(this).val());
});
In updateInputBox, simply look at the selectedIndex of #selectBox
<select id="selectBox" onchange="updateInputBox(this)">
function
function updateInputBox(dropdowntBox) {
var inputBoxField = document.getElementById("inputBox").setAttribute("data-myAttribute", dropdowntBox.value);
}
Here is jquery version:solution
You need to trigger change() event for select with ID selectBox
$(document).on('change','select',function(){
var value=$(this).val();
$(this).parents('fieldset').find('input').attr('data-myAttribute',value);
});

How to check whether form data is changed or not, excluding few fields on form?

I want to check whether any field is changed or not excluding few field on form.For this I tried following one.
$('#FormId').not('#elementId').data("changed")
But it is not excluding the element with id 'elementId'.
You can do something like the following:
// this binds the following function on any inputs type=text under #FormId
$('#FormId input[type=text]')bind("change", function(){
// do something
});
// You can add more elements, or classes by adding commas to the selector
$('#FormId input[type=text], .anotherclass, .onemoreclass')bind("change", function(){
.
.
.
.
I think you want to check whether form data change it or not
here is one approach i have use.
Create one Variable like: oldForm save in ready with old value
Create on change event for all input any change it will trigger
below is code suggestion for same
var oldFormData = '';
$(function () {
oldFormData == $('#FormId').serialize();
$('form :input').on('change input', function () {
var isChange = $('#FormId').serialize() !== origForm
});
})
Here's a quick and dirty example.
Let's say you want to mark the inputs that you want to track with a data attribute (data-change-tracking in this example).
HTML
<form action="/echo/html/" method="post">
<p>
<label>A text input</label>
<input data-change-tracking="true" value="abc"/>
</p>
<p>
<label>A select</label>
<select data-change-tracking="true">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</p>
<p>
<label>A textarea</label>
<textarea data-change-tracking="true">old</textarea>
</p>
<p>
<label>Not tracked</label>
<input value="123" />
</p>
</form>
Then, let's just add a dirty class when the input has changed from the previous value:
Javascript
$(function() {
$('[data-change-tracking]').each(function(){
$(this).data('previousValue', this.value);
});
$('form').on('change', '[data-change-tracking]', function(ev) {
if (ev.target.value !== $(ev.target).data('previousValue')) {
$(ev.target).addClass('dirty');
} else {
$(ev.target).removeClass('dirty');
}
});
});

Change text of all elements with specific data-attribute

I'm currently trying to use jQuery to change the text of a number of elements to the value of a specific data-attribute.
For example:
index.html
----------
<h1 data-change="text2">text1</h1>
<p data-change="paragraph2">paragraph1</p>
I want to change 'text1' to 'text2' and 'paragraph1' to 'paragraph2' (the value of data-change for that specific element).
How would I go about doing this?
I assumed I would be able to 'select' all of the elements with the data-attribute 'data-change' and then just do a simple $(this).text($(this).data('change')); or something.
You can do this:
$('[data-change]').each(function(){
$(this).text($(this).data('change'));
});
You can iterate over the elements and change its text.
.text method could accept a callback function.
$('[data-change]').text(function() {
return $(this).data('change');
});
How would you like this~
-html-
<select id="" name="" class="input_select">
<option value="text2" selected="selected">text2</option>
<option value="paragraph2">paragraph2</option>
</select>
<h1 class="text2">text1</h1>
<p class="paragraph2">paragraph1</p>
</pre>
-js-
$(document).ready(function(){
$('.input_select').change(function(){
var valitem = $(this).val()
if (valitem == 'text2')
{
$('.text2').text(valitem)
}else{
$('.paragraph2').text(valitem)
}
})
});

Live action assign and reassign id to element

I have a select box that looks like:
<select class="span12 select" data-placeholder="Wybierz operacje" tabindex="2" id="contract-operations">
<option></option>
<option value="1" data-url="<?php echo $aggregate_url; ?>" data-id="aggregate_invoice">
Wystaw fakturę dla zaznaczonych kontraktów
</option>
<option value="2" data-url="<?php echo $notification_url; ?>" data-id="">
Awizacja do klienta
</option>
<option value="3" data-url="<?php echo $notification_cost_url; ?>" data-id="">
Awizacja do klienta z potwierdzeniem
</option>
</select>
under it there is a link that attributes href and id are assigned dynamic and it looks like:
<a class="btn btn-info btn-large contract-operations" href="#">
<b class="icon-circle-arrow-up"></b>Wykonaj operacje dla zaznaczonych kontraktów
</a>
now depend on what option you choose from select box, id and href will change. Problem is with Id's, they are not working after attr assign any of them from js script that looks simple like:
select: function()
{
$.obj.$select.on('change', function(){
button.href = $(this).find(':selected').data('url');
var id = $(this).find(':selected').data('id');
$.obj.$a.attr('href', button.href);
$.obj.$a.attr('id', id);
});
}
They are assigning to a href element correctly but when I try to use those id's in another script or function it is like they never were assign.
use following
$(document).on('change','.select',function(){
var url = $(this).attr('data-url');
$('a.btn-info').attr({href:url});
});
working fiddle: http://jsfiddle.net/patelmilanb1/8H49X/2/
$(document).on('change', '.select', function (e) {
e.preventDefault();
var selectedURL = $(this).children('option:selected').data('url');
alert(selectedURL);
$('a.btn-info').prop('href', selectedURL);
});
Use on instead of delegate- it's been superseded.
$(document).on('change','.select', function()
{
$('a.btn-info').prop('href',$(this).attr('data-url'));
$('a.btn-info').prop('id',$(this).children('option[value="'+$(this).val()+'"]').prop('data-id')); });
});
What this does is bind the event "change" to the document instead of the ".select" elements. Then the 2nd argument is a selector which is what the event actually acts on. The 3rd is a typical event handler.
Rather than altering the element's id, which is generally static and unique, I would recommend adding another class instead. You can use .addClass, like so:
$(document).on('change','.select', function()
{
$('a.btn-info').addClass($(this).attr('data-id'));
});
Fiddle: http://jsfiddle.net/8H49X/6/

onchange insert value into hidden input jquery

When i select some data from my option i need the value to be showed when "onchange" the select... can someone help me ?
<select name="search_school" id="search_school" onchange="$('#search_school').val() = $('#school_name').val()">
I want the selected option value to be showed in the hidden input
<input type="hidden" name="school_name" id="school_name" value="" />
I think you want this as your onchange event:
<select name="search_school" id="search_school" onchange="$('#school_name').val($('#search_school').val())">
When you call val() without a parameter, it fetches the value of the element. If you call it with a parameter like val('some value');, it sets the value of the element.
If you can, avoid inline event definition on html:
<select name="search_school" id="search_school">
...
</select>
<input type="hidden" name="school_name" id="school_name" />
$(document).ready(function () {
$('#search_school').change(function () {
$('#school_name').val($(this).val());
});
});
You want something like this, I think:
$("#search_school").change(function(){
$(this).val($("#search_school option:selected").text());
});
To set the selected value to your hidden control you should :
<select name="search_school" id="search_school" onchange="$('#school_name').val($('#search_school').val())">
<script type="text/javascript">
$(document).ready(function() {
$("#search_school").change(
function () {
$('#school_name').attr('value', $("#search_school").val());
}
);
});
</script>

Categories