CODEWITHSUNDEEP
javascriptjquery
Ulquiorra Schiffer
Ulquiorra Schiffer

Reputation: 219

When button is clicked, display the value on my textbox

newbie here. My target is when is when I click the button, my 2nd textbox will do the copy without comma. How can I make this work? I provided my JS fiddle and codes below. Any help will be appreciated. Thank you

enter image description here

JS Fiddle: https://jsfiddle.net/rain0221/auk4rfdg/6/ // I provided more explanation here

html:

  <input type="text" value=""  class="form-control" id="box"/>
<input type="text" value="" id="textbox2" required  name="amount1" min="100" autocomplete="off"/>

<input id="bet4" class="amount btn btn-success" type="button" onclick="showme('5,000')" value="5000">

script:

//this function copies the textbox1 values with autocomma and produces same value but without comma on textbox2
                  function updateTextView(_obj) {
       var num = getNumber(_obj.val());
       if (num == 0) {
         _obj.val('');
       } else {
         $("#textbox2").val(num);
         _obj.val(num.toLocaleString());
       }
    }
     function getNumber(_str){
       var arr = _str.split('');
       var out = new Array();
       for(var cnt=0;cnt<arr.length;cnt++){
         if(isNaN(arr[cnt])==false){
           out.push(arr[cnt]);
        }
       }
       return Number(out.join(''));
     }
     $(document).ready(function(){
       $('#box').on('keyup',function(){
         updateTextView($(this));
       });
     });


//this function shows the value of my button to the textbox
     $(document).ready(function(){
                    $("#bet4").on("click", function(e)
                    {
                        e.preventDefault();
                        let box = $("#box").val();
    
                        $("#betAmountResult").html(box);
                    })
                })
          function showme(count){
        document.getElementById("box").value=count;
    }

Upvotes: 0

Views: 1474

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28196

document.addEventListener("input", action)
document.addEventListener("click", action)

function action(ev){if (ev.target.tagName=="INPUT"){
  const ch=ev.target.closest("div").children;
  if(ev.target!=ch[1])
   ch[1].value=(ev.target.value-0).toLocaleString()
  if(ev.target==ch[2])
   ch[0].value=ev.target.value;
}}
<div>
 <input type="text" value="" class="form-control" required/>
 <input type="text" value=""/>
 <input class="amount btn btn-success" type="button" value="5000">
</div>
<div>
 <input type="text" value="" class="form-control" required/>
 <input type="text" value=""/>
 <input class="amount btn btn-success" type="button" value="2000000">
</div>

I wrote my snippet without jQuery as it is not really needed here and I reversed the roles of the input fields as it is

  • a better user experience if the input is not tampered with directly
  • difficult to "undo" a .toLocaleString(), see here

The trigger for action is the input event which also includes paste actions done via mouse clicks.

I also removed the id attributes from your input values. This way you can add further input groups to your page and re-use the script without further change.

All my addEventListener() actions are done in the "delegated" mode, to the parent document. By doing it this way the event will also be triggered by dynamically added elements (elements that might get added through some user interaction).

Upvotes: 1

cursorrux
cursorrux

Reputation: 1456

When 5000 clicked, change textbox2 value!

Code snippet:

              function updateTextView(_obj) {
   var num = getNumber(_obj.val());
   if (num == 0) {
     _obj.val('');
   } else {
     $("#textbox2").val(num);
     _obj.val(num.toLocaleString());
   }
}
 function getNumber(_str){
   var arr = _str.split('');
   var out = new Array();
   for(var cnt=0;cnt<arr.length;cnt++){
     if(isNaN(arr[cnt])==false){
       out.push(arr[cnt]);
    }
   }
   return Number(out.join(''));
 }
 $(document).ready(function(){
   $('#box').on('keyup',function(){
     updateTextView($(this));
   });
 });
 $(document).ready(function(){
                $("#bet4").on("click", function(e)
                {
                    e.preventDefault();
                    let box = $("#box").val();

                    $("#betAmountResult").html(box);
                })
            })
      function showme(count){
    document.getElementById("box").value=count;
    document.getElementById("textbox2").value=count.replace(',','');
}
 
 
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
 
<input type="text" value=""  class="form-control" placeholder="autocomma textbox" id="box"/>
<input type="text" value="" placeholder="same value but no comma" id="textbox2" required  name="amount1" min="100" autocomplete="off"/>

<input id="bet4" class="amount btn btn-success" type="button" onclick="showme('5,000')" value="5000">

Upvotes: 2

Related Questions