We Keep Coding

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');
}
});
});

Capture span value using jquery

Hello Everyone I want to capture price from this span using jquery how can i achieve this please suggest something
<span class="amount"><i class="fa fa-inr"></i>1,000</span>
DropDown:
<li class="tmcp-field-wrap">
<label for="tmcp_select_1">Select</label>
<select class="tmcp-field support-layer-firmness tm-epo-field tmcp-select tm-valid" name="tmcp_select_0">
<option value="Select Firmness_0" class="tc-multiple-option tc-select-option" data-price="">Select Firmness</option>
<option value="Soft_1" class="tc-multiple-option tc-select-option" data-price="1000">Soft</option>
<option value="Medium_2" class="tc-multiple-option tc-select-option" data-price="1500">Medium</option>
<option value="Hard_3" class="tc-multiple-option tc-select-option" data-price="2000">Hard</option>
</select>
<span class="price tc-price hidden">
<span class="amount"><i class="fa fa-inr"></i>1,000</span>
</span>
Now i want to get value using onchange event
I have tried so far
$(".support-layer-firmness .tc-price span").on("change", function() {
var price = $('span.amount').text();
alert(price);
});

You can capture the text by using jquery Class Selector
$('span.amount').text(); // output 1,000
Class Selector: Selects all elements with the given class. Reference
As per comment if you want to get the same span value onChange event then try this.
Method 1
$('select').on('change', function() {
$('span.amount').text();
});
Method 2
You can use also class for selecting the select element
$('select.tmcp-field').on('change', function() {
$('span.amount').text();
});

use jquery selector using class name
$(".amount").text();
https://jsfiddle.net/mc7h22f7/

Please check this demo
You can easily get span value as follow.
On Change you can do something like this
$('.tmcp-select').on('change', function (e) {
alert($('span.amount').text());
});
OnChange Example

jQuery how to dynamically add select element and reset choice?

I am writing a dynamic form in the Play Framework, but I'm not very experienced with javascript. I'm trying to build off of this jQuery example that allows the dynamic addition of fields. Instead of adding only a text field, I want to add a text field and a select box each time. The tricky part is that even if there is a selected item, I want the dynamically added select box to be reset.
Here is my attempt to do this, using this answer
$('.multi-field-wrapper').each(function() {
var $wrapper=$('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
var obj=$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
// This following line is incorrect...
obj.find('.blank').prop('selected', true).end().trigger('chosen:updated');
}
);
$('.multi-field .remove-field',
$wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1) $(this).parent('.multi-field').remove();
}
);
}
);
<form role="form" action="/wohoo" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div>
<input type="text" name="stuff[]"/>
</div>
<div>
<select>
<option class="blank" value="">Select a car</option>
<option value="saab">Saab</option>
<option value="mercedes" selected>Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
Since it uses the clone() function, if "Mercedes" is selected, then dynamically added select dropdowns will also have "Mercedes" selected. How can I make the new selects display the blank choice?
Thanks!
EDIT - updated my code to reflect the fact that my input and select tags are encapsulated by divs

The "obj" variable becomes the input node selected in the end of this expression:
var obj = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
But you should do the trick with select node, in your case it is "obj"`s sibling.
obj.siblings('select').find('.blank').prop('selected', true).end().trigger('chosen:updated');});
http://jsfiddle.net/xogeufa2/1/
Also, if "input" and "select" nodes are enveloped in div tags, they loose their sibling relations. So in this case, you should find another way, to get the "select". For example, through parents:
obj.closest('.multi-field').find('select').find('.blank').prop('selected', true).end().trigger('chosen:updated');
});
http://jsfiddle.net/2ymd7ug7/2/

You just needs to remove the attribute selected from the option tag.
For that you can use removeAttr method
Here is the complete code that does what you described.
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
var obj = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').end().find('option').removeAttr('selected').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
Just added .end().find('option').removeAttr('selected') to your code :)
I hope I helped..
Find the code here : https://jsfiddle.net/yrchyndk/

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>