Question

当我尝试从第一行选择选项值时，没有问题，但如果我添加更多并在第二行中选择可选值，那么它首先会发生冲突。每当您选择可选值时，只有第一行冲突我想要在更改第一个选择选项时第一行更改。第二行选择仅更改第二行值。

的index.php

<?php
if(!empty($_POST["save"])) {
        $conn = mysql_connect("localhost","root","");
    mysql_select_db("ajaxphp",$conn);
        $itemCount  =   count($_POST["item_name"]);
        $itemValues =   0;
        $query      =   "INSERT INTO item (item_name,item_price) VALUES ";
        $queryValue =   "";
    for($i=0;$i<$itemCount;$i++) {
        if(!empty($_POST["item_name"][$i]) || !empty($_POST["item_price"][$i])) {
            $itemValues++;
            if($queryValue!="") {
                $queryValue .= ",";
            }
            $queryValue .= "('" . $_POST["item_name"][$i] . "', '" . $_POST["item_price"][$i] . "')";
        }
    }
    $sql = $query.$queryValue;
    if($itemValues!=0) {
        $result = mysql_query($sql);
        if(!empty($result)) $message = "Added Successfully.";
    }
}
?>
<HTML>
<HEAD>
<TITLE>PHP jQuery Dynamic Textbox</TITLE>
<LINK href="style.css" rel="stylesheet" type="text/css" />
<SCRIPT src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT>
<SCRIPT>
function addMore() {
    $("<DIV>").load("input.php", function() {
        $("#product").append($(this).html());
    }); 
}
function deleteRow() {
    $('DIV.product-item').each(function(index, item){
        jQuery(':checkbox', this).each(function () {
            if ($(this).is(':checked')) {
                $(item).remove();
            }
        });
    });
}
</SCRIPT>
</HEAD>
<BODY>
    <FORM name="frmProduct" method="post" action="">
        <DIV id="outer">
            <DIV id="header">
                <DIV class="float-left">&nbsp;</DIV>
                <DIV class="float-left col-heading">Item Name</DIV>
                <DIV class="float-left col-heading">Item Price</DIV>
            </DIV>
            <DIV id="product">
                <?php require_once("input.php") ?>
            </DIV>
            <DIV class="btn-action float-clear">
                <input type="button" name="add_item" value="Add More" onClick="addMore();" />
                <input type="button" name="del_item" value="Delete" onClick="deleteRow();" />
                <span class="success"><?php if(isset($message)) { echo $message; }?></span>
            </DIV>
            <DIV class="footer">
                <input type="submit" name="save" value="Save" />
            </DIV>
        </DIV>
    </form>
</BODY>
</HTML>

input.php

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function salesdetail(item_index)
{   
    alert(item_index);

    $.ajax({

        url: 'getsaleinfo.php',
        type: 'POST',
        data: {item_index:item_index},`
        success:function(result){
                alert(result);
                $('#div1').html(result);
        }           
    });
}
</script>

<DIV class="product-item float-clear" style="clear:both;">
    <DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
    <DIV class="float-left"><select name="item_index" id="item_index"  class="required input-small" onchange="salesdetail(this.value);" >
        <option>Select</option>
        <?php
            $conn   =   mysql_connect("localhost","root","");
            mysql_select_db("ajaxphp",$conn);
            $result =   mysql_query("select * from item");
            while($row=mysql_fetch_assoc($result))
            {
                echo "<option>".$row['item_name']."</option>";
            }         
        ?>
        </select>
    </DIV>
    <DIV class="float-left" id="div1"><input type="text" id="unit_price" name="unit_price" /></DIV>
</DIV>

和getsaleinfo.php

<?php
    $conn    =  mysql_connect("localhost","root","");
    mysql_select_db("ajaxphp",$conn);
    $supplier=  $_POST['item_index'];
    $sql     =  "select * from item where item_name='$supplier'";
    $rs      =  mysql_query($sql);
?>
<?php
if($row = mysql_fetch_array($rs)) {
?>
    <div class="float-left">
        <!--<label id="unit" ></label>-->
        <input  type="text"  name="unit_price" id="unit_price" class="input-mini" value="<?php echo $row['item_price'];?>" >
    </div>
<?php   }
?>

数据库

CREATE TABLE IF NOT EXISTS `item` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `item_name` varchar(255) NOT NULL,
  `item_price` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `item` (`id`, `item_name`, `item_price`) VALUES
(1, 'hello', 21),
(2, 'hi', 22);

Answer 1

当您更改下拉列表中的选择时，它会将请求发送到服务器：

getsaleinfo.php with item_index：'hello'

执行

从项目中选择*，其中item_name ='hello'（一行）

发送

<div class="float-left">
    <!--<label id="unit" ></label>-->
    <input  type="text"  name="unit_price" id="unit_price" class="input-mini" 
            value="<?php echo $row['item_price'];?>" >
</div>

回到来电者。

javascript将整个内容放在#div1中，取代那里的所有内容。

从我收集的内容来看，addMore（）每次都会加载整个input.php并将其附加到#product。

首先，这意味着你重复添加jquery和函数定义，但其次（和主要问题） - 每个都添加一个ID = div1的新div。

致电时

$('#div1').html(result)

在你的salesdetail函数中的

，它只引用第一个（因为根据HTML，你只能有一个每个ID的实例，其他的被忽略。

Answer 2

试试这个......

        $('body').on('change','#item_index',function() {    //works for ajax loaded contents
        var id      =   $("#item_index").val();

        var formid  =   new FormData();

        formid.append('item_index',id);

        $.ajax({            

                        url         :   'getsaleinfo.php',
                        dataType    :   'text',
                        cache       :   false,
                        contentType :   false,
                        processData :   false,
                        data        :   formid,        
                        type        :   'post',
                        success     :   function(data){     
                                    alert(result);
                                    $('#div1').html(result);                        
                                    //document.getElementById("div1").innerHTML=data;

                        }
                });
     }

而不是onchange调用，这将...

Answer 3

/*------------------------index.php--------------------------*/
<?php 
if (!empty($_POST["save"])) {
    $conn = mysql_connect("localhost", "root", "");
    mysql_select_db("ajaxphp", $conn);
    $itemCount = count($_POST["item_index"]);
    $itemValues = 0;
    $query = "INSERT INTO item (item_name,item_price) VALUES ";
    $queryValue = "";

    for ($i = 0; $i < $itemCount; $i++) {
        if (!empty($_POST["item_index"][$i]) || !empty($_POST["unit_price"][$i])) {
            $itemValues++;
            if ($queryValue != "") {
                $queryValue .= ",";
            }
            $queryValue .= "('" . $_POST["item_index"][$i] . "', '" . $_POST["unit_price"][$i] . "')";
        }
    }
    $sql = $query . $queryValue;
    if ($itemValues != 0) {
        $result = mysql_query($sql);
        if (!empty($result))
            $message = "Added Successfully.";
    }
}
?>
<HTML>
    <HEAD>
        <TITLE>PHP jQuery Dynamic Textbox</TITLE>
        <LINK href="style.css" rel="stylesheet" type="text/css" />
        <SCRIPT src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT>
        <SCRIPT>
            var cnt = 1;
            function addMore() {
                $("<DIV>").load("input.php?cnt=" + cnt, function() {
                    $("#product").append($(this).html());
                    cnt++;
                });
            }
            function deleteRow() {
                $('DIV.product-item').each(function(index, item) {
                    jQuery(':checkbox', this).each(function() {
                        if ($(this).is(':checked')) {
                            $(item).remove();
                        }
                    });
                });
            }
        </SCRIPT>
    </HEAD>
    <BODY>
        <FORM name="frmProduct" method="post" action="">
            <DIV id="outer">
                <DIV id="header">
                    <DIV class="float-left">&nbsp;</DIV>
                    <DIV class="float-left col-heading">Item Name</DIV>
                    <DIV class="float-left col-heading">Item Price</DIV>
                </DIV>
                <DIV id="product">
                    <?php require_once("input.php") ?>
                </DIV>
                <DIV class="btn-action float-clear">
                    <input type="button" name="add_item" value="Add More" onClick="addMore();" />
                    <input type="button" name="del_item" value="Delete" onClick="deleteRow();" />
                    <span class="success"><?php
                        if (isset($message)) {
                            echo $message;
                        }
                        ?></span>
                </DIV>
                <DIV class="footer">
                    <input type="submit" name="save" value="Save" />
                </DIV>
            </DIV>
        </form>
    </BODY>
</HTML>

input.php

/*------------------------input.php--------------------------*/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    function salesdetail(item_index, item_id)
    {
        alert(item_index);

        $.ajax({
            url: 'getsaleinfo.php',
            type: 'POST',
            data: {item_index: item_index, item_id: item_id},
            success: function(result) {
                alert(result);
                $('#div_' + item_id).html(result);
            }
        });
    }
</script>
<?php $_REQUEST['cnt'] = (isset($_REQUEST['cnt'])) ? $_REQUEST['cnt'] : 0; ?>
<DIV class="product-item float-clear" style="clear:both;">
    <DIV class="float-left"><input type="checkbox" name="item_ind[]" id="item_ind_<?php echo $_REQUEST['cnt']; ?>" /></DIV>
    <DIV class="float-left"><select name="item_index[]" id="item_index_<?php echo $_REQUEST['cnt']; ?>"  class="required input-small" onchange="salesdetail(this.value, '<?php echo $_REQUEST['cnt']; ?>');" >
            <option>Select</option>
            <?php
            $conn = mysql_connect("localhost", "root", "");
            mysql_select_db("ajaxphp", $conn);
            $result = mysql_query("select * from item");
            while ($row = mysql_fetch_assoc($result)) {
                echo "<option>" . $row['item_name'] . "</option>";
            }
            ?>
        </select></DIV>
    <DIV class="float-left" id="div_<?php echo $_REQUEST['cnt']; ?>"><input type="text" id="unit_price_<?php echo $_REQUEST['cnt']; ?>" name="unit_price[]" /></DIV>
</DIV>

getsaleinfo.php

/*------------------------getsaleinfo.php--------------------------*/
<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("ajaxphp", $conn);
$supplier = $_POST['item_index'];
$sql = "select * from item where item_name='$supplier'";
$rs = mysql_query($sql);
?>
<?php
$_REQUEST['item_id'] = (isset($_REQUEST['item_id'])) ? $_REQUEST['item_id'] : '';

if ($row = mysql_fetch_array($rs)) {
    ?>
    <div class="float-left">
        <input  type="text"  name="unit_price[]" id="unit_price_<?php echo $_REQUEST['item_id']; ?>" class="input-mini" value="<?php echo $row['item_price']; ?>" >

    </div>
<?php }
?>

当尝试添加更多字段并选择其冲突第一行时

3 个答案: