0

私は次のコードを持っています：

  <form action="" id="search-form">
    <fieldset>
      <div class="rowElem">
        <input type="text">
        <a href="#" onClick="document.getElementById('search-form').submit()">
        <div>Search</div>
        </a></div>
    </fieldset>
  </form>

<script>
$(document).ready(function() {
$('#search-form').submit(function(event){
    event.preventDefault();
    alert("test");

});
});
</script>

フォームを送信してもアラートが表示されません...何が欠けていますか？

ありがとう、

4

3 に答える 3

4

目障りな onclick イベントを削除し、代わりにリンクにバインドする必要があります。

送信後にアラートを出すことはできません。これは、フォームに指定したアクションが実行されるためです (ほとんどの場合、ページから移動します。そうすることに固執する場合は、次のようにします。

<form action="" id="search-form">
    <fieldset>
        <div class="rowElem">
            <input id="name" type="text"></input>
            <a href="#" id="search" >Search</a>
        </div>
    </fieldset>
</form>       

<script>
    $(document).ready(function() {
        $('#search').bind('click', function () {
            // Alert the name BEFORE you do the form post
            alert($('#name).val());
            $('#search-form').submit(function(event){

            });
        });
    });
</script>

ここにJSFiddleの実際の例があります：http://jsfiddle.net/7jqUF/5/

代わりに、AJAX ソリューションが必要な場合は、ajax 投稿など、フォーム投稿以外のことをしたいと思うでしょう。

<script>
    $(document).ready(function() {
        $('#search').bind('click', function () {
            // Alert the name BEFORE you do the form post
            alert($('#name).val());
            $.post('/ServerUrl/method', { name: $('#name').val() });
        });
    });
</script>
于 2013-03-14T03:35:18.837 に答える
1

次のようなことをしてみませんか

<form action="" id="search-form">
    <fieldset>
      <div class="rowElem">
          <input name="query" type="text" /><br />
          <a class="search" href="#">Search</a>
      </div>
    </fieldset>
</form>

と

var form = $('#search-form');
$('.search', form).click(function(event){
    event.preventDefault();

    var query = $('input[name="query"]', form).val();

    alert("test: " + query);

});

デモ:フィドル

パラメータをajaxリクエストの一部として使用したい場合は、次のようにすることができます

var form = $('#search-form');
$('.search', form).click(function(event){
    event.preventDefault();

    var params = form.serialize();

    alert("test: " + form.serialize());

$.ajax({
    url: '...',
    data: params,
    ....
})   

});
于 2013-03-14T03:39:58.250 に答える
0

次のコードを試してください。$(document).ready関数から送信コードを削除した後

 <a href="#" onclick="document.getElementById('search-form').submit();">
于 2013-03-14T03:38:51.753 に答える