Set value to an aria-controls input

Question

I want to set an input aria-control value. But I can't do it using the traditional jQuery way.

My code is this one:

function showMessage() {
  var message = jQuery("#textToDisplay").val();
  $("#example").text(message);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textToDisplay" />
<input type="button" value="Add message" onClick="showMessage()" />
<input aria-controls="example" type="text">

How can I set the value?

Answer 1

Change the selector like this.your selector target the id not the aria-controls so use with attr selector.Also Input not have text() property so change with val()

function showMessage() {
 var message = jQuery("#textToDisplay").val();
 $("input[aria-controls=example]").val(message);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textToDisplay" />
<input type="button" value="Add message" onClick="showMessage()" />
<input aria-controls="example" type="text">

For below Terry comment use addeventlistener instead of inline click function.That do the click function in dom like this

$('#click').click(function() {
  var message = jQuery("#textToDisplay").val();
  $("input[aria-controls=example]").val(message);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textToDisplay" />
<input type="button" id="click" value="Add message">
<input aria-controls="example" type="text">

Answer 2

Use attr selector

Selects elements that have the specified attribute with a value exactly equal to a certain value.

$( "input[aria-controls='example']").val(message);