htmlrows javascript的问题 [英] problems with htmlrows javascript

问题描述

我正在尝试使htmlRows正常工作.当我选择产品代码时，我想触发func Choise()并填写价格和名称.

I'm trying to make htmlRows to work. When I select productcode I want to trigger func Choise() and fill price and name.

 <script>
            // get Product Code
        <?php
            $connect = new PDO("mysql:host=localhost;dbname=praktika", "root", "");
            function fill_productCode($connect)
            {
                $output = '';
                $query = "SELECT * FROM services";
                $statement = $connect->prepare($query);
                $statement->execute();
                $result = $statement->fetchAll();
                foreach ($result as $row) {
                    $output .= '<option value="' . $row["code"] . '">' . $row["code"] . '</option>';
                }
                return $output;
            }
            ?>


        var count = $(".itemRow").length;
        $(document).on('click', '#addRows', function() {
            count++;
            var htmlRows = '';

            htmlRows += '<tr>';
            htmlRows += '<td><input class="itemRow" type="checkbox"></td>';
            htmlRows += '<td><select id="selectUsers" onChange="Choice();" type="text" name="productCode[]" class="form-control" autocomplete="off"><option value="">Select</option><?php echo fill_productCode($connect); ?></select></td>';
            // htmlRows += '<td><input type="text" id="serviceName" name="productName[]" class="form-control" autocomplete="off"></td>';    
            htmlRows += '<td><input type="text" id="productName_' + count + '" name="productName[]" class="form-control" autocomplete="off"></td>';
            htmlRows += '<td><input type="number" name="quantity[]" id="quantity_' + count + '" class="form-control quantity" autocomplete="off"></td>';
            htmlRows += '<td><input type="number" name="price[]" id="price_' + count + '" class="form-control price" autocomplete="off"></td>';
            htmlRows += '<td><input type="number" name="total[]" id="total_' + count + '" class="form-control total" autocomplete="off"></td>';
            htmlRows += '</tr>';
            $('#invoiceItem').append(htmlRows);
        });

     var serviceName = new Array();
    var price_1 = new Array();
    var ful = new Array();

    serviceName[0] = "";
    price_1[0] = "";
    ful[0] = "";

    serviceName[1] = "Serverių instaliavimas";
    price_1[1] = "544.99";
    ful[1] = "Buddy Smith";

    serviceName[2] = "Sąskaitų skaitmenizavimas";
    price_1[2] = "111";
    ful[2] = "Libbie Smith";

    serviceName[3] = 4;
    price_1[3] = "asmith";
    ful[3] = "Andy Smith";


    function Choice() {
      //x = document.getElementById("users");
      y = document.getElementById("selectUsers");

      //x.value = y.options[y.selectedIndex].text;
      document.getElementById("serviceName").value = serviceName[y.selectedIndex];
      document.getElementById("price_1").value = price_1[y.selectedIndex];
      document.getElementById("ful").value = ful[y.selectedIndex];
    }
 </script>

推荐答案

如注释中所述，最好将PHP脚本移至自己的页面.

As mentioned in the comment, it is best to move PHP script to their own page.

PHP-getServices.php

<?php
$connect = new PDO("mysql:host=localhost;dbname=praktika", "root", "");
$statement = $connect->prepare("SELECT * FROM services");
$statement->execute();
$result = $statement->fetchAll();
$output = "";
foreach ($result as $row) {
  $output .= '<option value="' . $row["code"] . '">' . $row["code"] . '</option>' . "\r\n";
}
echo $output;
?>

然后您可以在需要时通过AJAX进行获取.

You can then GET this via AJAX when needed.

$.get("getServices.php", function(h){
  $("#selectUsers").html(h);
});

这将发出GET请求，PHP将HTML输出回该请求.

This would make a GET Request and the PHP would output the HTML back to the request.

最好将其设置为类似于API. GET请求可以获取JSON数据，然后根据需要使用jQuery进行操作.

It would be better to set this more like an API. Where a GET request can get JSON data back and then manipulate as needed with jQuery.

jQuery

$(function() {
  function getData(page) {
    var results;
    $.getJSON(page, function(data) {
      results = data;
    });
    return results;
  }

  function addRow(tObj) {
    var c = $("tbody tr", tObj).length;
    var newRow = $("<tr>");
    $("<td>").appendTo(newRow); // 0
    $("<input>", {
      class: "itemRow",
      type: "checkbox"
    }).appendTo($("td", newRow));
    $("<td>").appendTo(newRow); // 1
    var sUser = $("<select>", {
      id: "selectUsers",
      name: "productCode[]",
      class: "form-control",
      autocomplete: "off"
    }).appendTo($("td", newRow).eq(1));
    $("<option>").html("Select User").appendTo(sUser);
    // Populate User Options
    $.each(getData("getUsers.php"), function(i, u) {
      $("<option>", {
        value: u.code
      }).html(u.name).appendTo(sUser);
    });
    $("<td>").appendTo(newRow); // 2
    $("<input>", {
      type: "text",
      id: "productName_" + (c + 1),
      name: "productName[]",
      class: "form-control",
      autofill: "off"
    }).appendTo($("td", newRow).eq(2));
    $("<td>").appendTo(newRow); // 3
    $("<input>", {
      type: "number",
      id: "quantity_" + (c + 1),
      name: "quantity[]",
      class: "form-control quantity",
      autofill: "off"
    }).appendTo($("td", newRow).eq(3));
    $("<td>").appendTo(newRow); // 4
    $("<input>", {
      type: "number",
      id: "price_" + (c + 1),
      name: "price[]",
      class: "form-control price",
      autofill: "off"
    }).appendTo($("td", newRow).eq(4));
    $("<td>").appendTo(newRow); // 5
    $("<input>", {
      type: "number",
      id: "total_" + (c + 1),
      name: "total[]",
      class: "form-control total",
      autofill: "off"
    }).appendTo($("td", newRow).eq(5));
    tObj.append(newRow);
  }

  $(document).on('click', '#addRows', function() {
    addRow($("#invoiceItem"));
  });
});

这可能是潜在的PHP代码:

This would be potential PHP code:

PHP-getUsers.php

<?php
$connect = new PDO("mysql:host=localhost;dbname=praktika", "root", "");
$statement = $connect->prepare("SELECT * FROM users");
$statement->execute();
$result = $statement->fetchAll();
$output = array();
foreach ($result as $row) {
  array_push($output, $row);
}
header('Content-Type: application/json');
echo json_encode($output);
$statement = null;
$connect = null;
?>

这篇关于htmlrows javascript的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！