I raised a similar question to this recently, but I was completely working with the wrong code as my understanding of JQuery is still early days.

Here's the updated code I have:

   <input type="hidden" value="" name="numberselection">
    <script>
    var $o = jQuery.noConflict();
    $o('input[name="numberselection"]').on('input', function() {
    
})
    </script>

<div id="showselected"></div>

My question would be, what would I need to write in this function to display the value of the Input tag inside of the "showselected" div?

Many thanks :-)

I just need a little guidance with how to display the output of the Input value inside of the showselected div.

** Update: **

I've found this code, here on Stack Overflow:

$('div').each(function(){
  var textArray = $(this).html().split(',');
  var html = '';
  for(var i = 0; i < textArray.length; i  ) {
    html  = '<span style="color: #12345'   i   '">'   textArray[i]   '</span>';
  }
  $(this).html(html);
}

Is this suitable for styling the values (numbers) which are now being displayed within the "showselected" div? I know i need to change the selector in the code i have provided above, but should it do the job? :)

CodePudding user response：

First of all I changed your input type="hidden" to input type="text" because the former is not a control where a user is expected to type input inside.

Anyway that part is a bit odd because it seems like you designed this whole solution just to see what a user types inside the control.. but it wouldn't make much sense since how a user should type input inside a control that doesn't show up? the type=hidden is meant to hold values that will be posted to the next http request with form submission and shouldn't be input given directly by the user through the UI.

Anyway after that, to change the content of an element when the event fires, you could retrieve the object triggering the event using $(this) inside the event handler, and you could select the target element and change its value accordingly:

var $o = jQuery.noConflict();
$o('input[name="numberselection"]').on('input', function() {  
  $o('#showselected').text($o(this).val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" name="numberselection" />
<div id="showselected"></div>

After the conversation we had in comments, I added a second solution that uses a setter bound to the value property of the hidden input so that everytime any js code will attempt to set its value, the function valuePropChanged will be invoked that will change the text shown on #showselected. To mimic the extension changing the value of the hidden input you need to press the button. (in this case I used vanilla javascript instead of relying on jQuery that sometimes it's really annoying because it adds complexity with no benefits).

//on document ready
document.addEventListener('DOMContentLoaded',()=>{

  //retrieves the html element begin an input with the given name attribute
  const inputEl = document.querySelector('input[name="numberselection"]');

  //adds a setter/getter pair to the value property of the input element
  Object.defineProperty(inputEl, 'value', {
    valueraw : '',
    set(newvalue) {
      this.valueraw = newvalue;
      valuePropChanged(newvalue);   
    },
    get(){
      return this.valueraw;
    }
  });
})

//called by the setter for the hidden input for the value property
function valuePropChanged(newvalue){
  document.getElementById('showselected').innerText = newvalue;
  console.log(`value of the hidden input was changed as: "${newvalue}"`);  
}

//called by the button to force setting the value property of the hidden input
function forceValueChange(){
  document.querySelector('input[name="numberselection"]').value = "newvalue!";
}

#showselected{
  padding: 1em;
  border: solid red 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="hidden" value="" name="numberselection" />

<div id="showselected" >&nbsp;</div>

<br>
<button onclick="forceValueChange();">Mimic extension that changes the value of the hidden input</button>