Get Value from Custom Dialog Form-CodePudding

I would like to get the value from my custom dialog (HTML) to use it as a string parameter to a function.

Dialog.html:

   <form id="subject-form">
    <div >
      <input type="text" id="subject" placeholder="Bookmark name" name="subject" maxlength="16" required >
      <span>.</span>
      <div >
        <select id="selector">
          <option value="student">student</option>
          <option value="cs">cs</option>
          <option value="hr">hr</option>
        </select>
      </div>
      <span>.xyz.com</span>
    </div>
    <div  id="dialog-button-bar">
      <button type="submit"  onclick="getLabel()">Add</button>
      <button id="dialog-cancel-button" onclick="google.script.host.close()">Cancel</button>
    </div>
    <!-- <div id="dialog-status"></div> -->
  </form>

DialogJS:

  function getLabel () {
    const subj = document.getElementById('subject').value;
    const subd = document.getElementById('selector').value;

    google.script.run
    .withSuccessHandler()
    .mailIt(subj, subd);

  }

CodePudding user response：

The problem is that you are reloading the page every time you press the button.

Change this:

<form id="subject-form">

To this:

<form onsubmit="return false" id="subject-form">

Then the function will work as expected.

Reference:

Stop form refreshing page on submit