0

I am very new to JS and want to use Tampermonkey to change the value of a second text box, depending on what is type in to the the first text box.

I have this input field:

<input class="next-input js-tracking-number-input" data-bind-event-input="debouncedSetTrackingNumber(this.value, 0, true)" data-bind="trackingNumber" autocomplete="on" size="30" type="text" name="fulfillments[0][shipping_options][tracking_number]" id="fulfillments_0_shipping_options_tracking_number">

Upon the value in the field above starting with a letter (any), I want the word "Other" appear in this field:

<input type="text" id="text-1179424fdf221cee11464f318f3e7613" autocomplete="on" data-searchable-select-input="true" class="next-input next-input--invisible" role="combobox" aria-label="Search and select an option for Shipping carrier" aria-expanded="false" aria-autocomplete="list" aria-owns="fulfillments_0_shipping_options_tracking_company-searchable-select">

The id is variable and changes on every page load.

Is this possible?

EDIT

Appears that I left out the placeholder in the second piece code - this is what want to change to display Other.

<input type="text" id="text-a63e2a66d9a139d52da7f333b1db2d1d" autocomplete="on" data-searchable-select-input="true" class="next-input next-input--invisible" placeholder="La Poste" role="combobox" aria-label="Search and select an option for Shipping carrier" aria-expanded="false" aria-autocomplete="list" aria-owns="fulfillments_0_shipping_options_tracking_company-searchable-select">
ryerye
  • 123
  • 1
  • 7
  • 16
  • 1
    Is there a parent around it at any level that has an id that is not variable? – Taplar Jul 23 '18 at 22:37
  • Pretty much a duplicate of: https://stackoverflow.com/questions/15048223/choosing-and-activating-the-right-controls-on-an-ajax-driven-site. Needs either an MCVE or a link to the actual page. – Brock Adams Jul 23 '18 at 23:11

1 Answers1

0

Created live demo for you. Pretty simple solution.

https://jsfiddle.net/6sy5b0ue/15/

function init() {
  const firstInputElement = document.getElementsByClassName('js-tracking-number-input')[0];

  const secondInputElement = document.getElementsByClassName('next-input--invisible')[0];

  firstInputElement.oninput = (event) => {
    const inputValue = event.currentTarget.value;
    secondInputElement.value = /^[a-z]+/i.test(inputValue) ? 'Other' : ''
  };
}

init();
aH6y
  • 436
  • 4
  • 8