...

View Full Version : Resolved Form only submits in IE



ubh
06-07-2010, 09:49 PM
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.

ubh
06-07-2010, 10:06 PM
Here is what IE Outputs:

<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:

<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>

cjsingsaas
06-07-2010, 11:26 PM
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!

abduraooft
06-08-2010, 09:05 AM
There might be something to do with the error in your markup.

ubh
06-08-2010, 06:09 PM
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=http%3A%2F%2Fwww.earthmamaangelbaby.com%2Fangel-baby%2Fangel-baby-bottom-balm.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%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.

The reaper
06-08-2010, 06:27 PM
Is your form validation cross browser?

ubh
06-08-2010, 06:32 PM
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=http%3A%2F%2Fwww.earthmamaangelbaby.com%2Fangel-baby%2Fangel-baby-bottom-balm.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%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.

ubh
06-08-2010, 06:52 PM
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!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum