CODEWITHSUNDEEP
javascriptjquery-pluginsimage-uploading
MageLerner
MageLerner

Reputation: 179

Submit form without uploading image

I am using this pluging to image upload using ajax http://hayageek.com/docs/jquery-upload-file.php

But here in this pluging there isn't any option to make uploader optional with form submit.

Here is my form code i want to make upload field optional.

currently it is not submitting form when i am not uploading any image to uploader.

    <script type="text/javascript">
    //<![CDATA[


    jQuery(document).ready(function() {
    var extraObj = jQuery("#warranty-comment-image-upload").uploadFile({
        url: "<?php echo $this->getUrl('warranty/index/savecomment',array('id'=>$params['id'],'key'=>$params['key']));?>",
        fileName: "img",
        showPreview: true,
        dynamicFormData: function()
        {
            var data = jQuery('#commentForm').serialize();
            return data;
        },
        previewHeight: "128px",
        returnType:'json',
        uploadStr:"<?php echo  $this->__('Upload files') ?>",
        previewWidth: "128px",
        allowedTypes: "jpg,jpeg,gif,png,pdf",
        autoSubmit: false,
        showDelete: true,

    });
    jQuery("#warranty-comment-image-upload-button").click(function() {
         var formToValidate = $('commentForm');
        var validator = new Validation(formToValidate);
        if(validator.validate()) {

            extraObj.startUpload();

        }

    });

});


    //]]>
</script>

Form HTML

<form action="<?php echo $this->getUrl('warranty/index/savecomment',array('id'=>$params['id'],'key'=>$params['key']));?>"  id="commentForm" method="post" enctype="multipart/form-data">

<input type="hidden" name="comment_type" value="<?php echo Mage::helper('warranty')->getCommentType();?>">
<input type="hidden" name="warranty_id" value="<?php echo $this->getRequest()->getParam('id'); ?>">
<div class="fieldset">
    <h2 class="legend"><?php echo $this->__('Warranty Information') ?></h2>

    <?php $warrantyweek = Mage::getStoreConfig('warrantytext/general/warrantytext',Mage::app()->getStore()->getStoreId()); 
         $warrantyMessage = Mage::getStoreConfig('warrantytext/general/warrantymessage',Mage::app()->getStore()->getStoreId()); 
    if($warrantyweek){
    ?>
    <div class="warranty-text"><?php echo $warrantyMessage ?></div>
    <?php } ?>
    <?php if($warrantyExtraMessage = Mage::getStoreConfig('warrantytext/general/warrantyextramessage',Mage::app()->getStore()->getStoreId())): ?>
    <div class="warranty-extra-text"><?php echo $warrantyExtraMessage ?></div>
    <?php endif; ?>

    <ul class="form-list">                                                                 

        <li class="fields">
           <h3 class="tittle"><?php echo $this->__($sectionData['title']) ?></h3>
            <div id="warranty-comment-image-upload" class="extraupload"><?php echo $this->__('Upload Files Here') ?></div>
        </li>
        <li class="wide">
            <label for="comment" class="required"><em>*</em><?php echo $this->__('Comment') ?></label>
            <div class="input-box">
                <textarea name="comment" id="comment" title="<?php echo $this->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea>
            </div>
        </li>
    </ul>
</div>
<div class="buttons-set">
    <p class="back-link"><a href="<?php echo $this->escapeUrl($this->getUrl('warranty')) ?>"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
    <p class="required"><?php echo $this->__('* Required Fields') ?></p>
    <button id="warranty-comment-image-upload-button" type="button"  title="<?php echo $this->__('Submit') ?>" class="button"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>

Upvotes: 0

Views: 548

Answers (2)

Zahirabbas
Zahirabbas

Reputation: 1119

You can use like this to prevent calling uploader when there isn't any image uploaded.

    jQuery("#warranty-comment-image-upload-button").click(function() {
         var formToValidate = $('commentForm');
         console.log(extraObj);
        var validator = new Validation(formToValidate);
        if(validator.validate()) {
        /* to check any image uploaded or not if so submit form with uploader plugin */
           if(extraObj.fileCounter > 1){
            extraObj.startUpload();
            }else{
                /*submit form with refresh*/
                //jQuery('#commentForm').submit();
                 /*submit form with ajax ajaxSubmit will be availabe by default in uploader plugin*/
                 jQuery('#commentForm').ajaxSubmit();
            }
        }

    });

Upvotes: 1

James Brett
James Brett

Reputation: 362

So I would add an additional check in your first condition statement that checks to see if the form is valid and the extraObj is not null (this might change due to what that variable returns but you should be able to target null, length of the file if binary, or even the size of file if the variable returns a file size). Hope this helps. 

if(validator.validate() && extraObj != null) {

 extraObj.startupload();

} else {

 validator.validate();

}

Upvotes: 0

Related Questions