PHP AJAX, как отображать динамические значения в динамических полях выбора - PullRequest
Новая
       3

PHP AJAX, как отображать динамические значения в динамических полях выбора

0 голосов
/ 19 декабря 2018

Я ищу помощь

Я взял код добавления нескольких строк в начальной загрузке, в котором я пытаюсь получить значения из полей выбора, используя php внутри javascript, используя ajax, который он получаетзначение из базы данных, он отлично работает для первой строки, но когда дело доходит до нескольких строк, он просто получает значение и снова добавляет к первой строке, что мне нужно, чтобы получить значение в той же строке, откуда он был выбран здеськод 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="au theme template">
    <meta name="author" content="Hau Nguyen">
    <meta name="keywords" content="au theme template">

    <!-- Title Page-->
    <title>Dashboard 3</title>

    <!-- Fontfaces CSS-->
    <link href="css/font-face.css" rel="stylesheet" media="all">
    <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
    <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">


<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <!-- Bootstrap CSS-->
    <link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">

    <!-- Vendor CSS-->
    <link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
    <link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
    <link href="vendor/wow/animate.css" rel="stylesheet" media="all">
    <link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
    <link href="vendor/slick/slick.css" rel="stylesheet" media="all">
    <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link href="css/theme.css" rel="stylesheet" media="all">

</head>


<?php

    $connection = mysqli_connect('localhost','root','','quotation');

 ?>



<?php

        if(isset($_POST['submit']))
        {
            $name = $_POST['name'];
            $mail = $_POST['mail'];
            $phone = $_POST['phone'];


            $name1 = count($_POST['name']);

            $mail1 = count($_POST['mail']);

            $phone1 = count($_POST['phone']);


            print_r($name);

            echo "<br>";

            print_r($mail);

            echo "<br>";

            print_r($phone);

            echo "<br>";





            echo $name1;
            echo $mail1;
            echo $phone1;
        }

 ?>

    <br>
    <div class="container">
        <div class="row">
            <div class="col col-sm6">

                        <a href="#">
                            <img src="images/icon/Omni_logo_for_web2.png" alt="CoolAdmin" />
                            <p style="color:gray;"><i>Transforming People and Business</i></p>
                        </a>
                    <p>
                        A-242, Sardar Ali Sabri Rd.     <br>
Block-2, Gulshan-e-Iqbal <br>   
Karachi.    <br>
Phone: 021-3498OMNI(6664)  Mobile: 0312-2169325, 0337-7222191   
<br> SNTN   : S0529023-6

<br>
TaxpayerName    : OMNI ACADEMY



                    </p>

            </div>

        <div class="col col-sm6">

                        <h2 style="color:gray">Quotations</h2>
                    <p>
                        DATE    2018-12-17
    <br>
RFQ#    0308-2018
<br>    
Karachi.    <br>
Phone: 021-3498OMNI(6664)  Mobile: 0312-2169325, 0337-7222191   
<br> SNTN   : S0529023-6
Customer ID 408
<br>
Customer NTN/SNTN   NA

<br>
<br>
        Customer    Lakson Group
<br>

Valid until:            28-Nov-2018

<br>
        Prepared by:    FIN-03





                    </p>

            </div>
        </div>


    </div>

    <br>

    <form method="post">

        <div class="container">
    <table id="myTable" class=" table order-list">
    <thead>
        <tr>
            <td>Name</td>
            <td>Gmail</td>
            <td>Phone</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
        </tr>
    </tfoot>
</table>
</div>

    <input type="submit" name = 'submit' value="Subm">

    </form>


<script>
    $(document).ready(function () {
    var counter = 0;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><select onchange = "myfunc(this.value)" name="name[]" class="form-control" ' + counter + '" ><?php $select_courses = "select * from courses"; 
            $run_select = mysqli_query($connection,$select_courses);

            while($row = mysqli_fetch_assoc($run_select)){

            $name = $row["name"];
            $course_id = $row["course_id"];


        ?><option value="<?php echo $course_id ?>"><?php echo $name; ?></option> <?php } ?></select></td>';
        cols += '<td id="getdata" ' + counter + '"></td>';
        cols += '<td><input type="text" class="form-control" name="phone[]' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}



function myfunc(datavalue)



            {
                $.ajax({

                    url:'getdata.php',
                    type:'post',
                    data:{

                        datapost:datavalue
                    },
                    success:function(result){

                        $('#getdata').html(result);
                    }
                });
            }









</script>


            <?php include('include/footer.php'); ?>
<!-- end document-->

getdata.php

<?php

    $connection = mysqli_connect('localhost','root','','quotation');

 ?>
<?php


    $name_id = $_POST['datapost'];

    $q = "select * from courses where course_id = '$name_id'";

    $result = mysqli_query($connection,$q);

    $rows = mysqli_fetch_assoc($result);
?>


    <input type="text" name = "phone[]" value="<?php echo $rows['name']; ?>">

1 Ответ

0 голосов
/ 19 декабря 2018

Вы можете сделать следующее:

Установить уникальный идентификатор для ваших select и getdata. 

<select id="select'+counter+'">
<td id="getdata'+counter+'"></td>

Вы можете вызвать функцию изменения select отдельно или передать идентификаторна myfunc и проанализируйте его оттуда. 

    $(document).on('change', 'select[name="name[]"]', function(){
        idName = $(this).attr('id');        //finding id of the element
        id = idName.substring(6, idName.length);      //finding id number
        var datavalue = $(this).val();
        myfunc(datavalue, id);
    });

Измените myfunc следующим образом. 

function myfunc(datavalue, id) {
    $.ajax({

        url:'getdata.php',
        type:'post',
        data:{

            datapost:datavalue
        },
        success:function(result){

            $('#getdata'+id).html(result);
        }
    });
 }

А также вам нужно быть осторожным при сохранении уникальных идентификаторов при удалении строк,Вы можете проверить здесь , как динамически добавлять и удалять строки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...