Jack Andrews
asked on
Form sends from one page but not from another
I have a site that uses a php script in the index page to detect if the user is on a mobile device. If they are, it displays a mobile version of a form they can submit for information. The form will submit successfully from the root but the same form will not send from a subsite in a folder that contains a different index page with the same code in it. Javascript is used in the page to validate fields and control the submit function.
You cannot see the live mobile version form except from a mobile phone. What would you need to troubleshoot this issue?
The form that works is here: abmoving.com
The form that does not work is here: abmoving.com/houston
You can click the CALL ME button without entering any info in and it will show an error in red text at the top of the form on the one that works.
The second one does nothing when you click the sending button.
Here is a section of code used to format the form and to validate and submit the form:
You cannot see the live mobile version form except from a mobile phone. What would you need to troubleshoot this issue?
The form that works is here: abmoving.com
The form that does not work is here: abmoving.com/houston
You can click the CALL ME button without entering any info in and it will show an error in red text at the top of the form on the one that works.
The second one does nothing when you click the sending button.
Here is a section of code used to format the form and to validate and submit the form:
<div id="orcallus">Call Us:</div>
<div id="ourphone"><a href="tel:7133886284">713-388-6284</a></div>
<div id="thanks2">Thank you! We will contact you shortly.</div>
<div id="form2">
<div id="contactform">Or WE'LL CALL YOU...use our handy Form</div>
<div id="error" style="display:none;font-weight:bold;color:red;">Please enter valid information for all fields.</div>
<div class="mobile_name">Name</div>
<input id="mobile_name2" type="text" />
<div class="mobile_phone">Phone</div>
<input id="mobile_phone2" type="text" />
<div class="mobile_fromzip">Move from ZIP</div>
<input id="mobile_fromzip2" type="text" />
<div class="mobile_tozip">Move to ZIP</div>
<input id="mobile_tozip2" type="text" />
<div id="submit_form">CALL ME</div>
</div>
<div id="howwehelp1">What We Offer:</div>
<div id="howwehelp2">
<div>1. Low Cost, Professional Moving</div>
<div>2. Packing, Loading, Unloading</div>
<div>3. Shrink-wrapping all items</div>
<div>4. To/from storage</div>
<div>5. Optional after-move cleanup</div>
</div>
<div id="services1" style="width:100%;padding:6px 0;font-size:22px;color:#fff; margin:6px 0 6px;">SAME DAY MOVES, TOO!</div>
<div id="services2" style="width:235px;margin:auto;text-align:left;text-transform:none;line-height:24px;font-size:17px;padding-left:10px;">
<div></div>
<div>• Same Day Moves</div>
<div>• Flat rate moves</div>
<div>• Home moves</div>
<div>• Apartment moves</div>
<div>• Office moves</div>
<div>• Storage moves</div>
</div>
<div class="d-magazine-mobile"><img src="images/D-Mag-Best-Mover-2013.png" width="200" height="269" alt="Best Mover, D Magazine 2013" /></div>
<a id="mainsite" href="http://abmoving.com/?main=1">Main Site</a> </div>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#submit_form').die('click');
$('#submit_form').click(function() {
var name = $('#mobile_name2').val();
var phone = $('#mobile_phone2').val();
var fromzip = $('#mobile_fromzip2').val();
var tozip = $('#mobile_tozip2').val();
if (name.length < 3 || phone.length < 10 || fromzip.length <5 || tozip.length < 5) {
$('#error').show();
} else {
$.post("mobileform.php", { name:name, phone:phone, fromzip:fromzip, tozip:tozip });
$('#thanks2').show();
$('#form2').hide();
$('#error').hide();
}
});
});
</script>
ASKER
Thanks. I am aware of those solutions, but I don't want to build something like that at this time. I am looking for a fix for what I now have. Can't understand why it works in one location on the same site and not in another.
If it were my site, I would start by making the markup valid. The W3 validator is pretty strict and sometimes "invalid" markup (by its standards) can still work, but if you use W3-valid markup, and the HTML5 doctype, almost everything works right in modern browsers.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fabmoving.com%2Fhouston%2F
https://validator.w3.org/nu/?doc=http%3A%2F%2Fabmoving.com%2Fhouston%2F
I don't see a 'Call Me' button on either page. I clicked on the 'Contact' link and did not see any errors.
ASKER
Thanks, Ray. I'll check it.
Dave, did you access it from a phone?
Dave, did you access it from a phone?
No.
ASKER
A phone is the only way to see the form referred to in this question. Some tablets maybe, but for sure a phone.
ASKER
I have cleaned up the doctype. I'll do the rest later. It does not effect the action of the form, since it works fine in other places on the site. However, the doctype change made no difference. The form still will not submit.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It was the answer
Regular: http://site.com
Mobile: http://m.site.com
Both subdomains work on desktop or mobile, but they are optimized for one or the other.
Another strategy that is useful: Twitter Bootstrap markup can look good on either kind of browser. Then you can use the same semantic markup HTML, the same JavaScript, and just change the CSS, which does not affect the meaning or behavior of the DOM elements.