标准提交按钮提交表单,Bootstrap V3按钮不会提交表单

时间:2014-02-21 16:52:43

标签: php jquery forms twitter-bootstrap

我在页面上有两个表单。一个用于上传图像,另一个用于其他目的。

如果我使用标准提交按钮,表单提交就好了,但如果我将其切换到Twitter Bootsrap按钮,其名称和ID与标准按钮相同,则不会提交表单。我有一些JQuery改变了按钮的外观,但我已经删除了该代码,但它仍然无效。

   PHP Code
    if (isset($_POST['submit'])) {
    //upload functions
}

   JQuery Code
//Show Instructions When File Is Selected
    $("#file").on('change', function(e) {
               var uploadButton = $('#UploadImage');
               $(uploadButton).removeClass('btn-default');
               $(uploadButton).addClass('btn-upload');
               $("#uploadImageHolder").addClass('alert alert-danger');  
                $('#uploadStatus').html('');
                $('#uploadInstruct').html('<span><img src="../images/redarrow.png">PLEASE CLICK RED BUTTON TO UPLOAD THIS IMAGE</span>');
                $('#initMessage').html('');
                });
    //Show the Loading Screen When Upload Form Is Sent

    $("#myForm").submit(function() {
        $("#uploadSuccess").remove();
        $("#uploadImageHolder").remove();
        $.fancybox(
            '<p  class="text-center"><img src="../images/loading.gif" width="48px" height="48px"></p><p class="text-center">Please Wait While Your Image Is Processed</p>',
            {
                'modal'             : true,
                'overlayColor'      : '#000000',
                'width'             : 350,
                'height'            : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
    });

 <form action="" enctype="multipart/form-data" method="POST" class="form-inline" role="form" id="myForm">
<div class="form-group">
<p>
    <label for="file">File input</label>
    <input id="file" name="file" type="file">
</p>
<input name="NextImageID" type="hidden" value="<?php echo $NextImageID; ?>">
<p id="uploadImageHolder">
    <button type="submit" id="UploadImage" name="submit" class="btn btn-default"><span>Upload Image</span></button><span id='uploadInstruct'></span>
</p>
</div>                      
</form>

我搜索过高低,似乎无法弄清楚发生了什么。在此先感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

我认为您可以将按钮类型更改为普通按钮。

在#UploadImage.click中你可以像这样调用表单提交动作:

$( "#other" ).click(function() {
  $( "#target" ).submit();
});

此外,表单操作为空,这是post url?

答案 1 :(得分:0)

了解实际情况的唯一方法是使用浏览器的DOM检查工具检查动态DOM更改。

但是,表单提交的最低HTML标记如下......

<form action="yoururl">
    ....
    <input type="submit" />
</form>