Question

我有一种使用ajax和php插入数据的表格

我已经按照我想要的方式工作了，但是我想对其进行一些调整，以下是我想说的

最初

<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>

默认情况下在页面上加载按钮时有效，

我要进行的调整是出于某种原因使用ajax显示，其原因是在div中使用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>

该按钮提交我想通过Ajax显示在div中的数据，请在这方面我需要帮助

Answer 1

使用jquery on：

$("body").on("submit", "#<?php echo $row_trx['jobid']; ?>", function(e) { ...

我不喜欢选择器，但是您始终可以为表单设置类，例如：

<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>

并丢失javascript中的php，如下所示：

 $("body").on("submit", ".my_form", function(e) { ....

我使用ajax显示按钮后，我的按钮拒绝提交

1 个答案: