Question

要求是在用户点击＆＃34时动态添加每个li元素;添加行＆＃34;按钮＆＃34 ;.当用户在field1中输入任何值时，会向服务器发出一个以该值作为参数的ajax调用，并在接下来的两个字段中设置返回值。

在焦点丢失方法中，当我尝试检索用户输入的值时，输入字段值始终返回为EMPTY或我在源代码中设置的默认值，而不是用户修改的值。

行ID是唯一的，如f1_edit_row1，f1_edit_row2等。请告诉我为什么我没有得到这个值。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script src="js/jquery-1.12.4.js"></script>
<title>Insert title here</title>
</head>
<body>
    <ul id="Rows_Edit">
        <li id="EditRow1">
            <div class="row">
                <div class="col-md-3 Field1">
                    <span>Field1</span><input type="text" class="form-control field1"
                        id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
                        placeholder="1234">
                </div>
                <div class="col-md-3 Field2">
                    <span>Field2</span><input type="text" class="form-control"
                        id="f2_edit_row1" name="field2" placeholder="123"
                        disabled="disabled">
                </div>
                <div class="col-md-5 name">

                    <input type="text" class="form-control" id="field3_edit_row1"
                        placeholder="ABC" disabled="disabled">
                </div>
                <div class="col-md-1 icons" id="btn_row1">
                <input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
                    <!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
                </div>

            </div>
        </li>
    </ul>
    <div></div>
    <div></div>
    <div></div>
    <div class="updatebutton">
                                  <input type="submit" id='submit-button_edit' class="btn btn-default" value="Update" onclick="updateBtnClick()">
                                </div>
                                <div class="cancelbutton">
                                  <input type="button" id='cancel-button_edit' class="btn btn-default" value="Cancel">
                                </div>
</body>
</html>
<script type="text/javascript">
function focusLost_edit(rowNo){
    var id = "f1_edit_row" + rowNo;  
    var value = document.getElementById(id).value; 
    console.log(id, " Value:[", value, "]");

    // API Code here

    var returnvalue = "TEST"; 
    var id1 = "#f2_edit_row" + rowNo;
    $(id1).val(returnvalue);
    console.log(id1, " Return Value:[", returnvalue, "]");

    var returnvalue1 = "TESTING"; 
    var id2 = "#field3_edit_row" + rowNo;
    $(id2).val(returnvalue1);
    console.log(id2, " Return Value1:[", returnvalue1, "]");

    }

function addButtonClick(){
    console.log("Add Button Click");
    // Code to add rows here
}

function updateBtnClick(){
    console.log("Update Button Click");
    $('ul#Rows_Edit li').each(function() {
        var id = $(this).attr('id');
        var rowNo = id.substring(7);

        var id1 = "#f1_edit_row" + rowNo;
        var value1 = $(id1).val();

        var id2 = "#f2_edit_row" + rowNo;
        var value2 = $(id2).val();

        var id3 = "#field3_edit_row" + rowNo;
        var value3 = $(id3).val();
        console.log("Value1:[", value1, "] Value2:[", value2, "]Value3:[", value3), "]";
    });


    // Code to send value to server here
}
        </script>

Answer 1

在函数调用中使用this。

 function focusLost_edit(rowNo){
        var id = "f1_edit_row" + rowNo;
        var value = document.getElementById(id).value;
        console.log(id, " Value:[", value, "]");

        // API Code here

        var returnvalue = "TEST";
        var id1 = "#f2_edit_row" + rowNo;
        $(id1).val(returnvalue);
        console.log(id1, " Return Value:[", returnvalue, "]");

        var returnvalue1 = value;
        var id2 = "#field3_edit_row" + rowNo;
        $(id2).val(returnvalue1);
        console.log(id2, " Return Value1:[", returnvalue1, "]");

    }

    function addButtonClick(){
        console.log("Add Button Click");
        // Code to add rows here
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="shipToRows_Edit">
    <li id="EditRow1">
        <div class="row">
            <div class="col-md-3 Field1">
                <span>Field1</span><input type="text" class="form-control field1"
                                          id="f1_edit_row1" onfocusout="focusLost_edit('1')" name="field1"
                                          placeholder="1234">
            </div>
            <div class="col-md-3 Field2">
                <span>Field2</span><input type="text" class="form-control"
                                          id="f2_edit_row1" name="field2" placeholder="123"
                                          disabled="disabled">
            </div>
            <div class="col-md-5 name">

                <input type="text" class="form-control" id="field3_edit_row1"
                       placeholder="ABC" disabled="disabled">
            </div>
            <div class="col-md-1 icons" id="btn_row1">
                <input type="button" class="addbtn" id="btn_row1" name="Add" value="Add Row" onclick="addButtonClick()">
                <!-- <i class="fa fa-plus-square" id="btn1_edit" aria-hidden="true"></i> -->
            </div>

        </div>
    </li>
</ul>

输入某个值后，输入字段值返回空

1 个答案: