Question

我不是编码员，但是将此表单从我拥有的一个页面复制到另一个页面并且无法将其发送。这是一个js脚本，我已经在线检查了它的语法，验证器说它没问题，但表单不会发送。它在另一页上工作正常。我注意到它没有标签，但在另一页上它不会阻止它发送。我错过了什么？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
Not Set/title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<body>
<div id="wrapper">
<div id="orcallus">Call Us:</div>
<div id="ourphone"><a href="tel:214-644-6683">214-644-6683</a></div>
<div id="form2"><br>
    <div id="orcallus">Or WE'LL CALL YOU...</div>
    <div id="contactform">use our handy  Form below...</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" style="margin-top: 12px"><a style="color: black; text-decoration: underline; margin-top: 12px"; onClick="goog_report_conversion">CALL ME</a></div>
    <br>
    <div id="thanks2">Thank you! We will contact you shortly.</div>
</div>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('#submit').click(function() {
            $('#thanks').show();
            $('#form').hide();
            var phone = $('#userphone').val();
            $.post("../mobileform.php", { phone:phone });
        });
        $('#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> 
<script>
var myvar=setInterval(function(){
if(jQuery('#thanks2').text()=="Thank you! We will contact you shortly."){
ga('send','event','form','submit','call me');
clearInterval(myvar);
}
},1000);
</script>
</body>
</html>

Answer 1

相关修复：

如上所述@akram-saouri，您需要导入jQuery库。您可以通过在<head>和<meta>代码之间添加以下代码来执行此操作。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

表单提交会触发PHP文件../mobileform.php。如果此文件不存在，后端将不会发生任何事情。即使没有此文件，客户端仍将正常运行并且似乎正确提交。
jQuery的.die()函数已被弃用。反正你也不需要它。只需注释掉该行，或删除它。
在第26行的<a>标记中，onClick之前有一个额外的分号。

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title> Not Set</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	</head>

	<body>
		<div id="wrapper">
			<div id="orcallus">Call Us:</div>
			<div id="ourphone"><a href="tel:214-644-6683">214-644-6683</a></div>
			<div id="form2"><br>
				<div id="orcallus">Or WE'LL CALL YOU...</div>
				<div id="contactform">use our handy Form below...</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" style="margin-top: 12px"><a style="color: black; text-decoration: underline; margin-top: 12px">CALL ME</a></div> <br>	
			</div>
            <div id="thanks2">Thank you! We will contact you shortly.</div>
			<script type="text/javascript" language="javascript">
				$(document).ready(function () {
                    $("#thanks2").hide();
					$('#submit').click(function () {
						$('#thanks').show();
						$('#form').hide();
						var phone = $('#userphone').val();
						$.post("../mobileform.php", {
							phone: phone
						});
					});
					//$('#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>
			<script>
				/* Commented out for sanity during testing */
				/*var myvar = setInterval(function () {
					if (jQuery('#thanks2').text() == "Thank you! We will contact you shortly.") {
						ga('send', 'event', 'form', 'submit', 'call me');
						clearInterval(myvar);
					}
				}, 1000);*/
			</script>
	</body>

</html>

其他建议：

您的部分代码未公开。
- 将/title>替换为完整的结束标记</title>（并考虑将其更改为“未设置”？）
- 在<meta name="viewport" content="width=device-width,initial-scale=1.0"/>标记之后，您应该投入</head>。
最后一个<script>标记是不必要的，因为缺少一些其他组件，它不会影响页面本身的运行方式。如果您决定将其保留在：
- 最后一个脚本段应放在上一个$(document).ready(function(){标记的<script>中。这样可以减少从未完成的文档加载中返回任何内容的可能性。
- 您需要设置Google Analytics，并相应地修改您的代码。
在第26行的<a>标记中，未定义onClick="goog_report_conversion"调用的函数。应删除此部分，或者应设置Google Analytics。

表格不会发送

1 个答案: