how can i show an edit box on output text on click with save button

user_13894453 0
Viewed 216

how can i edit on output text on click with save button. please if any could help....

$(document).ready(function(){
  $("#btn").click(function(){
    let getVal = $("#inputValue").val();
    let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
    $("#output").html($("#output").html() + " " + getVal + button);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <div id="output"></div>
</div>

twitter-bootstrap css html jquery javascript
2 Answers

$(document).ready(function(){
  $("#btn").click(function(){
    let getVal = $("#inputValue").val();
    let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
    //let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
    $("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
  });
});
function Update(CurrentElement) 
{  
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {  
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
  } else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
 }
}
table {  font-family: arial, sans-serif;  border-collapse: collapse;  width: 100%;}
td, th {  border: 1px solid #dddddd;  text-align: left;  padding: 8px;}
tr:nth-child(even) {  background-color: #dddddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>

user_67091110

May be this can help you.

$(document).ready(function(){
  $("#btn").click(function(){
    let getVal = $("#inputValue").val();
    $('#output').val(getVal);
  });
  
    $("#save").click(function(){
    let getValNew = $("#output").val();
      $('#inputValue').val(getValNew);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <fieldset>
    <legend>jQuery input value</legend>
    <input id="inputValue" type="text" name="text">
  </fieldset>
  <button id="btn">display value</button>
  <input type="text" name="text-out" id="output">
  <button id="save">Update value</button>
</div>

user_121809620
Related