CODEWITHSUNDEEP
htmlajaxformsjquery
LiveEn
LiveEn

Reputation: 3253

load external files using ajax/query

I'm having 2 buttons to load 2 separate forms, events and offers. when a user clicks on a button i want to load the relevant html form and make the buttons disappear.

events loads events.html
offers loads 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>

load the form to

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

i want make sure that the buttons are disappear after the user has clicked.

Can someone give an idea how to do it?

Upvotes: 1

Views: 806

Answers (2)

Koen Peters
Koen Peters

Reputation: 12916

If you use jQuery then this is quite easy:

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

You would have to change you html into this:

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

You need to use $.load() to get the HTML from your external HTML pages. Try something like this:

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');
});

More information on load();

Upvotes: 1

Related Questions