TalkPHP - new JS project...

Page 1 of 2

Show 40 post(s) from this thread on one page

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - new JS project... (http://www.talkphp.com/javascript-ajax-e4x/4183-new-js-project.html)

allworknoplay

04-24-2009 12:31 AM

new JS project...

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 (Post 23384)

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 (Post 23396)

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

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 (Post 23391)

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 (Post 23397)

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 (Post 23403)

Do you even read what I post?

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

But you get credit... :-P

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 (Post 23406)

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 (Post 23413)

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 (Post 23416)

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 (Post 23420)

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 (Post 23421)

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 (Post 23422)

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 (Post 23425)

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!

All times are GMT. The time now is 09:53 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page