my button refuses to submit after i display it using ajax [duplicate] - php

Question

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a form in which i use to insert data using ajax and php
I have gotten it to work the way i want but i wanted to make some adjustments to it, below is what i am trying to say
Initially
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--AJAX-->
<script>
$(document).ready(function() {
<!--#my-form grabs the form id-->
$("#<?php echo $row_trx['jobid']; ?>").submit(function(e) {
e.preventDefault();
$.ajax( {
<!--insert.php calls the PHP file-->
url: "in.php",
method: "post",
data : { name: "<?php echo $row_user['Username'];?>" , jobid: "<?php echo $row_trx['jobid']; ?>" },
dataType: "text",
success: function(strMessage) {
$("#message").text(strMessage);
$("#<?php echo $row_trx['jobid']; ?>")[0].reset();
}
});
});
});
</script>
<form id="<?php echo $row_trx['jobid']; ?>" name="<?php echo $row_trx['jobid']; ?>" id="form<?php echo $row_trx['jobid']; ?>" action="" method="post">
<button type="submit" id ="<?php echo $row_trx['jobid']; ?>">Add as favourite</button>
</form>
which works when the button is loaded on the page by default,
Adjustments i wanted to make was to display using ajax for some reason using below in the div with id='ajaxDiv'
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
setInterval(ajaxFunction<?php echo $row_trx['jobid']; ?>, 1000);
function ajaxFunction<?php echo $row_trx['jobid']; ?>(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay<?php echo $row_trx['jobid']; ?> = document.getElementById('ajaxDiv<?php echo $row_trx['jobid']; ?>');
ajaxDisplay<?php echo $row_trx['jobid']; ?>.innerHTML = ajaxRequest.responseText;
}
}
var age = document.getElementById('age<?php echo $row_trx['jobid']; ?>').value;
var wpm = document.getElementById('wpm<?php echo $row_trx['jobid']; ?>').value;
var queryString = "?age=" + age + "&wpm=" + wpm;
ajaxRequest.open("GET", "favourite.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form style="font-size: 1px;" name='myForm<?php echo $row_trx['jobid']; ?>'>
<input type='hidden' value="<?php echo $row_user['Username'];?>" id='age<?php echo $row_trx['jobid']; ?>' /> <br />
<input type='hidden' value="<?php echo $row_trx['jobid']; ?>" id='wpm<?php echo $row_trx['jobid']; ?>' />
<br />
</form>
<div id='ajaxDiv<?php echo $row_trx['jobid']; ?>'></div>
the button submit my data wen i try to display in the div via ajax, please i need help on this

Answer 1

Use jquery on :
$("body").on("submit", "#<?php echo $row_trx['jobid']; ?>", function(e) { ...
I don't like you selectors btw you can always set class for the form, for example something like this :
<form class="my_form"><input name="id" value="1" />...Some code here ..</form>
<form class="my_form"><input name="id" value="2" />...Some code here ..</form>
<form class="my_form"><input name="id" value="3" />...Some code here ..</form>
and lose the php in the javascript, like this:
$("body").on("submit", ".my_form", function(e) { ....