如何为不同的按钮指定单独的联系人脚本

时间:2014-06-03 01:13:28

标签: 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>
                        <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">&times;</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 -->

我与此模式表单关联的脚本是:

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

这是通过给我的表单提供“emailForm”的id来引用脚本。但是,如果我想添加第二个模态形式,例如:

 <!-- 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">&times;</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 -->

这引用了相同的脚本,因为我也给了这个表单以及emailForm的id。但是,由于某种原因,假设为第二种形式出现的警报未显示。知道这可能是什么?我是否需要为每个表单创建一个独特的脚本?

1 个答案:

答案 0 :(得分:0)

重复ID违反了规范并且存在问题,但是这可以用来临时修复此代码。

$(event.target).find("#messageError").css("display", "block");

FORM标签也格式不正确。我把它移动到匹配底部表格标签(到第四个DIV之后)。

(有许多重复的ID问题尚未解决,但上面指定了事件监听器中的程序要显示哪个元素。)

解决方案是在适当的地方使用class和name属性。

JSFiddle:http://jsfiddle.net/BloodyKnuckles/s7D98/