I want to get the id of input using it's name,and to empty the input field.But it's not working.Is it possible?
html:
<input type="text" id="1" name="Color" maxlength="2" />
jQuery:
var myId="#";
myId=myId + $('[name="Color"]').attr('id');
$($myId).var('');
You can do this:
let id = $('input[name$="Color"]').val('').attr('id');
console.log(id);
$(`#${id}`).val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />
You can set the input value using the val() function.
<input type="text" id="1" name="Color" maxlength="2"/>
var myId='#' + $('[name="Color"]').attr('id');
$(myId).val('');
To get the input value use it like this:
$(myId).val();
Try this code.
const myId = $('input[name="Color"]').attr('id');
$("#"+myId).val(''); // you can set any value here or you can perform any other operations on this element -> $("#"+myId)
On first line of this JS code, we are getting id attribute and then on second line, we're using to manipulate element.
Now, if you want id only for performing some operations on that input element, you don't need to get id. You can also do like this.
let elem = $('input[name="Color"]');
elem.val(''); // only if same name is not used anywhere else.
I hope this helps you.
You can use attr directly to set a value. Moreover there is no need to append #.
let element = $('[name="Color"]');
console.log("before", element.attr('id'));
element.attr('id', null);
console.log("after", element.attr('id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />
Related
Got a number of dynamic values assigned to variables from outside the form. And I need to pass them to form. Now, I could do each field individually like this.
this would be the form
<form>
<input type="text" class="inputfield widthfield" id="widthval" />
<input type="text" class="inputfield fontsizefield" id="fontsize" />
</form>
And this would be jquery
widthval = '300px'
fontsize = '15px'
$(".widthfield").val(widthval);
$(".fontsizefield").val(fontsize);
and so on. But there is a ton of these fields, and this doesn't look right. So, I was wondering if there is any way to use field id to match field and variable.
Something like this perhaps (the logic).
$(".inputfield").each(function(){
matchattr = $(this).attr("id");
$(this).val(matchattr);
});
In this case, it uses the actual value of an attribute. How do I turn that value into variable that has the dynamic value assigned to it?
Thanks!
Given that your variables match the ids of the inputs, you could put your values in an object, loop over the keys, and set them when they match.
var data = {
widthval: '300px',
fontsize: '15px'
};
var $inputfields = $('.inputfield');
Object.keys(data).forEach(function(key){
$inputfields.filter('#'+ key).val(data[key]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" class="inputfield widthfield" id="widthval" />
<input type="text" class="inputfield fontsizefield" id="fontsize" />
</form>
How can you copy an hidden input value attribute, manipulate it and then change it with a click function? To be more precise:
This:
<input type="hidden" id="destination" value="/change1/change2/fixed-part" />
To this:
<input type="hidden" id="destination" value="/changedtext/fixed-part" />
I've made some process but couldn't get the desired result. So far I get the value, manipulate it (not sure if it works alright) but couldn't replace it with the original one.
Here is the jsfiddle:
https://jsfiddle.net/3ry4cc79/1/
Try this,
document.getElementById('destination').value = "/changedtext/fixed-part";
$("button").click(function(event){
event.preventDefault();
$('#destination').val(function() {
return this.value.replace('change1', 'changedtext')
});
alert("Changed Value:"+$('#destination').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="destination" name="_wp_http_referer" value="/change1/change2/fixed-part" />
Try this should work,
<input type="hidden" id="destination2" name="_wp_http_referer" value="/changedtext/fixed-part" />
<button>Click to change the value</button>
// Get the hidden element
let el = document.getElementById('destination');
// Add the new val you want to minipulate the hidden elemets value with
let newVal = 'changedtext';
// then at a later state, you click the button
this.clickToChange = function () {
// and voila, the value is replaced on the hidden element
el.value = el.value.replace('change1/change2', newVal);
}
I am trying to get values from text boxes that are out of a <form> tag.
The three text boxes have the same class name. I want to get their values and use them later.
I am getting error for the alert part in jQuery below.
HTML
<input type="text" class="className">
<input type="text" class="className">
<input type="text" class="className">
jQuery
var $j_object = $(".className");
$j_object.each( function(i){
alert($j_object[i].val())
});
Try to use .eq(index) at this context,
var $j_object = $(".className");
$j_object.each( function(i){
alert($j_object.eq(i).val());
});
Or you can use the this value inside of .each() to simplify the task,
var $j_object = $(".className");
$j_object.each( function(){
alert($(this).val());
});
If you use bracket notation to access the jquery element collection, then that will return plain javascript object. And that won't have jquery functions in its prototype.
You can save the textbox values to array using .map() function in jQuery.
Working Example
var array = $('.className').map(function(){
return $(this).val()
}).get();
alert(array)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="className" value="1">
<input type="text" class="className" value="2">
<input type="text" class="className" value="3">
I have an id on my page from that I have taken all the html by using .html() function in a variable .Now, I want to use the id from the variable in which I have stored the html. How can I do this in jQuery? I am not getting any idea. Please help me in this!
var idhtml= $("#id").html();
Like this, I have the html in idhtml
<input type="text" id="id1" name="id1" value="" class ="test" />
<input type="text" id="id2" name="id1" value="" class ="test" />
<input type="text" id="id3" name="id1" value="" class ="test" />
By idhtml, I want to get the id in the variable.
You can get the IDs like this:
$("input[id^='id']").each(function () {
console.log(this.id);
// Change the id:
$(this).attr("id", "new_id");
});
Select every input with an id that starts with id and for each input returned, print its ID in the console.
You can use .each().
To set the attribute you can use
1) .attr('attribute_name','attribute_value') or
2) .data('attribute_name','attribute_value')
with appropriate selector.
$("[name='id1']").each(function () {
console.log($(this).attr(id));
//to set the attr you can use
$(this).attr('attribute_name','attribute_value');
//to set custom attribute, use .data()
$(this).data('attribute_name','attribute_value');
});
try this
$(document).ready(function(){
var formId = $('form').attr('youId');
});
i have some html code like this
<form name="first"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
<form name="second"><input name="firstText" type="text" value="General" />
<input name="secondText" type="text" value="General" />
<input name="ThirdText" type="text" value="General" />
<input name="FourthText" type="text" value="General" />
<input name="FifthText" type="text" value="General" />
</form>
i want to select "secondText" of form "second" using jquery or javascript and i want to change value of it using jquery.
Using jQuery:
var element = $("form[name='second'] input[name='secondText']");
Using vanilla JS:
var element = document.querySelector("form[name='second'] input[name='secondText']");
Changing the value: element.val(value) or element.value = value, depending of what you are using.
To the point with pure JS:
document.querySelector('form[name=particular-form] input[name=particular-input]')
Update:
This selector will return the input named "particular-input" inside form named "particular-form" if exists, otherwise returns null.
The selector filter "form[name=particular-form]" will look for all forms with name equals "particular-form":
<form name="particular-form">
The selector filter "input[name=particular-input]" will look for all input elements with name equals "particular-input":
<input name="particular-input">
Combining both filters with a white space, I mean:
"form[name=particular-name] input[name=particular-input]"
We are asking for querySelector(): Hey, find all inputs with name equals "particular-input" nested in all forms with name equals "particular-form".
Consider:
<form name="particular-form">
<input name="generic-input">
<input name="particular-input">
</form>
<form name="another-form">
<input name="particular-input">
</form>
<script>
document.querySelector('form[name=particular-form] input[name=particular-input]').style.background = "#f00"
</script>
This code will change the background color only of the second input, no matter the third input have same name. It is because we are selecting only inputs named "particular-input" nested in form named "particular form"
I hope it's more clear now.
;)
By the way, unfortunately I didn't found good/simple documentation about querySelector filters, if you know any reference, please post here.
// Define the target element
elem = jQuery( 'form[name="second"] input[name="secondText"]' );
// Set the new value
elem.val( 'test' );
Try
$("form[name='second'] input[name='secondText']").val("ENTER-YOUR-VALUE");
You can do it like this:
jQuery
$("form[name='second'] input[name='secondText']").val("yourNewValue");
Demo: http://jsfiddle.net/YLgcC/
Or:
Native Javascript
Old browsers:
var myInput = [];
myInput = document.getElementsByTagName("input");
for (var i = 0; i < myInput.length; i++) {
if (myInput[i].parentNode.name === "second" &&
myInput[i].name === "secondText") {
myInput[i].value = "yourNewValue";
}
}
Demo: http://jsfiddle.net/YLgcC/1/
New browsers:
document.querySelector("form[name='second'] input[name='secondText']").value = "yourNewValue";
Demo: http://jsfiddle.net/YLgcC/2/
You can try this line too:
$('input[name="elements[174ec04d-a9e1-406a-8b17-36fadf79afdf][0][value]"').mask("999.999.999-99",{placeholder:" "});
Add button in both forms. On Button click find nearest form using closest() function of jquery. then using find()(jquery function) get all input values. closest() goes in upward direction in dom tree for search and find() goes in downward direction in dom tree for search. Read here
Another way is to use sibling() (jquery function). On button click get sibling input field values.