I make input form using static row in 7 rows. How can I get selected value in each textbox when drop down list selected? I tried to use jQuery to do it, but my code is getting error (all textbox changed). So, below is my jQuery code:
<script>
$(document).ready(function() {
$('[name="nm_pot_part_shortage[]"]').on('change', function() {
$('[name="nm_maker[]"]').val($(this).val());
});
});
</script>
Image of my form:
You must escape bracket notation by using double slashes for selector having name like $('[name="nm_pot_part_shortage\\[\\]"]'), otherwise you will get an error, see following code :
$( '[name=nm_pot_part_shortage\\[\\]]' ).on( 'change', function () {
// get current value
var selectVal = $( this ).val();
// find the input by traversing up the parent first using .closest()
// and use .find() to find particular input exist on the same rows with
// select element, so this never go down to match another input exist on
// another rows
$( this ).closest( 'tr' ).find( '[name=nm_maker\\[\\]]' ).val( selectVal );
});
DEMO(example given were using table)
Better case is just give all the select and input with the same class name for each element. As example give class name myselect to select element and myInput for input element, at the end JS code would be :
$('.mySelect').on('change', function () {
var selectVal = $( this ).val();
$( this ).closest( 'tr' ).find( '.myInput').val(selectVal);
});
Native Javascript:
1) Give each dropdown an ID. This can be done in the HTML or dynamically in javascript.
2) Assign a function to each dropdown for an onclick event.
3) Retrieve the value as such:
function dropdownClicked(){
var ID = this.id;
var element = document.getElementById(ID);
var value = element.value;
}
Related
I am trying to loop over all forms on a page, then see if they have a "missing-field" data variable. Once found, I then want to highlight that field.
Currently I have it working to detect if the data var exists, but now I can't quite get it right where I see if a field with that name exists. Pointers appreciated.
Here is what I have so far:
$( "form" ).each(function( index )
{
if (undefined !== $( this ).attr('data-missing') && $( this ).attr('data-missing').length)
{
field_name = $( this ).attr('data-missing');
if ($( this + " input:text[name="+field_name+"]").length)
{
alert('this part isnt working...');
}
}
});
To query any DOM element with a specific name in JQuery, you can just do this:
$('[name="field_name"]')
To query an element which is a child of another element, you can use this syntax:
$('parent > child')
So your code would be:
...
field_name = $( this ).attr('data-missing');
if ($( `${field_name} > input:text[name="${field_name}"]`).length)
{
alert('Value missing');
}
field_name needs to be a selector of some sort. I don't know what the contents of data_missing are, but they'd need to be an id (like #form1) or something similar.
As you can see on these photos, I have made an onclick event that checks the value of the first input text field . Even if I change it, it will still give the old value.
Here is my function:
$(document).on('click','#editcustomer-btn-save',function(e) {
var x = $('#id1').val();
console.log(x);
e.preventDefault();
return false;
});
I note your edit screen appears to be in a modal.
Make sure that in your DOM there aren't two IDs with the same name. (One in your main page, and one in the modal)
Are you sure that it doesn't upgrade ?
Try with this
function displayVals() {
var x= $( "id1" ).val();
console.log(x);
}
$( "input" ).change( displayVals );
displayVals();
Please help me.
I want to detect the tapping on td. But I also need to get the one of the p tag (cal_date) value when tapped.
How can I get the cal_date value?
JQUERY CURRENT CODE:
$( document ).on ( "tap", "td", function(event) {
//code here
// i want to get the cal_date value in this block
});
I can't not use this way, because it will only can detect tap on the p.cal_date tag, not on the td tag...
$( document ).on ( "tap", ".cal_date", function(event) {
});
HTML:
<td><p class="cal_date" id="">7</p><br><p class="cal_rooms">16</p></td>
Find the .cal_date element inside the tapped TD, and get it's text
$(document).on ("tap", "td", function(event) {
var value = $(this).find('.cal_date').text();
});
Inside the tap handler this refers to the tapped tdelement, so you can use .find() to get the cal_date element within it
$(document).on("tap", "td", function(event) {
//code here
// i want to get the cal_date value in this block
var cal_date = $(this).find('.cal_date').text()
});
What I'm trying to achieve is get an attibute from another attribute in the same element. For example:
<script>
$("#step1").click(function() {
// Get the attribute 'next' and get its value.
});
</script>
<button id="step1" next=".openNextModal">
Your need to use attr()
<script>
$("#step1").click(function() {
// Get the attribute 'next' and get its value.
var next = $( this ).attr( 'next' );
//if you are looking for next attribute value of the next element
console.log( $( next ).attr( 'next' ));
//if this is an input element and you are looking for its value
console.log( $( next ).val());
//if this is an not input element and you are looking for its html
console.log( $( next ).html());
});
</script>
Try like following.
$("#step1").click(function() {
console.log($(this).attr('next'));
});
I would like to get the value of an input and return it to a span. I would like to update the span each time the input is changing. The problem is that i will use it for a colorpicker so the user will not usualy write the color value(maybe paste it). So everytime the input textfield will be updated by the colorpicker js i want to update my own field.
I created a simple code to help you understand what i want to do.
Pressing the + you will change the value of the input field and i would like to get that value and print it in the span. Thank you.
HTML ::
<div>
<input type="text" class="mariinsky" /><button id="inside">+</button>
</div>
<button id="outside">Button</button><br />
input value = <span></span>
JS ::
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( '.mariinsky' ).change( function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
http://jsfiddle.net/existence17/9V8ZU/1/
Add .change() to the end of your '+' handler:
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i).change();
i++;
});
That will force the change event to fire and then your code will update the span.
For live DOM changes, use the jQuery on function - the following code would work in your case:
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( 'button#inside' ).on('click', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
jQuery doesn't automatically trigger events through code. You need to do so manually using the .trigger() method.
Adding one line did it for me: jQuery('.mariinsky').trigger("change").
Here's a working example: http://jsfiddle.net/9V8ZU/2/
Also a useful question for reference: How to trigger jQuery change event in code
please use this :
$( '.mariinsky' ).on('keypress keyup keydown click copy cut paste', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
Fiddle example
all the rest of the provided answers aren't covering the entire options.