Link to home
Start Free TrialLog in
Avatar of Jack Andrews
Jack AndrewsFlag for United States of America

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:

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

Open in new window

Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Not sure if this will help, but many sites that have "mobile versions" use a subdomain for the mobile markup.

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.
Avatar of Jack Andrews

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
Avatar of Dave Baldwin
I don't see a 'Call Me' button on either page.  I clicked on the 'Contact' link and did not see any errors.
Thanks, Ray. I'll check it.

Dave, did you access it from a phone?
A phone is the only way to see the form referred to in this question. Some tablets maybe, but for sure a phone.
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
Avatar of Jack Andrews
Jack Andrews
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It was the answer