Question

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?

Answer 1

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