-1

通常のボタンが付いたajax/jqueryconatctフォームをダウンロードしました。しかし、ボタンをテキストリンクに置き換えたいと思います。私はウェブからたくさんの提案を試みてきましたが、どれもうまくいかないようです。

どんな助けでも大歓迎です。

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#contact_form').submit(function(e){
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $('#loader', form).html('<img src="loader.gif" /> Please Wait...');
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function(msg) {
                $(form).fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
    });
});
</script>
</head>
<body>
<form action="process.php" method="post" id="contact_form">
    <div>
         <label for="name">Your Name:</label>
         <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
    <div>
         <label for="email">Your Email:</label>
         <input type="text" name="email" id="email" value="" tabindex="2" />
    </div>
    <div>
        <label for="message">Message:</label>
        <textarea cols="40" rows="8" name="message" id="message"></textarea>
    </div>
    <div id="loader">
        <input type="submit" value="Submit" /> 
    </div>
</form>
</body>
</html>
4

3 に答える 3

0

<a />送信ボタンをタグに置き換えるだけの場合：

HTMLで、<input />タグを置き換えます。

<div id="loader">
    <!-- <input type="submit" value="Submit" /> -->
    <a id="yourID" href="" >Your Text</a>
</div>

jQueryを使用してイベントハンドラーを新しい<a />タグにアタッチします。

$("#yourID").on("click",function(){
    $("#contact_form").trigger("submit");
});
于 2012-07-16T07:28:25.487 に答える
0

ボタンを次のように置き換えます

<a href="#" id="submit">Submit</a>

次に、次のコードを使用します（Form ajaxコードの後または前）

$('#submit').click(function (e){
  e.preventDefault();
  $('#contact_form').submit();
});
于 2012-07-16T07:28:42.510 に答える
0

HTML

<div id="loader">
    <a href="#" class="submit">Submit</a> 
</div>

JS

$(function(){
    $('#contact_form').submit(function(e){
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $('#loader', form).html('<img src="loader.gif" /> Please Wait...');
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function(msg) {
                $(form).fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
    }).delegate('a.submit', 'click', function() {
        $(this).closest('form').submit();
        return false;
    });
});
于 2012-07-16T07:30:04.180 に答える