new JS project...

allworknoplay · 04-24-2009, 12:31 AM

Ok guys, I made myself a pretty cool new JS project and I tried to do it without your help but it's not going anywhere.

You can see it here:

http://www.gatebattle.com/dynamic_row_and_checkbox.html

What I want the user to do is enter a number where it says:
"Enter # of Rows to create:"

Then it will dynamically create rows. I used the onBlur function for the input box...

If they enter 3, it creates 3 rows, but if they then enter 2, it removes one row...

I figured this would be fun to do...there's other things I want it to do too, but I want to try to figure those items out myself, but right now I need to get over this hurdle...

JS:

Code:

<script type="text/javascript">

	// Use this VAR later
	var selected_checkboxes = 0;
	
	/* Default to 1 when page initially loads, must have at least 1 row.
	   Otherwise get number of rows from user input. Value cannot be 0 or negative. */
	if(!document.testform.get_rows_input) var getRow = 1;
	
	// Get input value from user (document.testform.get_rows_input.value) and dynamically create rows
	function addRows(document.testform.get_rows_input.value){
	
			getRow = document.testform.get_rows_input.value
			
			var table = document.getElementById('users');
			var tr    = document.createElement('TR');
			var td1   = document.createElement('TD');
			var td2   = document.createElement('TD');
			var td3   = document.createElement('TD');
			var inp1  = document.createElement('INPUT');
		
		for(i=1;i<=getRow;i++){

			table.appendChild(tr);
    		tr.appendChild(td1);
    		tr.appendChild(td2);
    		tr.appendChild(td3);
			td2.appendChild(inp1);
		}
		
	}

</script>

HTML:

Code:

<table width="1024" border="0" align="center" cellpadding="2" cellspacing="1">
 <form name="testform" action="" method="POST">
  <tr bgcolor="#e0e0e0">
    <td width="152"><div align="right"><span class="style10">Enter # of Rows to create: </span></div></td>
    <td width="78"><span class="style10">
      <label>
      <input name="get_rows_input" type="text" value="1" size="10" maxlength="10" onBlur="addRows(this.value);" />
      </label>
    </span></td>
    <td width="233"><div align="right" class="style10">Maximum selected checkboxes: </div></td>
    <td width="60"><input name="textfield" type="text" size="10" maxlength="10" /></td>
    <td width="469"><div align="center" class="style10">You have selected <span class="style11">
	<script type="text/javascript">
	document.write(selected_checkboxes);
	</script>
	</span> of checkboxes. <span class="style11">
	<script type="text/javascript">
	//document.write(leftover_checkboxes);
	</script>
	</span> left before disabling. </div></td>
  </tr>
  <tr bgcolor="#e0e0e0">
    <td bgcolor="#e0e0e0"><div align="right" class="style12">default is 1 </div></td>
    <td>&nbsp;</td>
    <td><div align="right" class="style12">choose how many to selected <br />
      before disabling the rest!</div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </form>
</table>
<p>&nbsp;</p>

<table width="1024" border="0" align="center" cellpadding="4" cellspacing="1">
  <tbody id="users">
  <tr bgcolor="#EEEEEE">
    <td width="41" bgcolor="#EEEEEE">#</td>
    <td width="41"></td>
    <td width="735">Name</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="checkbox" name="checkbox" value="checkbox" onClick="countMe();" /> </td>
    <td>John Doe </td>
  </tr>
   </tbody>
</table>

It's probably easier though to just go to my site and view the page source maybe??

Kalle · 04-24-2009, 08:53 AM

When accessing the link I get a syntax error and an undefined variable notice:

Code:

Detaljer om fejl på websiden

Brugeragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30618; .NET CLR 3.5.21022; .NET CLR 3.5.30729)
Tidsstempling: Fri, 24 Apr 2009 08:51:23 UTC


Meddelelse: Tegnet ')' var ventet
Linje: 16
Tegn: 27
Kode: 0
URI: http://www.gatebattle.com/dynamic_row_and_checkbox.html


Meddelelse: 'selected_checkboxes' er ikke defineret
Linje: 65
Tegn: 2
Kode: 0
URI: http://www.gatebattle.com/dynamic_row_and_checkbox.html

Translated:

The character ')' was expected, line 16, character 27
'selected_checkboxes' is not defined, line 65, character 2

allworknoplay · 04-24-2009, 03:08 PM

Quote:

Originally Posted by Kalle

When accessing the link I get a syntax error and an undefined variable notice:

Code:

Detaljer om fejl på websiden

Brugeragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30618; .NET CLR 3.5.21022; .NET CLR 3.5.30729)
Tidsstempling: Fri, 24 Apr 2009 08:51:23 UTC


Meddelelse: Tegnet ')' var ventet
Linje: 16
Tegn: 27
Kode: 0
URI: http://www.gatebattle.com/dynamic_row_and_checkbox.html


Meddelelse: 'selected_checkboxes' er ikke defineret
Linje: 65
Tegn: 2
Kode: 0
URI: http://www.gatebattle.com/dynamic_row_and_checkbox.html

Translated:

The character ')' was expected, line 16, character 27
'selected_checkboxes' is not defined, line 65, character 2

Wow that's weird...is that Firefox you are using?

Line 16 is this..

function addRows(document.testform.get_rows_input.value){

So don't laugh at the code, I know that's wrong, but everything is closed off?

I'll remove the paramater so it is just the function...let me know if that works for you....

function addRows(){

Tanax · 04-24-2009, 03:44 PM

getRow = document.testform.get_rows_input.value

should be

getRow = document.testform.get_rows_input.value;

Not sure if that's the problem though.

Kalle · 04-24-2009, 03:48 PM

I don't use Firefox, see my user agent (its IE), and your code is wrong, because what your code is saying is basiclly this in php:

PHP Code:


			
function addRows($document->testform->get_rows_input->value) {

Which is incorrect, as you need to name the variable and not the way that its meant to be passed when the function is called, so the error comes from that a ')' is expected when the browser reaches the '.'

allworknoplay · 04-24-2009, 04:14 PM

Ok, I think I am getting some where. I can at least make it dynamically create a new row when I click off the input box.

So the onBlur() is working at least.

Getting close!

http://www.gatebattle.com/dynamic_row_and_checkbox.html

BTW: I tested this in both IE and FF and it works...

Kalle · 04-24-2009, 04:37 PM

You're getting somewhere, but still not working in IE for me:

Code:

Detaljer om fejl på websiden

Brugeragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30618; .NET CLR 3.5.21022; .NET CLR 3.5.30729)
Tidsstempling: Fri, 24 Apr 2009 16:33:03 UTC


Meddelelse: 'document.testform.get_rows_input' er null eller ikke et objekt
Linje: 13
Tegn: 2
Kode: 0
URI: http://www.gatebattle.com/dynamic_row_and_checkbox.html

'document.testform.get_rows_input' is null or not an object, line 13, character 2

Also you're code is wrong when I'm typing a number, then it will just insert one row, so if I remove whats in the field, deslect it and select it and repeat, +1 row will be added with no data, just empty cells. The maximum selected checkboxes and current selection does not work either, but that might be due to the error above about get_rows_input is null

;)

allworknoplay · 04-24-2009, 05:00 PM

Quote:

Originally Posted by Kalle

You're getting somewhere, but still not working in IE for me:

Code:

Detaljer om fejl på websiden

Brugeragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30618; .NET CLR 3.5.21022; .NET CLR 3.5.30729)
Tidsstempling: Fri, 24 Apr 2009 16:33:03 UTC


Meddelelse: 'document.testform.get_rows_input' er null eller ikke et objekt
Linje: 13
Tegn: 2
Kode: 0
URI: http://www.gatebattle.com/dynamic_row_and_checkbox.html

'document.testform.get_rows_input' is null or not an object, line 13, character 2

Also you're code is wrong when I'm typing a number, then it will just insert one row, so if I remove whats in the field, deslect it and select it and repeat, +1 row will be added with no data, just empty cells. The maximum selected checkboxes and current selection does not work either, but that might be due to the error above about get_rows_input is null

;)

My bad, that line didn't have an ending ";"..so I just added it..

The only part I'm working on right now is getting it to dynamically generate rows...everything else doesn't work...

I don't even have code for the rest...

So now that I can get it to at least make rows, I have to find a way to get the user input value and add it to the FOR loop so it will generate N number of rows based on the input...

fun stuff!!

allworknoplay · 04-24-2009, 05:12 PM

Ok, getting somewhere, now if you enter 7, it creates 7 rows...

3...3 rows...

5...5 rows....

etc....

The only issue is that it only ADDS rows...

So if i already have 5 rows and I enter 2, it adds up to 7 instead of shrinking to 2 rows....

So now I will have to work on the deleting function.....

Tanax · 04-25-2009, 12:04 AM

Quote:

Originally Posted by Tanax

getRow = document.testform.get_rows_input.value

should be

getRow = document.testform.get_rows_input.value;

Not sure if that's the problem though.

Quote:

Originally Posted by allworknoplay

My bad, that line didn't have an ending ";"..so I just added it..

Do you even read what I post?

allworknoplay · 04-25-2009, 02:19 AM

Quote:

Originally Posted by Tanax

Do you even read what I post?

LOL yes, but I saw the error before I saw what you posted....

But you get credit...

Still waiting for this JS stuff to sink in...it's only been about 2-3 days I even started reading how to code in JS....

Kalle · 04-25-2009, 06:09 AM

Alot more errors now, I think you will be better off using a framework to do the basics across browsers: document.write(countMe); -- that just prints the code thats in the function "countMe".

Your counter function seems wrong, as you name all of them 'checkbox', so something alon the lines of:

javascript Code:

function checkbox_count()
{
    var retval = 0;

    for(var x in document.getElementsByName('checkbox'))
    {
        if(x.checked)
        {
            ++retval;
        }
    }

    return(retval);
}

allworknoplay · 04-25-2009, 02:25 PM

Quote:

Originally Posted by Kalle

Alot more errors now, I think you will be better off using a framework to do the basics across browsers: document.write(countMe); -- that just prints the code thats in the function "countMe".

Your counter function seems wrong, as you name all of them 'checkbox', so something alon the lines of:

javascript Code:

function checkbox_count()
{
    var retval = 0;

    for(var x in document.getElementsByName('checkbox'))
    {
        if(x.checked)
        {
            ++retval;
        }
    }

    return(retval);
}

I know, I apologize, I just feel if I try to use any framework right now, I won't really learn the basics of JS.

Do you have your browser set to some kind of strict coding or something? I am viewing this in both IE and FF and it reveals no errors at all?

Heck, I'm even trying it out on Safari too and no errors pop up?

As for the output for "countMe", That I do I see...I was messing around with my code and it got late at night and I just left it there.....

allworknoplay · 04-25-2009, 03:03 PM

Why the heck is my code being printed to the screen? I am using the latest code that Kalle provided. And I am printing it out like this:

Code:

<script type="text/javascript">
	document.write(checkbox_count);
	</script>

Kalle · 04-25-2009, 05:21 PM

Quote:

Originally Posted by allworknoplay

I know, I apologize, I just feel if I try to use any framework right now, I won't really learn the basics of JS.

If you know the basics of PHP then you mostly also know the ground of JS, except a few rules (like in my next reply), the inheritance of globals, variables, the "for(y in x)" syntax and the more loosely callable syntax like: "function(){ alert(/Hey/); }();".

What a framework however gives you is an abstract interface to talk to the browser via DOM. So by using a framework you will still get to learn the JS syntax, but the DOM part will be mostly abstract and you won't learn how each browsers interact and works, which isn't important for now until you get the base gasp of it.

Kalle · 04-25-2009, 05:26 PM

Quote:

Originally Posted by allworknoplay

Why the heck is my code being printed to the screen? I am using the latest code that Kalle provided. And I am printing it out like this:

Code:

<script type="text/javascript">
	document.write(checkbox_count);
	</script>

Thats because checkbox_count is a function, and if you pass a function as a variable (a closure, I think Salathe covered this in a post of his) then it will print the closure's source. so I think what You want is to use:

javascript Code:

document.write(checkbox_count());

Assuming that checkboxes_count() ofcourse returns a numeric value for use here.

Instead of using document.write, you can always do a:

HTML Code:

<p>Times clicked: <span id="count">0</span></p>
<input type="button" onclick="++document.getElementById('count').innerHTML;" value="Bingo!" />

And have a <span> or <div> with an id/name given and then update the value which avoids embedding these <script> tags and then makes the code much cleaner and easier to work with.

allworknoplay · 04-25-2009, 05:37 PM

Quote:

Originally Posted by Kalle

If you know the basics of PHP then you mostly also know the ground of JS, except a few rules (like in my next reply), the inheritance of globals, variables, the "for(y in x)" syntax and the more loosely callable syntax like: "function(){ alert(/Hey/); }();".

What a framework however gives you is an abstract interface to talk to the browser via DOM. So by using a framework you will still get to learn the JS syntax, but the DOM part will be mostly abstract and you won't learn how each browsers interact and works, which isn't important for now until you get the base gasp of it.

Yeah you threw a new one at me...

Code:

"for(y in x)"

I will go ahead and read up on Mootools....I'll go with your suggestion and hope in the process the fundamentals of JS don't escape me...

allworknoplay · 04-25-2009, 05:41 PM

Quote:

Originally Posted by Kalle

Thats because checkbox_count is a function, and if you pass a function as a variable (a closure, I think Salathe covered this in a post of his) then it will print the closure's source. so I think what You want is to use:

javascript Code:

document.write(checkbox_count());

Assuming that checkboxes_count() ofcourse returns a numeric value for use here.

Instead of using document.write, you can always do a:

HTML Code:

<p>Times clicked: <span id="count">0</span></p>
<input type="button" onclick="++document.getElementById('count').innerHTML;" value="Bingo!" />

And have a <span> or <div> with an id/name given and then update the value which avoids embedding these <script> tags and then makes the code much cleaner and easier to work with.

Yes thanks! You're right, using Div or Span will help clean up the code I'll do that...

Here's what I'll do...

I want to finish this project up in straight up JS code. Then when it's done, I will jump on Mootools!!!

I'll try my best to finish it up today!

Kalle · 04-25-2009, 06:12 PM

Quote:

Originally Posted by allworknoplay

Yeah you threw a new one at me...

Code:

"for(y in x)"

I will go ahead and read up on Mootools....I'll go with your suggestion and hope in the process the fundamentals of JS don't escape me...

This one is similar to foreach, except its written the other way around:

javascript Code:

for(c in ['Hello', 'World'])
{
    alert(c);
}

Arrays or objects to iterate are set on the right side, unlike foreach in PHP where its on the left side. The following example would looks like this in php:

PHP Code:


			
foreach(Array('Hello', 'World') as $c)

{

    echo($c);

}

allworknoplay · 04-25-2009, 06:26 PM

Quote:

Originally Posted by Kalle

This one is similar to foreach, except its written the other way around:

javascript Code:

for(c in ['Hello', 'World'])
{
    alert(c);
}

Arrays or objects to iterate are set on the right side, unlike foreach in PHP where its on the left side. The following example would looks like this in php:

PHP Code:


			
foreach(Array('Hello', 'World') as $c)

{

    echo($c);

}

You are a lifesaver!