1

2つの別々のフォーム、イベント、オファーを読み込むための2つのボタンがあります。ユーザーがボタンをクリックすると、関連するhtmlフォームをロードして、ボタンを非表示にします。

イベントロードevents.html
オファーロードoffers.html

<div class="view_col">
    <form id="form1" name="form_b" method="post" action="">
        <input name="c_event" class="clr" type="button" value="event" />
        <input name="c_offer" class="clr" type="button" value="offer" />
    </form>
</div>

フォームをにロードします

<div id="form_body"> </div>

ユーザーがクリックした後にボタンが消えることを確認したい。

誰かがそれを行う方法のアイデアを与えることができますか？

4

2 に答える 2

1

$.load()を使用して、外部HTMLページからHTMLを取得する必要があります。次のようなものを試してください。

HTML

<div class="view_col">
    <form id="form1" name="form_b" method="post" action="">
        <input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
        <input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
    </form>
</div>

jQuery

$("#eventsBtn").on('click', function() { 
    $("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() { 
    $("#form_body").load('offers_loads_events.html');
});

load（）に関する詳細情報。

于 2012-04-08T09:54:12.463 に答える
0

jQueryを使用する場合、これは非常に簡単です。

$('#form1 input').on('click', function(event) {
  var $target = $(event.target);
  $('#form_body').load($target.data('url'));
  $('#form1').hide();
})

htmlを次のように変更する必要があります。

<div class="view_col">
  <form id="form1" name="form_b" method="post" action="">
  <input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
  <input name="c_offer" class="clr" type="button" value="offer" />
</div>
于 2012-04-08T09:58:47.513 に答える