externe Dateien laden mit Ajax/Abfrage

Question

Ich habe 2 Tasten, um 2 separate Formulare, Veranstaltungen und Angebote zu laden. Wenn ein Benutzer auf eine Schaltfläche klickt, möchte ich das entsprechende HTML-Formular laden und die Schaltflächen verschwinden lassen.

Ereignisse Lasten events.html
bietet jede 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> 

Last der Form

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

i sicher machen wollen, dass die Tasten nach dem verschwinden werden Benutzer hat geklickt.

Kann jemand eine Idee geben, wie man es macht?

Answer 1

Sie müssen $.load() verwenden, um den HTML-Code von Ihren externen HTML-Seiten zu erhalten. Probieren Sie etwas wie folgt aus:

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

Mehr Informationen über load();

Answer 2

Wenn Sie jQuery verwenden, dann ist dies ganz einfach:

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

Sie müssten Ihren HTML-Code wie folgt ändern:

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