Hello,

I'm getting error on page when I click on the link add new credit card. However this code works fine when I use input type button. The code in red is where the error is occuring. Does anyone know what I'm doing wrong? I even tried substituting "javascript:void();" with "#". Even then it is not working. 🙁

<script language="javascript" type="text/javascript">
function myFunc(which)
{which.action="index.html";
which.submit();
return true;
}
</script>
<form action="" method="post">
<input type="text" maxlength="30" />
[COLOR="Red"]<a href="javascript:void(0);" onclick="myFunc()">add new credit card</a>[/COLOR]</form>

thank you.

    varai;10961282 wrote:

    I'm getting error on page

    Getting what error? Impossible to help you otherwise.
    Edit: Well, not impossible. But it does take more time.

    Also, what argument do you pass to your function?

      Hello johanafm

      I'm passing this.form to the myFunc.

      <form name="myForm" action="" method="post">
      <input type="text" maxlength="30" />
      <a href="javascript:void(0);" onclick="myFunc([COLOR="Red"]this.form[/COLOR]);">add new credit card</a>
      </form>

      When I run this in the browser, it just says "error on page" at the bottom of the browser.

      I even checked this code in w3 validator. There were no errors.

      I am clueless on what is the error. 🙁

      thank you.

        Then I suggest getting a browser with better debugging information. My personal favorite is Firefox with the addon Firebug installed. In this case however, the built in error console should be enough.

        Safari has similar functionality built in, but you need to enable the "developer" menu, since it's hidden by default.

        Use whatever you like, but getting nothing but "error on page" simply will not do.

        As for the validator, it deals exclusively with your (x)html markup. It never looks at your javascript code, just the script element.

          Hello johanafm

          I've installed firefox with firebug. I debugged the code. There was 1 error in the javascript function myFunc. The debugger stops at the code in red and throws an error: which is undefined. Then the debugger jumps to javascript:void(0) and nothing happens after that.

          I have written and executed similar javascript functions before this without any problem. But right now I don't know what is wrong.

          <script language="javascript" type="text/javascript">
          function myFunc(which)
          {[COLOR="Red"]which.action="index.html";[/COLOR]  
          which.submit(); return true; } </script>
          <form name="myForm" action="" method="post">
          <input type="text" maxlength="30" />
          <a href="[COLOR="red"]javascript:void(0)[/COLOR];" onclick="myFunc(this.form);">add new credit card</a>
          </form>

          thank you.

            By the way, I also tried with return false in myFunc and I got the same error "which is undefined".

              First you had this code, and do note the call "myFunc()"

              varai;10961282 wrote:
              <form action="" method="post">
              <input type="text" maxlength="30" />
              [COLOR="Red"]<a href="javascript:void(0);" onclick="myFunc()">add new credit card</a>[/COLOR]</form>

              Then, in your next post, you provide an argument when you call the function, i.e. this.form, in the call to myFunc.

              varai;10961405 wrote:
              <form name="myForm" action="" method="post">
              <input type="text" maxlength="30" />
              <a href="[COLOR="red"]javascript:void(0)[/COLOR];" onclick="myFunc(this.form);">add new credit card</a>
              </form>
              varai;10961405 wrote:
              <script language="javascript" type="text/javascript">
              function myFunc(which)
              {[COLOR="Red"]which.action="index.html";[/COLOR]  
              which.submit(); return true; } </script>

              error: which is undefined. Then the debugger jumps to javascript:void(0) and nothing happens after that.

              Now, looking at this last part, you can start by dropping language="javascript", since there is no such thing. Iirc, the script element doens't have a language attribute, and if it did, it would be a natural language, such as "en" or "en-us".
              Looking at the function definition, there is one function argument called which.

              which will be whatever you pass along to the function when you call it. If you provide no argument, or provide the argument "undefined" (without quotes), I'd exepct the error message you get.

              You write something like "goes on to call javascript:void(0)", but that actually happens at the same time as your onclick event fires.
              When you click a link, the href attribute is used; to load a new document, to jump to a document fragment (#id), or to run javascript (javascript:...). However, the things that take place due to the href attribute is not an event, and as such there will be no event object. javascript:void(0) does nothing (more or less), which means that no new document will be loaded and the browser will not scroll in the current document to some other point, thus allowing your onclick to be run without other side effects. In other words, your error has nothing to do with the href attribute.
              But since you are not using the event object in your event handler function, you could just as well use

              <a href="javascript:myFunc(...);">...</a>
              

              But the first thing I'd add to myFunc is alert(which) to see what you are really passing along.

              And considering that there is no form property listed for elements at this page, this.form might be the reason your script fails (i.e. it is undefined).

                After reading your reply, the following are the changes I have made:

                [COLOR="Red"]<script type="text/javascript">[/COLOR]
                function myFunc(which)
                {alert(which);
                which.action="index.html";
                which.submit();
                }
                </script>
                </head>
                
                <body>
                <form name="myForm" action="" method="post">
                <input type="text" maxlength="30" />
                <a href[COLOR="red"]="javascript:myFunc(this.form);">[/COLOR]add new credit card</a>
                </form>
                </body>
                

                alert(which) gives "undefined".

                But since you are not using the event object in your event handler function, you could just as well use
                Code:
                <a href="javascript:myFunc(...);">...</a>

                What do you mean by event object here?

                And considering that there is no form property listed for elements at this page, this.form might be the reason your script fails (i.e. it is undefined).

                What do you mean by "no form property listed for elements at this page?"

                I'm trying to pass the entire form to myFunc ie. which = this.form (the entire form).

                thank you

                  varai;10961553 wrote:

                  What do you mean by "no form property listed for elements at this page?"

                  If you look at that page, the properties for elements are listed, and there is no such thing as someElement.form, which is why it is "undefined".

                  In your case, this.parentNode would give the form element though. However, forms should not contain inline elements, such as anchors, as direct children, so you should wrap your anchor in a block element such as div or fieldset, and then you'd use this.parentNode.parentNode.
                  Or, you could give your form an id and use document.getElementById('the_form_id_you_use') to get the form element.

                    Write a Reply...