[HTML] form in form

Salutare,

Ma confrunt cu urmatoarea problema. Am formul (mare) de mai jos.

As dori ca atunci cand apas pe butonul "Adauga persoana", sa mi deschisa un (alt) form (de preferat imediat sub buton) si cand apas pe butonul adauga din formul secundar, sa mi se salveze in baza de date (cu ajax) detalile, sa-mi inchida formul secundar si sa-mi afiseze langa butonul de "Adauga personae" (din formul mare) si numele persoanei respective.

Nu stiu (nu cred) daca <form> in <form> merge (e permis), si totusi, trebuie sa existe un workaround, sau o solutie la problema mea, pentru a putea face ceea ce vreau.
Eroare nu am (sau cel putin nu vad), dar nu-mi face ce vreau.

Va rog, ceva idei? Un pic de ajutor? Multumesc

<form class="form-horizontal style-form" action="#" method="POST">
						 <div class="form-group">
							 <label class="col-sm-2 col-sm-2 control-label">Nume</label>
							 <div class="col-sm-10">
								 <input type="text" name="numeop" class="form-control">
							 </div>
						 </div>
						 <div class="form-group">
							 <label class="col-sm-2 col-sm-2 control-label">Descriere</label>
							 <div class="col-sm-10">
								 <input type="text" name="descriere" class="form-control">
							 </div>
						 </div>
						 <div class="form-group ">
						 <label class="col-sm-2 col-sm-2 control-label">Persoane Participante</label>
						 <div class="col-sm-10">
								 <p>
								 <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#adaugap" aria-expanded="false" aria-controls="adaugap" onclick="adaugap()">
								 Adauga participanti
								 </button>
							 </p>
						
						 </div>
						 </div>
							 <div class="collapse" id="adaugap">
								 <form>
								 <div class="form-group">
									 <label class="col-sm-2 col-sm-2 control-label">Nume Participant</label>
									 <div class="col-sm-10">
										 <input type="text" name="numep" class="form-control">
									 </div>
								 </div>
								 <div class="form-group">
									 <label class="col-sm-2 col-sm-2 control-label">Prenume Participant</label>
									 <div class="col-sm-10">
										 <input type="text" name="prenumep" class="form-control">
									 </div>
								 </div>
								 <div class="form-group">
									 <label class="col-sm-2 col-sm-2 control-label">Numar telefon</label>
									 <div class="col-sm-10">
										 <input type="text" name="telefonp" class="form-control">
									 </div>
								 </div>
								 <button class="btn btn-danger pull-right" type="button">Sterge</button>
								 <button class="btn btn-primary pull-right" type="button" style="margin-right:10px;">Adauga participant</button>
								 </form>
							 </div>
					 </form>

Si varianta 2:

<form class="form-horizontal style-form" action="#" method="POST">
						 <div class="form-group">
							 <label class="col-sm-2 col-sm-2 control-label">Nume</label>
							 <div class="col-sm-10">
								 <input type="text" name="numeop" class="form-control">
							 </div>
						 </div>
						 <div class="form-group">
							 <label class="col-sm-2 col-sm-2 control-label">Descriere</label>
							 <div class="col-sm-10">
								 <input type="text" name="descriere" class="form-control">
							 </div>
						 </div>
						 <div class="form-group ">
						 <label class="col-sm-2 col-sm-2 control-label">Persoane Participante</label>
						 <div class="col-sm-10">
								 <p>
								 <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#adaugap" aria-expanded="false" aria-controls="adaugap" onclick="adaugap()">
								 Adauga participanti
								 </button>
							 </p>
							 <div id="form"></div>
						 </div>
						 </div>
					 </form>
					
<script type="text/javascript">
function adaugap() {

var form='<div class="collapse" id="adaugap"><form action="form.php" id="padaug" method="post"><div class="form-group"><label class="col-sm-2 col-sm-2 control-label">Nume Participant</label><div class="col-sm-10"><input type="text" name="numep" class="form-control"></div></div><div class="form-group"><label class="col-sm-2 col-sm-2 control-label">Prenume Participant</label><div class="col-sm-10"><input type="text" name="prenumep" class="form-control"></div></div><div class="form-group"><label class="col-sm-2 col-sm-2 control-label">Numar telefon</label><button class="btn btn-danger pull-right" type="button">Sterge</button><button class="btn btn-primary pull-right" type="sumit" id="sumit" name="sumit" style="margin-right:10px;">Adauga participant</button></form></div>';
	document.getElementById('form').innerHTML += form;
};
</script>

<script type="text/javascript">
// actiunea de submit
$( "#padaug" ).sumit(function( event ) {

// nu submite automat
event.preventDefault();

// ia valorile din pagina
var $form = $( this );
	 var formData = {
		 'numep'			 : $('input[name=numep]').val(),
		 'prenumep'			 : $('input[name=prenumep]').val(),
		 'telefon' : $('input[name=telefonp]').val(),
	 };
	 var url = $form.attr( "action" );

// trimite datele
var posting = $.post( url, formData );
// actualizeaza pagina
	 });
});
</script>

Edited by colombo2003, 20 September 2017 - 18:32.

Ajax n-are treaba cu <form>.

Dupa lupte secular... am reusit, am rezolvat!
Multumesc, se poate inchide!

Edited by colombo2003, 10 October 2017 - 22:13.