0

我为电子邮件地址创建了一个输入表单，该表单可以正常工作并使用 AJAX 和 jQuery 进行验证。我所需要的只是“提交”按钮，以便在验证表单后开始下载特定文件。此文件不会更改，只要电子邮件有效，每个用户都将相同。

我需要在我的 jQuery 验证文件中添加什么才能使其正常工作？谢谢！

这是我的表单代码：

<form name="contact" method="post">

    <div id="multitudes-download-form">

        <div style="float:left;">
            <label for="email">Your Email:</label>
            <input type="text" name="email" id="email" value=""/>
        </div>

        <div>
        <input type="submit" name="submit" class="button" id="submit_btn" value="Download Now" />

        <span class="error" id="email_val_error">Please provide a valid email address.</span><div id="loadingdiv" style="float:right;"><img src="../ajax-loader.gif"/></div>
        </div>
    </div>

</form>

这是我的验证：

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();

        var email = $("input#email").val();
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length || email== "") {
        $("span#email_val_error").fadeIn();
        $("input#email").focus();
        return false;
    }

        var dataString = 'email=' + email;
        //alert (dataString);return false;

        $.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        $('#multitudes-download-form').html("<h6>Thank you!</h6>")
        .hide()
        .fadeIn(500, function() {
        });
      }
     });
    return false;
    });
});

$(function() {
    $('#loadingdiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).fadeIn();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
});
4

1 回答 1

1

您可以使用 ajax 成功事件上的单击功能触发锚标记以下载文件。提供锚标签的下载链接，并将其设置为 display:none 作为内联样式

于 2012-10-07T04:02:06.730 回答