Form inside an html form

Asked

Viewed 2,709 times

1

A doubt that may be simple, but I had no choice:

I have a main HTML form, which captures all the data of a table, the problem is that there is the upload of images inside this form, and this upload is instantaneous without the form Submit (done with AJAX jquery), that is, it is necessary another form to call the php file that treats the image, the problem is that it is a form inside the form, and the Forms do not nest, the larger form does not work (the img is loaded but the larger form does not generate the Submit),

someone has some idea or suggestion?

ps: I didn’t post code because I don’t see the need, it’s one form inside another and the parent form doesn’t work.

javascript jquery html ajax
  • 1

    put the code there :)

  • Ever tried using something like $("#formPai"). Submit(); ? Can’t send data via ajax without needing another form (parent)?

  • "another form is needed to call the php file that treats the image" - Why don’t you do it with ajax too?

  • @Onaiggac, I tried yes, it sends only as far as finished the key of the first FORM, that in Chrome, other browsers it does not send anything

  • @Sergio, The form that calls php is in AJAX, it is necessary to use the form for this.

  • I’m thinking of creating something with javascript to copy the inputs from the first form to an Hidden input in the second form.

  • That last sentence "The form that calls php is in AJAX, it is necessary to use the form for this" It’s not very clear... can you explain it better? You need to send the image to PHP before you do the right form Ubmit? and then receive and put back into the form?

  • Can’t send the parent form via ajax? If you can, try to put an identifier in the inputs and then (when the Submit button is clicked) you capture the values and send via ajax.

  • @Onaiggac, that’s what I did!! Thank you very much!

Show 4 more comments

1 answer

2


Just to get an answer. Follow the HTML code:

<form>
  <input type="text" class="input-form" name="input_pai_0" value="FormPai">
  <form>
      <input type="text" class="input-form" name="input_filho_0" value="FormFilho">
  </form>
  <button class="btnEnviar">Enviar</button>
</form>

Follow the js:

$(document).ready(function(){
    $(".btnEnviar").click(function(){
        //Validações

        var dados = {};
        $(".input-form").each(function(){
            dados[$(this).attr("name")] = $(this).val();
        });

        console.log(dados);

        $.post('/echo/json/', dados, function(data){
            alert('Dados enviados com sucesso!');
        });
    });
});

And link to the example https://jsfiddle.net/afkkobpd/

Browser other questions tagged javascript jquery html ajax

You are not signed in. Login or sign up in order to post.