Question

我有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>

我希望确保在用户点击后按钮消失。

有人能说出如何做到这一点吗？

Answer 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();

的更多信息

Answer 2

如果您使用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>

使用ajax / query加载外部文件

2 个答案: