輸入字段值在輸入某個值後返回空

要求是當用戶點擊「添加行」按鈕時，動態添加每個li元素當用戶在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>

來源

2017-04-27 Nini

在你的HTML你沒有'f2_edit_row'？ –

在函數調用中使用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>

來源

2017-04-27 12:46:02 julekgwa

'這'起作用。謝謝。現在，我調用了API並獲得了在接下來的兩個字段中設置的值。我設置了下面給出的值。但價值沒有被設定。沒有錯誤。 var returnvalue =「ABC」; \t var id1 =「＃f3_edit_row」+ rowNo; \t $（id1）.val（returnvalue）; – Nini

@尼尼編輯問題並添加您運行的代碼。 – julekgwa

現在編輯更新 – Nini

輸入字段值在輸入某個值後返回空

回答

相關問題