Append Values of Button on Click on Input Type

Related searches

How can I append the value of the button on click to delete_id_receiver text field. The output should be 1,2,3 if the 3 buttons are click.

And change the value of delete button to "UNDO" and remove the values on the text input.

<table class="table">
<tr>
    <td><button onclick="deleteVal(1)" type="button"> Delete </button></td>
    <td> John </td>
</tr>
<tr>
    <td><button onclick="deleteVal(2)" type="button"> Delete </button></td>
    <td> May </td>
</tr>
<tr>
    <td><button onclick="deleteVal(3)" type="button"> Delete </button></td>
    <td> Andrew </td>
</tr>

<input type="text" id="delete_id_receiver">

This is what i've tried but it does not stock the id's on click

 function deleteVal(val){
      var delete_id = val;
     document.getElementById('delete_id_receiver').value = val; 
 }

You almost there. Just missing to add previous value . Use : +=

function deleteVal(val) {
  var delete_id = val;
  document.getElementById('delete_id_receiver').value += val + ',';
}
<table class="table">
  <tr>
    <td><button onclick="deleteVal(1)" type="button"> Delete </button></td>
    <td> John </td>
  </tr>
  <tr>
    <td><button onclick="deleteVal(2)" type="button"> Delete </button></td>
    <td> May </td>
  </tr>
  <tr>
    <td><button onclick="deleteVal(3)" type="button"> Delete </button></td>
    <td> Andrew </td>
  </tr>
  <input type="text" id="delete_id_receiver">

Use append() to add text/html to an element with jQuery, Type some text into the textarea, click the button and it will be added to the < form> <div><textarea class="example-default-value" id="example-textarea"� With the button type input, the value is displayed on the button itself. With the <button> element, the button displays its content. This means that if you want to update or use the value and the displayed content in concert, you would need to use the button input, or else do a lot more scripting to sync the <button> value with its content.


Below solution is able to append, UNDO with no duplicates and no unnecessary commas.

function deleteVal(val){
   var buttonText = document.getElementById(val).innerText.trim();

   if(buttonText == 'Delete')
   {
      var valueToAppend = val;
      var valueInsideTextbox = document.getElementById('delete_id_receiver').value;
    
      if(valueInsideTextbox.includes(valueToAppend))
    	return;
      
      if(valueInsideTextbox.trim() != "")
    	valueToAppend = "," + valueToAppend;
      
      document.getElementById('delete_id_receiver').value = valueInsideTextbox + valueToAppend;
      document.getElementById(val).innerText = 'UNDO';
   }
   else if(buttonText == 'UNDO')
   {
     var valueToRemove = val;
     var valueInsideTextbox = document.getElementById('delete_id_receiver').value;
    
     if(valueInsideTextbox.trim() != "" && valueInsideTextbox.includes(valueToRemove))
     {
    	valueInsideTextbox = valueInsideTextbox.replace("," + val, "").replace(val + ",", "").replace(val, "");
     } 
     document.getElementById('delete_id_receiver').value = valueInsideTextbox;
     document.getElementById(val).innerText = 'Delete';
   }
}
<table class="table">
<tr>
    <td><button id="1" onclick="deleteVal(1)" type="button"> Delete 
</button></td>
    <td> John </td>
</tr>
<tr>
    <td><button id="2" onclick="deleteVal(2)" type="button"> Delete </button></td>
    <td> May </td>
</tr>
<tr>
    <td><button id="3" onclick="deleteVal(3)" type="button"> Delete 
    </button></td>
    <td> Andrew </td>
</tr>
<input type="text" id="delete_id_receiver">

How to add input fields dynamically on button click in AngularJS , The task is to add an input field on the page when the user clicks on the button using AngularJs. Steps: The required component for the� The <input type="button"> defines a clickable button (mostly used with a JavaScript to activate a script). Browser Support The numbers in the table specify the first browser version that fully supports the element.


One way to prevent duplicate values being stored is to create an array to store the current delete values/ids

You can then use the Array.join function to join them with commas

var deleteVals = [];
function deleteVal(val) {
  var delete_id = val;
  
  // check if delete_id is not contained within deleteVals
  if(deleteVals.indexOf(delete_id) === -1){
    deleteVals.push(delete_id);
  }
  
  // call the update function to update the value of #delete_id_receiver
  updateDeleteVals();
}

function updateDeleteVals(){
  document.getElementById('delete_id_receiver').value = deleteVals.join(",");
}
<table class="table">
  <tr>
    <td><button onclick="deleteVal(1)" type="button"> Delete </button></td>
    <td> John </td>
  </tr>
  <tr>
    <td><button onclick="deleteVal(2)" type="button"> Delete </button></td>
    <td> May </td>
  </tr>
  <tr>
    <td><button onclick="deleteVal(3)" type="button"> Delete </button></td>
    <td> Andrew </td>
  </tr>
  <input type="text" id="delete_id_receiver">

How to Add Text to a Textarea or Text Field, How to add or replace text to a text field or textarea using JavaScript. <input type="button" value="Add New Text" onClick="addtext();"></p> </td> <td>< textarea� If you're using jquery its pretty simple. on your button click event, grab the parent (div or table) where you want this text field to be. Then append the html for your input field. function buttonclicked(){$("#divTextFieldHolder").append('');}


You can try this

function deleteVal(val) {
  var delete_id = val;
  var delete_id_receiver = document.getElementById('delete_id_receiver').value
  if(!delete_id_receiver.includes(delete_id)){
     var tempVal = document.getElementById('delete_id_receiver').value += val + ',';
     document.getElementById('delete_id_receiver').value = tempVal;
  }
}
<table class="table">
  <tr>
    <td><button onclick="deleteVal(1)" type="button"> Delete </button></td>
    <td> John </td>
  </tr>
  <tr>
    <td><button onclick="deleteVal(2)" type="button"> Delete </button></td>
    <td> May </td>
  </tr>
  <tr>
    <td><button onclick="deleteVal(3)" type="button"> Delete </button></td>
    <td> Andrew </td>
  </tr>
  <input type="text" id="delete_id_receiver">

Dynamically Add and Remove HTML elements using jQuery, p> <div id="main"> <input type="button" id="btAdd" value="Add Element" $('# btAdd').click(function() { if (iCnt <= 19) { iCnt = iCnt + 1; // ADD TEXTBOX. // Get the button, and when the user clicks on it, execute myFunction document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */


try this if you want value as 1,2,3

function deleteVal(val){ 
  current_val  = document.getElementById('delete_id_receiver').value;
  
  if(current_val==""){
  document.getElementById('delete_id_receiver').value = current_val+""+val; 
  }else if(val=="del"){
  document.getElementById('delete_id_receiver').value = ""

    }
    else{
       document.getElementById('delete_id_receiver').value = current_val+", "+val; 
    }
  
    
 }
<table class="table">
<tr>
    <td><button onclick="deleteVal(1)" type="button"> Delete </button></td>
    <td> John </td>
</tr>
<tr>
    <td><button onclick="deleteVal(2)" type="button"> Delete </button></td>
    <td> May </td>
</tr>
<tr>
    <td><button onclick="deleteVal(3)" type="button"> Delete </button></td>
    <td> Andrew </td>
</tr>
  
  <tr>
    <td><button onclick="deleteVal('del')" type="button"> Undo </button></td>
    <td></td>
</tr>
  
  <input type="text" id="delete_id_receiver">

JavaScript array: Add items in a blank array and display the items , <input type="button" id="button1" value="Add" onclick="add_element_to_array ();"></input> <input type="button" id="button2" value="Display"� You can avoid submitting altogether by using the <button type="button">, and then you can bind on the onclick event of the button. You can simplify things by avoiding the input list instead using querySelector:


You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():


Wondering how to use the jQuery onclick event? Do you wish to execute some custom code on click of a button, a hyperlink, etc.? If yes, then this article is for you. In this article, I am going to share easy examples that show how to trigger an action when an element on a web page is clicked. How to use the jQuery onClick event


<input type=button onClick=window.open("button-child.php","demo","width=550,height=300,left=150,top=200,toolbar=0,status=0,"); value="Open child Window"> Source code of the buttons used in Child window is here