my button refuses to submit after i display it using ajax

Question

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

Is there any way you can post the HTML after PHP has rendered it? It would help a lot towards debugging this. — Doug F, Apr 01 '19 at 12:54
its in already in the code, note the button that says "add to favourite" — Lloyd, Apr 01 '19 at 13:01
hi @angel.bonev please make it an answer with my code so i can check and mark it correct — Lloyd, Apr 01 '19 at 13:03

score 0 · Accepted Answer · answered Apr 01 '19 at 13:11

0

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) { ....

answered Apr 01 '19 at 13:11

angel.bonev

1,477
1
13
21

this still didnt work, the data dsent get submitted – Lloyd Apr 01 '19 at 13:24
hi what could be the issue am still expectin a respnse from u – Lloyd Apr 01 '19 at 16:04
cilly me, i had two divs trying to display the button, once i took one off it worked – Lloyd Apr 02 '19 at 05:37

my button refuses to submit after i display it using ajax

1 Answers1