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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）