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

Question

要求是当用户单击“添加行”按钮时，动态添加每个li元素。当用户在field1中输入任何值时，将对该值进行参数的ajax调用到服务器，并在其中设置返回值接下来的2个字段。

在丢失焦点的方法中，当我尝试检索用户输入的值时，输入字段值始终返回为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 个解决方案

解决方案1
0 2017-04-27 12:46:02

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

问题描述

1 个解决方案

解决方案1 0 2017-04-27 12:46:02

解决方案1
0 2017-04-27 12:46:02