douzha8489 2012-05-07 09:20
浏览 42
已采纳

仅在表单提交后打开Fancybox如果LiveValidation成功

I use LiveValidation on a submission form that involves 1-4 upload fields for images. What the clients are impatient about is that once they click on submit, the form starts to upload the images, and it takes time according to the size of those images.

What I was trying to achieve is that once the user submits the form, and the LiveValidation passes, a Fancybox popup appears which has a loading image and some text. I do not want the loading progress bar as the client's hosting does not have the PECL upload progress extension or APC, and I don't want to use AJAX for compatibility reasons.

I just want a loading image to be rotating on the screen so the user knows that they have to wait.

I tried to create a function for it and set it to be executed on the events of "onSubmit" and "onClick", but in either case, the pop up appears even though there are errors in the form that are being pointed out by LiveValidation.

Also, i am assuming that once the images get uploaded and the form gets submitted the page will automatically redirect to the confirmation.

I am not good with javascript, and hence was unable to manipulate the scripts to achieve the desired results.

Any help on this will be greatly appreciated. Also if anyone has a better solution, that too will be great!

Thank you :)


for live validation, I'm using the script directly from the website: http://livevalidation.com/

Here is the livevalidation and fancybox initiation:

    <script type="text/javascript">
    $(document).ready(function () { 
        $(".form-validate-label").validate();
        $(".form-validate-p").validate({errorElement: "p"});
        $(".popup").fancybox();
    });

    </script>

The form itself is pretty big, but here is the fields area:

    <form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p" enctype="multipart/form-data" action="">
    ...
    ...
    <div class="regrow1">
            <div>
                <label class="label-large"><span class="required">*</span>Headshot Image File:</label>
                <input class="required"  name="head_shot" id="head_shot" size="40" type="file" />
            </div>
        </div>
        <div class="regrow2">
            <div>
                <label class="label-large">Attach Resume:</label>
                <input name="txtcv" id="txtcv" size="40" type="file" />
            </div>
        </div>
        <div class="regrow1">
            <div>
                <label class="label-large">Full body shot Image File:</label>
                <input  id="body_shot" name="body_shot" size="40" type="file" />
            </div>
        </div>
        <div class="regrow2">
            <div>
                <label class="label-large">Sanpshot Image File:</label>
                <input id="snap_shot" name="snap_shot" size="40" type="file" />
            </div>
        </div>

        <br /><br />

        <div id="submitrow">
        <button id="submit" name="submit" value="Submit" type="submit">Submit</button>
        </div>
    </form>
  • 写回答

1条回答 默认 最新

  • douqulv6059 2012-05-07 09:45
    关注

    instead of using fancybox and others approach. if you use plupload, i think that it will nice uload interface and upload status feature. below is the link.please see this may help you.

    http://www.plupload.com/example_queuewidget.php

    instead of show fancybox, i added one div with its loadingId. initially it will be hidden when you click, submit button it show the div, inside this div, you rotating image path. here is complete code.

    i am using jquery for hide show. if you do not want to use jquery, you can use javascript also for hide and show.

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                    <title></title>
    
                    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    
                    <script src="Js/LiveValidation.js" type="text/javascript"></script>
    
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".form-validate-label").validate();
                            $(".form-validate-p").validate({ errorElement: "p" });
                            $(".popup").fancybox();
                        });
                        function showloading() {
                            $("#loadingId").show();
                        }
                    </script>
    
                </head>
                <body>
                    <form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p"
                    enctype="multipart/form-data" action="">
                    <div class="regrow1">
                    <div id="loadingId" style="display:none;">Loading....</div>
                        <div>
                            <label class="label-large">
                                <span class="required">*</span>Headshot Image File:</label>
                            <input class="required" name="head_shot" id="head_shot" size="40" type="file" />
                        </div>
                    </div>
                    <div class="regrow2">
                        <div>
                            <label class="label-large">
                                Attach Resume:</label>
                            <input name="txtcv" id="txtcv" size="40" type="file" />
                        </div>
                    </div>
                    <div class="regrow1">
                        <div>
                            <label class="label-large">
                                Full body shot Image File:</label>
                            <input id="body_shot" name="body_shot" size="40" type="file" />
                        </div>
                    </div>
                    <div class="regrow2">
                        <div>
                            <label class="label-large">
                                Sanpshot Image File:</label>
                            <input id="snap_shot" name="snap_shot" size="40" type="file" />
                        </div>
                    </div>
                    <br />
                    <br />
                    <div id="submitrow">
                        <button id="submit" name="submit" value="Submit" type="submit" onclick="showloading();">Submit</button>
                    </div>
                    </form>
                </body>
                </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开
  • ¥45 工程软件单片机设计课题要求
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上
  • ¥20 WPF 如何实现多语言,label 和cs(live Charts)中是否都能翻译
  • ¥15 STM32F103上电短路问题
  • ¥15 关于#单片机#的问题:以ATMEGA128或相近型号单片机为控制器设计直流电机调速的闭环控制系统(相关搜索:设计报告|软件设计|流程图)
  • ¥15 打开软件提示错误:failed to get wglChoosePixelFormatARB
  • ¥15 (标签-python|关键词-char)