AMP tap event Change the contents of the value attribute

Question

Hello!

I'm using amp-bind method. I track the click of a button. I call the modal window. With this all okay. Next, I want to change the contents of the input value attribute. Take the value from the button that triggered the event.

My code:

.amp-lightbox {
  background: rgba(0, 0, 0, 0.8);
}

.amp-lightbox__content {
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  max-width: 550px;
  width: 90%;
}

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox">
  <div class="amp-lightbox__content">
    <form id="form-modal" action-xhr="amp-mail.php" target="_top" method="post">
      <input type="text" name="id" [value]="customvalue">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </form>
  </div>
</amp-lightbox>

<button value="2654" on="tap:amp-lightbox, AMP.setState({customvalue: event.value})" class="button">Order</button>

I will have many buttons, and one modal window. I need to take a value from the button that caused the event, and write it to the modal window element. How can i do this?

Thank you very much in advance!

Answer 1

I'm not really sure if you can use value as attribute for button there's no mention in the docs. However, if you're going to have multiple buttons then you can just directly set value in set state for each button.

.amp-lightbox {
  background: rgba(0, 0, 0, 0.8);
}

.amp-lightbox__content {
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  max-width: 550px;
  width: 90%;
}

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox">
  <div class="amp-lightbox__content">
    <form id="form-modal" action-xhr="amp-mail.php" target="_top" method="post">
      <input type="text" name="id" [value]="customvalue">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </form>
  </div>
</amp-lightbox>

<button on="tap:amp-lightbox, AMP.setState({customvalue: '2654'})" class="button">Order 2654</button>

<button on="tap:amp-lightbox, AMP.setState({customvalue: '2655'})" class="button">Order 2655</button>

<button on="tap:amp-lightbox, AMP.setState({customvalue: '2656'})" class="button">Order 2656</button>

Answer 2

To get the value of a button (or other clicked element) use this code:

<button id="test" value="1234" onclick="recover(value,id)">Lorem</button>
<script>
  function recover(value,id) {
    alert(value);
    document.getElementById(id).value = "Your value HERE";
  }
</script>