Question

单击按钮时，我正在尝试获取两个输入值。我没有表单，只是while语句中的两个隐藏输入字段。值根据用户选择的计划而变化。现在我遇到的问题我无法得到这两个值。其余的工作。我能够触发模态。

的index.php

//...queries
while($plan = mysqli_fetch_assoc($resultplans)) {;// output data of each row
<input type="hidden" name="planname" class="planname" value="'.$plan['name'].'">
<input type="hidden" name="planlvl" class="planlvl" value="'.$plan['level'].'">
<button type="button" class="viewdetail btn btn-lg btn-block btn-default">VIEW DETAILS</button>
}

jquery的

$(document).ready(function() {
        $('.viewdetail').click(function(e) {
            e.preventDefault();

            //show modal
             $('#planmodal').modal('show');

            //get variables
            var valuename=$(this).find('.planname').val();
            var valuelevel=$(this).find('.planlvl').val();

            if(valuename!=='' && valuelevel!==''){
                $.ajax({
                type: 'POST',
                url: 'includes/getplan.php',
                data:"{'planname':'"+valuename+"','planlvl':'"+valuelevel+"'}",
                success: function(data)
                {
                    $("#plandetails").html(data);
                }
            });
        }else{
            var error = 'Nothing to show here';
            $("#plandetails").html(error);
        }
        });
    });

Answer 1

经过一些努力后，下面的解决方案适合我。我发布了完整的测试代码。

<强>的index.php

//...queries
while($plan = mysqli_fetch_assoc($resultplans)) {;// output data of each row
<button type="button" dataname="'.$plan['name'].'" datalevel="'.$plan['level'].'" class="viewdetail btn btn-lg btn-block btn-default">VIEW DETAILS</button>
}

<强> jquery的

$(document).ready(function() {
        $('.viewdetail').click(function(e) {
            e.preventDefault();

            //show modal
             $('#planmodal').modal('show');

            //get variables
             var valuename = $(this).attr("dataname");
             var valuelevel = $(this).attr("datalevel");
             var values = 'planname='+ encodeURIComponent(valuename) + '&planlvl='+ encodeURIComponent(valuelevel); // this where i add multiple data using  ' & '

            if(values!==''){
                $.ajax({
                type: 'POST',
                url: 'includes/getplan.php',
                data:values,
                success: function(data)
                {
                    $("#plandetails").html(data);
                }
            });
        }else{
            var error = 'Nothing to show here';
            $("#plandetails").html(error);
        }
        });
    });

<强> getplan.php

if(isset($_POST['planname']) && $_POST['planlvl']){

    $planname = $_POST['planname'];
    $planlvl = $_POST['planlvl'];

    echo 'Post success';// replace this with usual query. This is just for testing.


}else{
    echo 'Post failed';//replace this with custom message.
}

<强>模态

<!-- Modal -->
<div class="modal fade" id="planmodal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal with Dynamic Content</h4>
            </div>
            <div class="modal-body">
            <div id="plandetails"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

引导模式中的输出：

Post success

如何在while循环中使用ajax获取输入值

1 个答案: