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

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

javascript input

Javascript 输入某些值后，输入字段值返回空,javascript,input,field,Javascript,Input,Field,当用户单击“添加行”按钮时，需要动态添加每个li元素。当用户在字段1中输入任何值时，将使用该值作为参数向服务器进行ajax调用，并在接下来的两个字段中设置返回值在focus lost方法中，当我尝试检索用户输入的值时，输入字段值总是返回为空，或者返回我在源代码中设置的默认值，而不是用户修改的值行ID是唯一的，如f1\u edit\u row1、f1\u edit\u row2等。请告诉我为什么我得不到该值 <!DOCTYPE html> <html> <head

当用户单击“添加行”按钮时，需要动态添加每个li元素。当用户在字段1中输入任何值时，将使用该值作为参数向服务器进行ajax调用，并在接下来的两个字段中设置返回值

在focus lost方法中，当我尝试检索用户输入的值时，输入字段值总是返回为空，或者返回我在源代码中设置的默认值，而不是用户修改的值

行ID是唯一的，如f1\u edit\u row1、f1\u edit\u 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>


在此处插入标题


字段1
字段2


功能焦点丢失\u编辑（rowNo）{
var id=“f1_编辑_行”+行号；
var value=document.getElementById（id）.value；
log（id，“Value:[”，Value，“]”）；
//这里是API代码
var returnvalue=“测试”；
变量id1=“#f2_编辑_行”+行号；
$（id1）.val（返回值）；
log（id1，“返回值：[”，returnvalue，“]”）；
var returnvalue1=“测试”；
变量id2=“#字段3_编辑_行”+行号；
$（id2）.val（returnvalue1）；
log（id2，“returnvalue1:[”，returnvalue1，“]”）；
}
函数addButtonClick（）{
日志（“添加按钮单击”）；
//在此处添加行的代码
}
函数updateBtnClick（）{
日志（“更新按钮点击”）；
$（'ul#行_编辑li'）。每个（函数（）{
var id=$（this.attr（'id'）；
var rowNo=id.substring（7）；
变量id1=“#f1_编辑_行”+行号；
var value1=$（id1.val（）；
变量id2=“#f2_编辑_行”+行号；
var value2=$（id2.val（）；
变量id3=“#字段3_编辑_行”+行号；
var value3=$（id3.val（）；
log（“Value1:[”，Value1，”]Value2:[”，Value2，“]Value3:[”，Value3），“]”；
});
//将值发送到此处的服务器的代码
}

在函数调用中使用

此

函数焦点丢失\u编辑（行号）{
var id=“f1_编辑_行”+行号；
var value=document.getElementById（id）.value；
log（id，“Value:[”，Value，“]”）；
//这里是API代码
var returnvalue=“测试”；
变量id1=“#f2_编辑_行”+行号；
$（id1）.val（返回值）；
log（id1，“返回值：[”，returnvalue，“]”）；
var returnvalue1=价值；
变量id2=“#字段3_编辑_行”+行号；
$（id2）.val（returnvalue1）；
log（id2，“returnvalue1:[”，returnvalue1，“]”）；
}
函数addButtonClick（）{
日志（“添加按钮单击”）；
//在此处添加行的代码
}




字段1
字段2

在您的html中，您没有

f2_edit_row

？“这”起作用。谢谢。现在，我调用了API并获得了要在接下来的两个字段中设置的值。我按照下面给出的值设置了值。但是没有设置值。也没有错误。var returnvalue=“ABC”；var id1=“\f3_edit_row”+rowNo；$（id1）。val（returnvalue）；是否要在第一个字段内设置值？@Nini该值被设置为

“#f3_edit_row”+rowNo

；输入是隐藏的，因此您无法看到它。请使用

console.log（$（id1.val（））函数最后一行之后的值。隐藏字段id不同。我现在编辑了。Console.log打印我设置的值。但它在文本字段（视图）中不可见。是的，这不是因为它被设置为“#f3_edit_row“+rowNo
和rowNo
等于1
，它是f3\u edit\u row1
，并且是隐藏的。