CODEWITHSUNDEEP
phpjqueryformstwitter-bootstrap
user3338040
user3338040

Reputation: 95

Standard Submit button submits form, Bootstrap V3 Button won't submit form

I have two form on a page. One for uploading images, and the other for another purpose.

If I use a standard submit button the form submits just fine, but if I switch it to a Twitter Bootsrap button, with the same name and id as the standard button, it doesn't submit the form. I have some JQuery that changes the appearance of the button, but I have eliminated that code, and it still doesn't work. 

   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>

I have searched high and low and can't seem to figure out what is going on. Thanks in advance for the help.

Upvotes: 2

Views: 424

Answers (2)

Sparky
Sparky

Reputation: 98728

The only way to know what is really going on would be to inspect the dynamic DOM changes using your browser's DOM inspection tools.

However, the bare minimum HTML markup for a form submission is as follows...

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

Upvotes: 0

Daniel Nieto
Daniel Nieto

Reputation: 131

I think you could change button type to a normal button.

In #UploadImage.click you could call form submit action like this:

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

Also, form action is empty, which is the post url ?

Upvotes: 2

Related Questions