Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Form only submits in IE

    Ok, normally I would consult my peeps in this area beings it Magento commerce solution, but I got a strange one that no one can see to answer.

    http://tinyurl.com/2cm769a

    On this page, there are three tabs under the product picture. One of these tabs is "Read My Reviews", and when you click it you get the option to submit your own review.

    When you fill it out in Firefox and click submit, absolutely NOTHING happens, even if you leave stuff blank and hit submit NO JS validation.

    Same page however in IE works just fine.. I am very confused as there is no difference in the form via IE or FF..

    Anyone able to help me figure this one out?

    Thanks in advance.

  • #2
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Here is what IE Outputs:
    Code:
    <form action="http://www.earthmamaangelbaby.com/review/product/post/id/69/" method="post" id="review-form" style="width:600px; margin-left:10px; float:left;">
    <fieldset style="margin-left:20px;">
            <div class="product-review-box">
        <strong>How do you rate this product?<span class="required">*</span></strong><br />
        <span id="input-message-box"></span>
        <table class="data-table" id="product-review-table" cellspacing="0">
            <thead>
                <tr>
                    <th style="padding:0px; font-weight:normal; font-size:10px;">1 Heart</th>
                    <th style="padding:0px; font-weight:normal; font-size:10px;">2 Hearts</th>
                    <th style="padding:0px; font-weight:normal; font-size:10px;">3 Hearts</th>
                    <th style="padding:0px; font-weight:normal; font-size:10px;">4 Hearts</th>
                    <th style="padding:0px; font-weight:normal; font-size:10px;">5 Hearts</th>
                </tr>
            </thead>
            <tbody>
                                <tr class="odd last">
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_1" value="16"/></td>-->
                    <td style="border:none;"><input type="radio" name="ratings[4]" id="testimonials_1" value="16" /></td>
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_2" value="17"/></td>-->
                    <td style="border:none;"><input type="radio" name="ratings[4]" id="testimonials_2" value="17" /></td>
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_3" value="18"/></td>-->
                    <td style="border:none;"><input type="radio" name="ratings[4]" id="testimonials_3" value="18" /></td>
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_4" value="19"/></td>-->
                    <td style="border:none;"><input type="radio" name="ratings[4]" id="testimonials_4" value="19" /></td>
                                            <!--<td class="last"><input type="radio" class="validate-one-required-by-name" name="ratings[4]" id="testimonials_5" value="20"/></td>-->
                    <td style="border:none;"><input type="radio" name="ratings[4]" id="testimonials_5" value="20" /></td>
                                        </tr>
                            </tbody>
        </table>
        <input type="hidden" name="validate_rating" class="validate-rating" value="" />
        <script type="text/javascript">decorateTable('product-review-table')</script>
        </div>
                        <div>
            <label for="nickname_field">Nickname<span class="required">*</span></label><br />
            <input class="input-text required-entry" name="nickname" id="nickname_field" style="width: 100%;" type="text" value="" />
            </div>
     
            <div style="display:none;">
            <label for="summary_field">Summary of Your Review<span class="required">*</span></label><br />
            <input name="title" class="input-text  required-entry" id="summary_field" style="width: 100%;" type="text" value="testimonials" />
            </div>
     
            <div>
            <label for="review_field">Review<span class="required">*</span></label><br />
            <textarea class="required-entry" name="detail" id="review_field" cols="53" rows="10" style="width:100%;"></textarea>
            </div>
     
        <div class="button-set" style="margin:0px; border:none;">
            <button class="form-button right" type="submit"><span>Submit Review</span></button>
        </div>
    </fieldset>
    </form>
    <script type="text/javascript"> 
    //<![CDATA[
        var dataForm = new VarienForm('review-form');
     
        Validation.addAllThese(
        [
               ['validate-rating', 'Please select one of each of the ratings above', function(v) {
                    var trs = $('product-review-table').getElementsBySelector('tr');
                    var inputs;
                    var error = 1;
     
                    for( var j=0; j < trs.length; j++ ) {
                        var tr = trs[j];
                        if( j > 0 ) {
                            inputs = tr.getElementsBySelector('input');
     
                            for( i in inputs ) {
                                if( inputs[i].checked == true ) {
                                    error = 0;
                                }
                            }
     
                            if( error == 1 ) {
                                return false;
                            } else {
                                error = 1;
                            }
                        }
                    }
                    return true;
                }]
        ]
        );
    //]]>
    </script>
    Here is what FF Outputs:
    Code:
    <form style="width: 600px; margin-left: 10px; float: left;" id="review-form" method="post" action="http://www.earthmamaangelbaby.com/review/product/post/id/69/">
    <fieldset style="margin-left: 20px;">
            <div class="product-review-box">
        <strong>How do you rate this product?<span class="required">*</span></strong><br>
        <span id="input-message-box"></span>
        <table cellspacing="0" id="product-review-table" class="data-table">
            <thead>
                <tr class="first last">
                    <th style="padding: 0px; font-weight: normal; font-size: 10px;">1 Heart</th>
                    <th style="padding: 0px; font-weight: normal; font-size: 10px;">2 Hearts</th>
                    <th style="padding: 0px; font-weight: normal; font-size: 10px;">3 Hearts</th>
                    <th style="padding: 0px; font-weight: normal; font-size: 10px;">4 Hearts</th>
                    <th style="padding: 0px; font-weight: normal; font-size: 10px;">5 Hearts</th>
                </tr>
            </thead>
            <tbody>
                                <tr class="odd last first">
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_1" value="16"/></td>-->
                    <td style="border: medium none;"><input type="radio" value="16" id="testimonials_1" name="ratings[4]"></td>
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_2" value="17"/></td>-->
                    <td style="border: medium none;"><input type="radio" value="17" id="testimonials_2" name="ratings[4]"></td>
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_3" value="18"/></td>-->
                    <td style="border: medium none;"><input type="radio" value="18" id="testimonials_3" name="ratings[4]"></td>
                                            <!--<td ><input type="radio"  name="ratings[4]" id="testimonials_4" value="19"/></td>-->
                    <td style="border: medium none;"><input type="radio" value="19" id="testimonials_4" name="ratings[4]"></td>
                                            <!--<td class="last"><input type="radio" class="validate-one-required-by-name" name="ratings[4]" id="testimonials_5" value="20"/></td>-->
                    <td style="border: medium none;" class="last"><input type="radio" value="20" id="testimonials_5" name="ratings[4]"></td>
                                        </tr>
                            </tbody>
        </table>
        <input type="hidden" value="" class="validate-rating" name="validate_rating">
        <script type="text/javascript">decorateTable('product-review-table')</script>
        </div>
                        <div>
            <label for="nickname_field">Nickname<span class="required">*</span></label><br>
            <input type="text" value="" style="width: 100%;" id="nickname_field" name="nickname" class="input-text required-entry">
            </div>
    
            <div style="display: none;">
            <label for="summary_field">Summary of Your Review<span class="required">*</span></label><br>
            <input type="text" value="testimonials" style="width: 100%;" id="summary_field" class="input-text  required-entry" name="title">
            </div>
    
            <div>
            <label for="review_field">Review<span class="required">*</span></label><br>
            <textarea style="width: 100%;" rows="10" cols="53" id="review_field" name="detail" class="required-entry"></textarea>
            </div>
    
        <div style="margin: 0px; border: medium none;" class="button-set">
            <button type="submit"><span>Submit Review</span></button>
        </div>
    </fieldset>
    </form>
    <script type="text/javascript">
    //<![CDATA[
        var dataForm = new VarienForm('review-form');
    
        Validation.addAllThese(
        [
               ['validate-rating', 'Please select one of each of the ratings above', function(v) {
                    var trs = $('product-review-table').getElementsBySelector('tr');
                    var inputs;
                    var error = 1;
    
                    for( var j=0; j < trs.length; j++ ) {
                        var tr = trs[j];
                        if( j > 0 ) {
                            inputs = tr.getElementsBySelector('input');
    
                            for( i in inputs ) {
                                if( inputs[i].checked == true ) {
                                    error = 0;
                                }
                            }
    
                            if( error == 1 ) {
                                return false;
                            } else {
                                error = 1;
                            }
                        }
                    }
                    return true;
                }]
        ]
        );
    //]]>
    </script>

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I spent some time looking this over - and I'm pretty sure it has to do with the CSS that was used for the class you used in the button element. I ran out of time, but maybe this will help? I copied the portion of your code from the opening containing the form and it worked fine in all browsers (even Firefox). When I added in the style sheet reference - it stopped working.

    Sorry I didn't have more time to help you out!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There might be something to do with the error in your markup.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Well I removed all style classes from the button, and it still does nothing in FireFox.

    We are validated under doctype Strict now or at least this page of question is:

    http://validator.w3.org/check?uri=ht...idator%2F1.767


    So its not the styles of the button, its not any markup error.. any other suggestions? Just never seen a phantom form like this.

    Going to try the form on a blank document and one by one include our css files / js files and see if its these guys giving me problems. If not, I am completely stumped.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Location
    Florida
    Posts
    155
    Thanks
    16
    Thanked 2 Times in 2 Posts
    Is your form validation cross browser?

  • #7
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    I don't know how best to answer that, I assume yes because W3C validated the whole page (Markup) as passing with out any errors or warning under doctype of Strict:

    http://validator.w3.org/check?uri=ht...idator%2F1.767

    EDIT:
    WAIT, after going through the header of the page and one by one removing CSS files and JS files linked to my blank document test page I found the one causing the problems "js/varien/form.js"... going to take a stab at this JS file to see what I can find.. but with out any type of error its going to be hard.

  • #8
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Ok hot on the trail, took a stab at the dark here and chalked it up to maybe the form validation code that ties to this forms.js file I found to be the problem.

    After removing variens or rather a prototype form validation (default to the commerce solution) with a jquery validation method... guess what seems to be working

    Gotta love prototype!

    Thanks Guys!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •