Trimitere de valori dintr-un formular in aceeasi pagina

Mariusiky · Mesajde **Mariusiky** » Joi Oct 01, 2015 4:20 pm

Salutare,

Am nevoie de putin ajutor pentru ca nu ma prea descurc cu javascript-ul si ajax-ul.

<form class="form-inline" role="form" action="#">
              <div class="form-group">
                   <label for="web_page">Web page:</label>
                 <input type="text" class="form-control" id="web_page" placeholder="http://website.com" style="width:400px;">
              </div>   
              <button type="submit" class="btn btn-default" name="submit" id="submit">Submit</button> 
         </form>

Am acest formular. Cum pot face sa trimit valoarea din input la un script iar respectivul script sa-mi afiseze printr-un iframe de sub formular informatia intoarsa? Sau, cum as putea sa afisez informatia pe care o returneaza acel script direct sub acest formular instant fara sa reincarc pagina.

CristianG · Mesajde **CristianG** » Mie Oct 07, 2015 2:43 am

Pentru un inceput trebuie sa folosesti submit.

Cod: Selectaţi tot

 $("#newform").submit(function(event) {

});

Cod: Selectaţi tot

<form id="newform" class="form-inline" role="form" action="#">
              <div class="form-group">
                   <label for="web_page">Web page:</label>
                 <input type="text" class="form-control" id="web_page" placeholder="http://website.com" style="width:400px;">
              </div>   
              <button type="submit" class="btn btn-default" name="submit" id="submit">Submit</button>
         </form>

Ca sa revenim la subiectul principal va trebui sa faci un div cu id #result pentru a putea returna in div`ul respectiv rezultatul si vine ceva de genu asa.

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   </head>
   <body>
      <form id="newform" class="form-inline" role="form" action="#">
         <div class="form-group">
            <label for="web_page">Web page:</label>
            <input name="website" type="text" class="form-control" id="web_page" placeholder="http://website.com" style="width:400px;">
         </div>   
         <button type="submit" class="btn btn-default" name="submit" id="submit">Submit</button>
      </form>
      <!-- Aici va printa rezultatul -->
      <div id="result"></div>
      <script>

         $("#newform").submit(function(event) {
            event.preventDefault();
            var $form = $(this),
               term = $form.find('input[name="website"]').val(),
               url = $form.attr('action');

            var posting = $.post(url, {
               s: term
            });
            posting.done(function(data) {
               var content = $(data).find('#content');
               $("#result").empty().append(content);
            });
         });
      </script>
   </body>
</html>

Nu te gandi ca o sa mearga sau o sa fie tot ce ai nevoie, este un exemplu si trateazal ca atare !

Success

Trimitere de valori dintr-un formular in aceeasi pagina

Trimitere de valori dintr-un formular in aceeasi pagina

Re: Trimitere de valori dintr-un formular in aceeasi pagina

Cine este conectat