20 replies to this topic

[BlaineSch]

These guys are really bugging me.

I'm trying to make a script that will get all elements by tag name "input", I then proceed to put a border around them all so they are easy to point out. I have noticed checkboxes do not all much of anything in FireFox. In IE I can get a border and padding etc but FireFox hates me.

Is there anyway I can make the checkbox more noticable? I was thinking about putting in inside of a div with padding and a background but how would I do that if I just have the element by it's id? I'm not a huge fan of JS, but it seems I need to put up with it lol.

[Vswe]

Can't you just give the div around it an id and get it by document.GetElementByID?

[BlaineSch]

The user is uploading a HTML file, I am adding a script that will find all the form fields. I can find them already now but I want them to name them all which means they have to identify them, so I am trying to add borders or something around them all.

[Vswe]

With form fields you mean all fields in a <form> or all <form>s?

[BlaineSch]

Form fields as in input, select, textarea. But I'm focusing on checkboxes because all the others allow css backgrounds/borders.

[Vswe]

Can't you do something like this:

myField = document.GetElementByID("the_id");
myField.outerHTML = "<div style='Styles here'>" + myField.outerHTML + "</div>";

I haven't tried it and I'm not sure it works, it was just a thought.

[BlaineSch]

outerHTML? Exactly what I was looking for buddy!

Like I said, I'm no pro in JS lol, I never knew this existed lol.

+Rep!

[Vswe]

If I were you I would try it before being so happy but I think it will work.

I'm not a pro on JS either but I worked with it almost the whole time from lunch to past midnight yesterday :P

Happy to help :D

[BlaineSch]

Worked perfect in IE but FF it did not, but I found a site that had a neat script to enable it. Also tested in Safari.

outerHTML in Firefox - JavaScript - Snipplr

[Vswe]

Nice :thumbup1:

[BlaineSch]

Another issue now...

Lets say I have 3 input checkboxes in the same "td" element. When you call them by tag name the element at place 0 is the 0th element obviously but when I alter it, it moves down to the bottom moving 1 and 2 up, so the 1st element is now the 2nd and when it moves that to the bottom it goes through the last one twice and the second one never.

I tried making an array of id's then going back and changing them, and that worked great, but what if I had text next to a checkbox? The checkbox is appended so it always goes to the bottom.

<style>

div.one {

	background: blue;

	padding:3px;

}

</style>

<table>

<tr>

	<td>API</td>

</tr>

<tr>

	<td>

		abc

		<input type="checkbox" name="helloworld1">

		def

		<input type="checkbox" name="helloworld2">

		ghi

		<input type="checkbox" name="helloworld3">

	</td>

</tr>

</table>

<script>

function update(id) {

	var data = document.getElementById(id); //gets element

	var parent = data.parentNode; 

	var el = document.createElement(parent.tagName); //el

	el.appendChild(data);	

	var newdiv = document.createElement('div'); //objet to surround it

	newdiv.className = "one";

	newdiv.innerHTML = el.innerHTML+"One";

	parent.appendChild(newdiv);

}

var bs = 0;

var data = document.getElementsByTagName("input");

for (var i = 0; i < data.length; i++) { 

	data[i].id="bsBetavs10"+bs; //gets element

	bs++;

	

}

for(i = 0;i<bs;i++) {

	update("bsBetavs10"+i);

}

</script>

[Vswe]

But their order doesn't change when I'm testing it, or did I get your problem wrong?