Get element name?

Does anyone know of a way to get an element’s name with javascript/jquery?

From something like this:


<input type="checkbox" name="434_checkBox" />
<input type="text" name="434_date" />

Ultimately, I need the checkbox, when checked, to update a text field with today’s date. But, I’m trying to use this in conjunction with ASP, so the names are dynamically changing depending on the record.

So it’ll loop through all the records with this:


<input type="checkbox" name="<%=RecordID%>_checkBox" onClick="todaysDate();"/>
<input type="text" name="<%=RecordID%>_date" />

And end up looking like this:


<input type="checkbox" name="434_checkBox" onClick="todaysDate();"/>
<input type="text" name="434_date" />

<input type="checkbox" name="435_checkBox" onClick="todaysDate();"/>
<input type="text" name="435_date" />

:injured: Oy! What a headache!

Thanks for any advice you may have.


    $(function() {
        $('input[type="checkbox"]').click(function() {
            alert($(this).attr('name'));
        });
    });

This very simple jQuery script makes all checkboxes, when clicked, alert their name.
Is that something like what you need?

<head>
    <script>
		function todaysDate (checkbox) {
			var checkboxName = checkbox.name;
			var textName = checkboxName.substring (0, 4) + "date";
			var textInput = document.getElementsByName (textName)[0];

			var date = new Date ();
			textInput.value = date.toDateString ();
		}
	</script>
</head>
<body>
	<input type="checkbox" name="434_checkBox" onClick="todaysDate(this);"/>
	<input type="text" name="434_date" />

	<input type="checkbox" name="435_checkBox" onClick="todaysDate(this);"/>
	<input type="text" name="435_date" />
</body>

References:
name property,
getElementsByName method,
Date object,
onclick event,
substring method.

I think this is close to what I need, but I need to be able to call a function individually though. So, if someone clicks one checkbox it will grab the name of the textbox associated with it only. Not all names of all checkboxes.

Do you think something like this might work?
(as you can see I’m no jQuery expert):


$.fn.todaysDate = function() {
   $('input[type="checkbox"]').click(function() {
      var value = $(this).attr('name');
      $(value).text();
      value.replace("_checkBox", "_date");
   });
}

That code can be made far simpler than that.

var inp = document.getElementsByTagName('input]);
for (var i=0, ii = inp.length; i < ii; i++) {
if (inp[i].type=='checkbox') alert(inp[i].name);
}

That’s a saving of over 70k in the amount of code required and it does exactly the same thing only faster.

[QUOTE=gumape;4671051]


function todaysDate (checkbox) {
	var checkboxName = checkbox.name;
	var textName = checkboxName.substring (0, 4) + "date";
	var textInput = document.getElementsByName (textName)[0];

	var date = new Date ();
	textInput.value = date.toDateString ();
}

That would work, too; however, the only problem I see is with the [checkboxName.substring (0, 4)]. My ID numbers can be anywhere from 1 to 10 digits long.

		function todaysDate (checkbox) {
			var checkboxName = checkbox.name;
			var postfixLen = "checkbox".length;	// 8
			var textName = checkboxName.substring (0, checkboxName.length - postfixLen) + "date";
			var textInput = document.getElementsByName (textName)[0];

			var date = new Date ();
			textInput.value = date.toDateString ();
		}

I keep getting an error: “checkbox is undefined”. I’m assuming it’s the “checkbox” in the

var checkBoxName = checkbox.name;

About to try out the jQuery code. I’ll get back with you.

<head>
    <script>
		function todaysDate (checkbox) {
			var checkboxName = checkbox.name;
			var postfixLen = "checkbox".length; // 8
			var textName = checkboxName.substring (0, checkboxName.length - postfixLen) + "date";
			var textInput = document.getElementsByName (textName)[0];

			var date = new Date ();
			textInput.value = date.toDateString ();
        }
    </script>
</head>
<body>
    <input type="checkbox" name="434_checkBox" onClick="todaysDate(this);"/>
    <input type="text" name="434_date" />

    <input type="checkbox" name="435_checkBox" onClick="todaysDate(this);"/>
    <input type="text" name="435_date" />
</body>

I think the ‘this’ is missing from your source code (onClick=“todaysDate(this);”).

You were absolutely right. :weyes:

Thanks for that. It worked. :tup:

Now, how can I clear the textinput if the box becomes unchecked?
I’ve worked this up from what we’ve got so far:


function todaysDate(checkbox){
	var checkboxName = checkbox.name;		// Get checkbox's name
	var postfixLen = "checkbox".length; 	// Get checkbox's length
	var textName = checkboxName.substring(0, checkboxName.length - postfixLen) + "date";	//subtract 'checkBox' & add 'date'
	var textInput = document.getElementsByName(textName)[0];	// Set textbox name appropriately
	
	if (!checkboxName.checked){
		// Gets/Sets today's date (M/D/YEAR) into textinput
		var date = new Date ();
		var m = date.getMonth();
		var d = date.getDate();
		var y = date.getFullYear();
		var newDate = m + "/" + d + "/" + y;
		textInput.value = newDate;
	} else {
		textInput.value = "";	// Would like this to clear the textinput when unchecked
	}
}

Thanks again for helping me on this, everyone! :slight_smile:

True, but if you’re using jQuery anyway why not use it for this too?

Would anyone know of a way to replace the text “checkBox” with the text “date” using jQuery? I don’t know how to exactly. Also, how can I get the text box value to add today’s date to it?

The only reason I ask about using jQuery is because if jQuery can allow me to clear a text field upon the check box associated with it being unchecked, then I’ll use it. Otherwise, the javascript I have is working great (minus the unchecking of check boxes, that is).

Here’s what I have right now. but doesn’t work other than for getting the name attribute properly.


$(function() {
	$('input[type="checkbox"]').click(function() {
		var value = $(this).attr('name');
		alert(value);
		$(value).text();
		value.replace("checkBox","date")
		alert(value);
	});
});

  1. the javascript replace() function does not modify the string itself, but returns the new modified string.

  2. I don’t understand the need the statement: $(value).text();

Here is my corrected version of the code


$(function() {
	    $('input[type="checkbox"]').click(function() {
	        var value = $(this).attr('name');
	        value = value.replace("checkBox","date");
	        var myDate = new Date();
	        var day = myDate.getDate();
	        var month = myDate.getMonth() + 1;
	        var year = myDate.getFullYear();
	        var date = day+'/'+month+'/'+year;
	        $("input[type='text'][name='"+value+"']").val(date);
	    });
	});

enjoy ! :slight_smile:

Thank you, wolken! That jQuery version is great & works.

And, to be honest, I am still learning it, so I don’t remember what I was doing with the $(value).text(); anymore… :stuck_out_tongue: Thanks for explaining the replace() function.

Now, I’m still working on finding a way to clear a text box when the checkbox is unchecked. Any ideas? I’m still looking on my end, too.

Thanks.

Can you pls show me the html code of the checkbox and textbox ? or is it the same ones ?

It’s the same.


<input type="checkbox" name="434_checkBox" />
<input type="text" name="434_date" />

<input type="checkbox" name="435_checkBox" />
<input type="text" name="435_date" />


$(function() {
    $('input[type="checkbox"]').click(function() {
    		
    	  	var value = $(this).attr('name').replace("checkBox","date");
    	  	
	    	if($(this).attr('checked'))
	    	{
		        var myDate = new Date();
		        var date = myDate.getDate()+'/'+myDate.getMonth()+'/'+ myDate.getFullYear();
		        $("input[type='text'][name='"+value+"']").val(date);
	    	}
	    	else{$("input[type='text'][name='"+value+"']").val("");}
    });
});

Try this instead of the one i sent before.

Sorry the date isn’t correct.

Correction:



$(function() {
    $('input[type="checkbox"]').click(function() {
    		
    	  	var value = $(this).attr('name').replace("checkBox","date");
    	  	
	    	if($(this).attr('checked'))
	    	{
		        var myDate = new Date();
		        var date = myDate.getDate()+'/'+(myDate.getMonth()+1)+'/'+ myDate.getFullYear();
		        $("input[type='text'][name='"+value+"']").val(date);
	    	}
	    	else{$("input[type='text'][name='"+value+"']").val("");}
    });
});

Ah, pure genius!

Thanks, wolken!

Thanks everyone for your help!