Javascript 如何为不同按钮指定单独的联系人脚本
我试图将脚本指向html中的两个不同按钮。这两个脚本都会发送一封关于客户输入内容的电子邮件，但都属于两种不同的模式形式 第一种形式是：Javascript 如何为不同按钮指定单独的联系人脚本,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我试图将脚本指向html中的两个不同按钮。这两个脚本都会发送一封关于客户输入内容的电子邮件，但都属于两种不同的模式形式 第一种形式是： !-- Beginning of Pop-up Device Form --> <div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
!-- Beginning of Pop-up Device Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Device Testing</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Device and Meter Testing" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
！--弹出设备窗体的开头-->
&时代；
SpryMobile设备测试
名称
电子邮件地址
告诉我们你的手术情况
关
x
谢谢我们感谢您的评论，并将很快回复您。
x
抱歉。服务器出现问题。
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').on('submit', function(event) {
event.preventDefault();
if( ! $("form")[0].checkValidity() ) {
return false;
}
// Disable the submit button
$('#contactSubmit').attr("disabled", "disabled");
$('#contactSpinner').css('display', 'inline-block');
$.ajax({
type : "POST", cache: false,
url : "@controllers.routes.Application.contactSend()",
data : {
contactName: $("#contactName").val(),
contactEmail: $("#contactEmail").val(),
contactMessage: encodeURIComponent( $("#contactMessage").val() ),
contactType: $("#contactType").val()
},
success : function(msg) {
// Check to see if the mail was successfully sent
if (msg == 'OK_SO_UPDATE') {
$("#messageSuccess").css("display", "block");
}
},
error : function(ob, errStr) {
$("#messageError").css("display", "block");
$("#messageError span.message").text(ob.responseText);
},
complete: function() {
$('#contactSubmit').removeAttr("disabled");
$('#contactSpinner').css('display', 'none');
}
});
return false;
});
});
</script>
$（文档）.ready（函数（）{
$（'#emailForm'）。在（'submit'，函数（事件）{
event.preventDefault（）；
如果（！$（“表单”）[0]。检查有效性（）{
返回false；
}
//禁用提交按钮
$（'#contactSubmit'）.attr（“禁用”、“禁用”）；
$（'#contactSpinner'）.css（'display'，'inline block'）；
$.ajax({
类型：“POST”，缓存：false，
url:“@controllers.routes.Application.contactSend（）”，
数据：{
contactName:$（“#contactName”）.val（），
contactEmail:$（“#contactEmail”）.val（），
contactMessage:encodeURIComponent（$（“#contactMessage”）.val（）），
contactType:$（“#contactType”）.val（）
},
成功：功能（msg）{
//检查邮件是否已成功发送
如果（msg='OK\u SO\u UPDATE'）{
$（“#messageSuccess”）.css（“显示”、“块”）；
}
},
错误：函数（ob，errStr）{
$（“#messageError”）.css（“显示”、“块”）；
$（“#messageError span.message”）.text（ob.responseText）；
},
完成：函数（）{
$（“#contactSubmit”）.removeAttr（“禁用”）；
$（'#contactSpinner'）.css（'display'，'none'）；
}
});
返回false；
});
});
<!-- Beginning of Pop-up Professional Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-2"></div>
<div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Professional</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Professional" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
&时代；
SpryMobile专业人士
名称
电子邮件地址
告诉我们你的手术情况
关
x
谢谢我们感谢您的评论，并将很快回复您。
$(event.target).find("#messageError").css("display", "block");