0

AJAX と jQuery で正常に動作し、検証する電子メール アドレスの 1 つの入力フォームを作成しました。必要なのは、フォームが検証されたら特定のファイルのダウンロードを開始するための「送信」ボタンだけです。このファイルは変更されません。電子メールが有効である限り、すべてのユーザーで同じです。

これを機能させるには、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 に答える