Question

我创建了一个Bootstrap表单但是“提交”按钮不起作用。当我点击按钮时，它只点击了......但没有任何反应。

请帮助。

<form role="form" name="contactform" id="contactform" method="post" action="" enctype="multipart/form-data">
    <!-- Field 1 -->
    <div class="input-text form-group">
        <input type="text" name="contact_name" class="input-name form-control" placeholder="Full Name" />
    </div>
    <!-- Field 2 -->
    <div class="input-email form-group">
        <input type="email" name="contact_email" class="input-email form-control" placeholder="Email" />
    </div>
    <!-- Field 3 -->
    <div class="input-email form-group">
        <input type="text" name="contact_phone" class="input-phone form-control" placeholder="Phone" />
    </div>
    <!-- Field 4 -->
    <div class="textarea-message form-group">
        <textarea name="contact_message" class="textarea-message hight-82 form-control" placeholder="Message" rows="2"></textarea>
    </div>
    <!-- Button -->
    <button type="submit" class="btn">Submit</button>
</form>

Answer 1

在表单中，您使用输入字段。将<button>更改为<input type='submit'>

<form role="form" name="contactform" id="contactform" method="POST" enctype="multipart/form-data">
                                    <!-- Field 1 -->
                                    <div class="input-text form-group">
                                        <input type="text" name="contact_name" class="input-name form-control" placeholder="Full Name" />
                                    </div>
                                    <!-- Field 2 -->
                                    <div class="input-email form-group">
                                        <input type="email" name="contact_email" class="input-email form-control" placeholder="Email" />
                                    </div>
                                    <!-- Field 3 -->
                                    <div class="input-email form-group">
                                        <input type="text" name="contact_phone" class="input-phone form-control" placeholder="Phone" />
                                    </div>
                                    <!-- Field 4 -->
                                    <div class="textarea-message form-group">
                                        <textarea name="contact_message" class="textarea-message hight-82 form-control" placeholder="Message" rows="2"></textarea>
                                    </div>
                                    <!-- Button -->
                                 <input type="submit" class="btn" value='Submit'>


                                </form>

使用POST时，您不必在代码中添加操作。除非你想张贴到另一页。

Answer 2

看起来一切正常......我认为你的脚本已经犯了一些错误

$(document).ready(function(){
  $('#contactform').on('submit',function(){
    $('#result').html('submitted');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<form role="form" name="contactform" id="contactform" method="post" action="" enctype="multipart/form-data">
    <!-- Field 1 -->
    <div class="input-text form-group">
        <input type="text" name="contact_name" class="input-name form-control" placeholder="Full Name" />
    </div>
    <!-- Field 2 -->
    <div class="input-email form-group">
        <input type="email" name="contact_email" class="input-email form-control" placeholder="Email" />
    </div>
    <!-- Field 3 -->
    <div class="input-email form-group">
        <input type="text" name="contact_phone" class="input-phone form-control" placeholder="Phone" />
    </div>
    <!-- Field 4 -->
    <div class="textarea-message form-group">
        <textarea name="contact_message" class="textarea-message hight-82 form-control" placeholder="Message" rows="2"></textarea>
    </div>
    <!-- Button -->
    <button type="submit" class="btn">Submit</button>
</form>
<div id="result"></div>

Bootstrap Submit按钮不起作用

2 个答案: