We Keep Coding

Get the id of input using it's name

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" />

How do I change the value of input elements with a date ? val()/attr()/change() not working

I have a date selection element
#Html.RadioButton("radioTimeFilter", "range", false) Date Range
<span id="dateRangeControls" style="display:none;">
<input id="txtDateOneFilter" type="text" style="width: 70px;" value="test" #*placeholder="Start Date"*# /> to
<input id="txtDateTwoFilter" type="text" style="width: 70px;" value="test" #*placeholder="End Date"*# />
</span>
and on document ready i'm trying to set these values being passed from another page
$(document).ready(function () {
$("#timeFilter").val("#ViewBag.timeFilter").change();
console.log("#ViewBag.dateStart");
console.log("#ViewBag.dateEnd");
// below fails
$("#txtDateOneFilter").attr("value", '#ViewBag.dateStart');
$("#txtDateTwoFilter").attr("value", '#ViewBag.dateEnd');
//
$("#ddlDistrictFilter").val("#ViewBag.districtId").change();
});
i've tried .val() and using .change() and a bunch of other things. Nothing seems to work. How can I change these values after the page loads

Check out this example:
https://stackblitz.com/edit/js-ptckvo
Copy the code and modify the dateOne and dateTwo values with the ViewBag (keep the quote marks inside the val):
$(document).ready(function() {
$("#txtDateOneFilter").val('#ViewBag.dateStart');
$("#txtDateTwoFilter").val('#ViewBag.dateEnd');
});
If it doesn't work, maybe the problem is in the ViewBag values.

Get the id of html page in jQuery?

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

Enable checkbox if text field is not empty with inconsistent id

Purpose is to have checkboxes disabled when the page loads, and remain greyed out until textbox is filled.
<input type="text" name="<%=commentID%>" />
<input type="checkbox" name="<%=SkipID%>" value="N" disabled/>
I tried to do something like
<input type="text" name="<%=commentID%>" onkeyup="userTyped('<%=SkipID%>') />
function userTyped(commen){
if(this.value.length > 0){
document.getElementById(commen).disabled=false;
}else{
document.getElementById(commen).disabled=true;
}
}
But it did not work. I am assuming because of the inconsistency of the name, but I have to have that.

You haven't given id to your html elements and is trying to use getElementById, which will return null. Javascript engine will not be able to set disabled attribute of null. Try setting id attribute, for elements as given below.
Also in your userTyped function you are referencing this. this here is the window object and not the input element. You need to pass the reference to input element to make this work, like this onkeyup="userTyped('<%=SkipID%>', this)"
Please find a possible correction below:
<input type="text" name="<%=commentID%>" id="<%=commentID%>" onkeyup="userTyped('<%=SkipID%>', this)" />
<input type="checkbox" name="<%=SkipID%>" id="<%=SkipID%>" value="N" disabled/>
/** commen is the id
* e is the input element
**/
function userTyped(commen, e){
if(e.value.length > 0){
document.getElementById(commen).disabled=false;
}else{
document.getElementById(commen).disabled=true;
}
}
jsFiddle here: http://jsfiddle.net/deepumohanp/dGS9H/

retrieving text field value using javascript

I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?

You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}

Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;

One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}