Input field value returned empty after entering some value

Question

The requirement is to dynamically add each li element as and when user click on "add row" button". And when User enters any value in field1, an ajax call with this value as parameter is made to server and the return value is set in the next 2 fields.

In focus lost method, when I try to retrieve the user entered value, the input field value is always returned as EMPTY or the default value which I set in the source code and not the user modified value.

The row ids are given unique like f1_edit_row1, f1_edit_row2 etc. Please let me know on why I dont get the value.

<!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

Use this in your function call.

  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>

Input field value returned empty after entering some value

Question

1 answers

solution1
0 2017-04-27 12:46:02

Input field value returned empty after entering some value

Question

1 answers

solution1 0 2017-04-27 12:46:02

solution1
0 2017-04-27 12:46:02