Javascript question

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • NBHNC
    Confirmed User
    • Feb 2012
    • 130

    #1

    Javascript question

    Trying to implement a contact form into a site but having some issues.

    Original programmer used tables, which I removed and changed a few things. When I submit the form without entering anything, the errors come up, and every time the focus is changed on a field, the error pops up again and I end up with multiple errors coming up down the page.

    Is there a way to change the JS below to fit with my layout and so it doesn't repeat itself ten million times?



    Code:
    $(function() {
      // Validate the contact form
      $('#contactform').validate({
        // Specify what the errors should look like
        // when they are dynamically added to the form
        errorElement: "[COLOR="Yellow"]label[/COLOR]",
        wrapper: "[COLOR="Yellow"]td[/COLOR]",
        errorPlacement: function(error, element) {
          error.insertBefore( element.parent().parent() );
          error.wrap("[COLOR="Yellow"]<tr class='error'></tr>[/COLOR]");
          $([COLOR="Yellow"]"<td></td>[/COLOR]").insertBefore(error);
        },
    errorElement: What element the error message will be placed in. The reason I chose to put it in a label is so that if the user clicks on the error, it will automatically focus the correct text box for them.

    wrapper: Basically like errorElement ? it wraps the error, including the label, in a td tag.

    errorPlacement: A function that specifies where the error should be placed after it is generated. It looks complicated, but really all we are doing is putting it in a tr element next to the tr that the input box is in, and adding an empty td tag before the error to push the error to the right. You?ll see what I mean if you take a look at the code of the page after an error is generated.

    The HTML I'm using
    Code:
        <div class="wrap" align="center">
    <form id="contactform" action="contact/processForm.php" method="post">
    <input name="name" type="text" id="name" value="Your Name" onFocus="this.value=''; this.onfocus=null;" />
      <br />
    <input name="email" type="text" id="email" value="Your Email" onFocus="this.value=''; this.onfocus=null;" />
    <br />
    <textarea id="message" name="message" rows="5" cols="22" onFocus="this.value=''; this.onfocus=null;">Enter a brief message</textarea>
        <br />
    
        <div align="right"><br />
        <input type="submit" value="Submit Message" id="send" /></div>
          </form>
          <div id="response"></div>
    </div>
    Original HTML
    Code:
    <table>
      <tr>
        <td><label for="name">Name:</label></td>
        <td><input type="text" id="name" name="name" /></td>
      </tr>
      <tr>
        <td><label for="email">Email:</label></td>
        <td><input type="text" id="email" name="email" /></td>
      </tr>
      <tr>
        <td><label for="message">Message:</label></td>
        <td><textarea id="message" name="message" rows="5" cols="20"></textarea></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Send!" id="send" /></td>
      </tr>
    </table>
  • uniquemkt
    Confirmed User
    • Mar 2012
    • 305

    #2
    Maybe rename the thread to "javascript" as java is completely unrelated.

    Comment

    • raymor
      Confirmed User
      • Oct 2002
      • 3745

      #3
      As uniqumkt said, this has as much to do with Java as automobile has with bile. The two words have some of the same letters, and are completely unrelated.

      What you want to do is before the event loop add
      var i = 0;
      In the loop, add
      if ($i++} { continue; }

      That will print only one error message. I can't actually read your code on my phone, but the screenshot tells me what the code must be.
      Last edited by raymor; 05-30-2012, 04:11 PM.
      For historical display only. This information is not current:
      support&#64;bettercgi.com ICQ 7208627
      Strongbox - The next generation in site security
      Throttlebox - The next generation in bandwidth control
      Clonebox - Backup and disaster recovery on steroids

      Comment

      • sarettah
        see you later, I'm gone
        • Oct 2002
        • 14293

        #4
        Originally posted by raymor
        As uniqumkt said, this has as much to do with Java as automobile has with bile. The two words have some of the same letters, and are completely unrelated.

        What you want to do is before the event loop add
        var i = 0;
        In the loop, add
        if ($i++} { continue; }

        That will print only one error message. I can't actually read your code on my phone, but the screenshot tells me what the code must be.
        He isn't doing a loop. (or he isn't showing it to us).

        He is inserting the error message just before the parent object thus everytime he gets an error it is inserting a new line above the parent. At least that is the way I am reading it.

        But as usual we are not seeing all the code in play here, so I can't say for sure.

        As far as where the error message goes and your repeating messages, Myself, I would create a div in the html called error_div or something like that and on each error I would rewrite the div inner HTML. That way the error message always shows in the same spot and doesn't screw the layout and only one error message shows at a time.


        .
        Last edited by sarettah; 05-30-2012, 04:48 PM.
        All cookies cleared!

        Comment

        • sarettah
          see you later, I'm gone
          • Oct 2002
          • 14293

          #5
          is putting it in a tr element next to the tr that the input box is in, and adding an empty td tag before the error to push the error to the right.
          Yeah, but you aren't inside a table anymore so you are sticking in tr and td tags without the table tags.

          That just isn't right.


          Unless I am missing something here.


          .


          .
          All cookies cleared!

          Comment

          • raymor
            Confirmed User
            • Oct 2002
            • 3745

            #6
            Originally posted by sarettah
            He isn't doing a loop. (or he isn't showing it to us).

            He is inserting the error message just before the parent object thus everytime he gets an error it is inserting a new line above the parent. At least that is the way I am reading it.

            But as usual we are not seeing all the code in play here, so I can't say for sure.

            As far as where the error message goes and your repeating messages, Myself, I would create a div in the html called error_div or something like that and on each error I would rewrite the div inner HTML. That way the error message always shows in the same spot and doesn't screw the layout and only one error message shows at a time.


            .

            The EVENT loop. He's doing it in an event handler. Initialize to zero before outside the handler.

            BTW it's good to know the event loop IS a loop, one that's run a thousand times per second. Hook a garbage event or create a nested infinite loop and you'll get a nice crash - do not pass Go and do not collect an error message.
            For historical display only. This information is not current:
            support&#64;bettercgi.com ICQ 7208627
            Strongbox - The next generation in site security
            Throttlebox - The next generation in bandwidth control
            Clonebox - Backup and disaster recovery on steroids

            Comment

            • sarettah
              see you later, I'm gone
              • Oct 2002
              • 14293

              #7
              Originally posted by raymor
              The EVENT loop. He's doing it in an event handler. Initialize to zero before outside the handler.

              BTW it's good to know the event loop IS a loop, one that's run a thousand times per second. Hook a garbage event or create a nested infinite loop and you'll get a nice crash - do not pass Go and do not collect an error message.
              Ah, I see.

              Most of my javascript is fairly simple stuff.

              Like I said, I didn't think I had the whole picture from just the code he showed. I knew the fucking messages were coming from somewhere ;p

              Thanx


              ..
              Last edited by sarettah; 05-30-2012, 06:59 PM.
              All cookies cleared!

              Comment

              • mafia_man
                Confirmed User
                • Jul 2005
                • 1965

                #8
                Originally posted by uniquemkt
                Maybe rename the thread to "javascript" as java is completely unrelated.
                jQuery would be even better.
                I'm out.

                Comment

                Working...