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'));
});
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.
I want to get the clicked html elements and edit it after some times.
What I tried?
I tried the below one, but I can get the exact html element in html text format, but I can not able to change it. How can I change the value.
var _targetevent;
$( "body" ).click(function( event ) {
_targetevent=event;
console.log( "clicked: " + event.target); //<p>This is the old one</p>
});
function undateit()
{
_targetevent.target="<b>This is the new div</b>";
}
1.Call undateit() inside click()
2.Use innerHTML along with _targetevent.target
Example:-
var _targetevent;
$( "body" ).click(function( event ) {
_targetevent=event;
console.log( "clicked: " + event.target.id); //get id of the clicked element
undateit(); //call function on click
});
function undateit(){
//use outerHTML to completly replace div with new-one
_targetevent.target.outerHTML="<b>This is the new div</b>";
/* if you want to change only content inside element then use inner HTML
_targetevent.target.innerHTML="<b>This is the new div</b>"; //use innerHTML
*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="mydiv">Check change</div>
</body>
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;
}
I use the serializeArray() method to get the HTML form as JS object. When the form has a select control with "multiple" options but no option is selected the object is not serialized.
Here is an example: https://fiddle.jshell.net/tfzxmr9d/1/
It works fin when it has one or more values. It should return an object with the control name and empty or null value. Is it working as expected ?
It seems you forgot about $(function(){}); ready syntax. Your code may looks like that. Because jQuery in your case maybe not ready.
$(function(){
function showValues() {
var fields = $( ":input" ).serializeArray();
$( "#results" ).empty();
jQuery.each( fields, function( i, field ) {
$( "#results" ).append( field.name + ": " + field.value + "<br>" );
});
}
$( ":checkbox, :radio" ).click( showValues );
$( "select" ).change( showValues );
showValues();
});
This is to be expected with no valid results. To change this behavior add this line right after fields is initialized:
fields = fields || [{name: 'multiple', value: 'Null'}];
if(!fields.some(function(element){return element.name === "multiple"})){
fields.push({name: 'multiple', value: 'Null'});
}
https://fiddle.jshell.net/tfzxmr9d/2/ I can't think of a way around checking the whole array for a 'multiple' so there you go.
But you should probably modify your server-side code to accept the default output since that's the normal way HTML forms are serialized.
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.