duanping1920
2018-07-27 19:33
浏览 48
已采纳

使用ajax在循环中填充表单字段

The first row only works in my row.

<?PHP for ($i = 1; $i <= 20; $i++){ ?>
            <div id="lines" class="row">
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><span id="row_number"><?PHP if ( $i < 10 ){ echo "0".$i;}else{echo $i;} ?></span></div>
                <div class="col-sm-2" style="text-align:left;border:1px solid #808080">
                    <select id="part_number" style="border:0px;">
                        <option value="None Selected"></option>
                        <?PHP
                            $partNumbers = $wpdb->get_results("SELECT * FROM _cif_inventory_table;");
                                foreach ($partNumbers as $partNumber) {
                                    echo '<option value="'.$partNumber->part_number.'">'.$partNumber->part_number.'</option>';
                                }
                        ?>
                    </select>
                </div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input size="5" maxlength="5" id="quantity" value="" /></div>
                <div class="col-sm-6" style="text-align:left;border:1px solid #808080"><input size="75" id="description-<?PHP echo $i; ?>" value="" /></div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="unitPrice-<?PHP echo $i; ?>" /></div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="amount" value="" /></div>
            </div><!-- end .row -->
        <?PHP } ?>

I'm pretty sure it's the id's that aren't working as expected because they are all the same so I decided to add my loop counter to my id <input size="75" id="description-<?PHP echo $i; ?>" value="" /> and <input id="unitPrice-<?PHP echo $i; ?>" /> but I am confused on how to got this on the ajax side I tried to do it like

UPDATE

    $.ajax({
    url: '<?PHP echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'description', part_number: part_number },
    success: function(data) {

        for ( var i = 1; i <= 20; i++ ) {
          $('#description-' + i).val( data );
        }
    }
    });

but this populates every description field on the selection of the dropdown on row 1.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douhuang9886 2018-07-27 19:46
    已采纳

    First, switch your loop to javascript instead of php.

    for (var i = 1; i <= 20; i++) {
    
    }
    

    Then, add string concatenation for the ID.

    for (var i = 1; i <= 20; i++) {
        $('#description-' + i).val( data );
    }
    

    That's how to properly select the HTML element, however, with your current code all of their values will be set to the same value.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • doubi7496 2018-07-27 19:58

    You should avoid generating javascript for each row. Imagine what happen if you have 100 row per page. You can use data-value in Html and then get the value in js. This is your html:

    <input type="text" data-name="test" data-value="123" data-id="123" class="myinput"/>
    

    And this can be your js:

    $(".myinput").click(function(){
       var name=$(this).data("name");
       var value=$(this).data("value");
       var id=$(this).data("id");
    });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题