0

これが私の現在のコードです：

$(document).ready(function(){
    $("input#url").bind("textchange",showPage);
    $("input#url").focus();


    $("form#surlform").submit(function(){
        var url = $("input#url").val(); 
        $.get("api/create.php?url=" + url, function(data) {
                $("input#url").val(data);
                $("input#url").select();
            });

        return false;
    });
    });

$(document).click(function(){
    showPage();
});
$(document).mousemove(function(){
    showPage();
});

現時点では、フォームが送信されると、jQuery はページのリロードを停止し、必要な出力を API から単にプルします。できればボタンも変更して、ボタンのテキストを変えたり、jQueryでフォームを送信する代わりにページにリンクしたりしたいです。（それが役立つ場合、変更後のボタンはdivにすることができます-元のボタンのみがフォームのボタンである必要があります）。

それだけではありません...テキストフィールドのテキストが変更されたときに、元のテキストでjQueryを介してフォームを送信するボタンに戻るように変更したいと思います。

これは非常に大きな質問ですが、誰かがこれに取り組む方法を持っているなら、私はとても感謝しています.

4

1 に答える 1

1

このようなもの？：

HTML：

<form id="someForm">
    <input id="someInput" type="text" />
    <input id="submitButton" type="submit" />
    <input id="linkButton" type="button" value="Submit" />
</form>​

CSS：

#linkButton { display: none; }​

JavaScript：

$('#someForm').submit(function () {
    $('#submitButton').hide();
    $('#linkButton').show();
    return false;
});

$('#linkButton').click(function () {
    alert('use something like window.location here to act like a link');
});

$('#someInput').change(function () {
    $('#linkButton').hide();
    $('#submitButton').show();
});

現時点では非常に単純であり、ある程度の改善が必要になる可能性がありますが、アイデアは十分に単純です...

  1. ページが最初に読み込まれるとき、「リンク」ボタンは非表示になっています。
  2. 「送信」ボタンがクリックされるたびに、「送信」ボタンが非表示になり、「リンク」ボタンが表示されます。（当然、 AJAXを実行した後は、簡潔にするためにここには含まれていません。）
  3. 「リンク」ボタンがクリックされるたびに、何かをしてください。あなたの場合、それはリンクとして機能することですよね？ window.location = 'some new location';本質的に。
  4. テキストが変更されるたびに、「リンク」ボタンが非表示になり、「送信」ボタンが表示されます。それらがすでに隠されて表示されている場合でも、害はありません。（これを行うには、おそらくよりエレガントで、毎回表示と非表示を少なくする方法がありますが、それで作業は完了します。）
于 2012-05-30T01:18:21.457 に答える