[SOLVED] Jquery .submit() not working with Dynamically Created Form

pizzipie · 12-11-2021, 06:17 PM

I have a Dynamically Created Form which I can't get to submit.
The Form is displayed on screen and you can enter data just fine but when I press the "save" button nothing happens. How can I adjust my code so that this works?? By the way, his same code with a normal Typed in Form works just fine.

Thanks in advance RP.

Code:

<!--  =======  BUTTON TO SUBMIT FORM  ==================

	 <div class='butpos' >
    	<button type="submit" id='addFormButton' form="addForm" >Save</button>
    	<button type="button" id="bak">Go Back</button>
    </div>
    
// SUBMIT FORM DATA TO DATABASE
	
$("#addForm").submit(function(event) {	
	event.preventDefault();

	var request=$.ajax ({
    	url: "AccountAdd.php",
    	type: "POST",
    	data: $('#addForm').serialize(),
    	dataType: "text"
 	}) 
 	
<!-- =============  DYNAMICALLY CREATE ENTRY FORM  =============== -->

<script type="text/javascript" >

$(document).ready(function () { 

	// get field names from database for use as column headers
 	fieldnames=<?php echo json_encode($fieldNames); ?>;
 	
 	// create form
 	$("<form id='addForm' name='addForm' method='post' action='#'>\n").appendTo('div#form1');  
 	
 	// add 'id' that is auto-increment so don't allow entry
 	 str="<p><label for='"+fieldnames[0]+"'>"+fieldnames[0]+" </label>\n";
    str+="<input class='hov body' id='i1' type='text' readonly name='"+fieldnames[0]+"' value='No Entry' ></p>\n";
    $(str).appendTo('div#form1');
    
   // add remaining elements
 	for(var i=1; i<(fieldnames.length); i++) {
 	 str="<p><label for='"+fieldnames[i]+"'>"+fieldnames[i]+" </label>\n";    
    str+="<input class='hov body' id='i2' type='text' name='"+fieldnames[i]+"' ></p>\n";
    $(str).appendTo('div#form1'); 
 	}

 	// terminate form creation
	$("</form>").appendTo('div#form1');
	
 });
 	
 </script>

pizzipie · 12-12-2021, 04:23 PM

WELL I found another site with a clue and came up with this. It works!

Code:

<!-- =============  DYNAMICALLY CREATE ENTRY FORM  =============== -->

<script type="text/javascript" >

	var str="";

	// get field names from database for use as column headers
 	fieldnames=<?php echo json_encode($fieldNames); ?>;
 	
 	// Create Form
    $('#form1').append("<form action='AccountAdd.php' method='POST'>");
    
    // add controls
	 $("#form1 form").append("<div id='frmcontrols'></div>");
    $('#form1 #frmcontrols').append("<br><input type='submit' class='hov' id='savebutton' value='Insert' />");
    $('#form1 #frmcontrols').append("&nbsp;&nbsp;<button type='button' class='hov' id='bak'>Exit</button><br>");
    
    // add field 'id' which is auto-increment so readonly
    str="<p><label for='"+fieldnames[0]+"'>"+fieldnames[0]+" </label>\n";
    str+="<input class='hov body' id='i1' type='text' readonly name='"+fieldnames[0]+"' value='Auto Increment - No Entry' ></p>\n"; 
    $('#form1 form').append(str);
     
    // add remaining elements
 	for(var i=1; i<(fieldnames.length); i++) {
 		 	str="<p><label for='"+fieldnames[i]+"'>"+fieldnames[i]+" </label>\n";    
    		str+="<input class='hov body' id='i2' type='text' name='"+fieldnames[i]+"' ></p>\n";
    	 $('#form1 form').append(str);
 		}


 $("#bak").click(function () {
 	window.location.href="AccountsFrontEnd.php";	
 });
	
 </script>

astrogeek · 12-12-2021, 07:27 PM

Thank you for returning with your solution.

It would be more helpful to others in future if you would point out the essential differences between your original code and the solution code. The thing that I see in a quick look is the change in the action target of the form element, which makes sense, but was that the change which fixed it for you?