Shij Thach
Shij Thach

Reputation: 93

How to remove checkbox from this javascript code

The function of the following script is to call the "Android Share" option from web pages. I would like remove the checkbox, how can I do that ? I tried by removing the html line, but then the code is not working. Only the tile, text and URL fields are required . without checkboxes and file upload option.

<table>
    <tr><td>Title:</td>
        <td><input type="checkbox" id="title_checkbox" checked/></td>
        <td><input id="title" value="The Title" size="40" /></td>
    </tr>
    <tr><td>Text:</td>
        <td><input type="checkbox" id="text_checkbox" checked/></td>
        <td><input id="text" value="The message" size="40"/></td>
    </tr>
    <tr><td>URL:</td>
        <td><input type="checkbox" id="url_checkbox" checked/></td>
        <td><input id="url" value="https://example.com" size="40"/></td>
    </tr>
    <tr><td>Files:</td>
        <td><!--Without column 2, the whole table is small on mobile.--></td>
        <td><input id="files" type="file" multiple></td>
    </tr>
  </table>
  <p><input id="share" type="button" value="Share" />
     <input id="share-no-gesture" type="button" value="Share without user gesture" /></p>
  <div id="output"></div>
  

Here is the rest of the code, the javascript

  <script>
    'use strict';

    function sleep(delay) {
      return new Promise(resolve => {
        setTimeout(resolve, delay);
      });
    }

    function logText(message, isError) {
      if (isError)
        console.error(message);
      else
        console.log(message);

      const p = document.createElement('p');
      if (isError)
        p.setAttribute('class', 'error');
      document.querySelector('#output').appendChild(p);
      p.appendChild(document.createTextNode(message));
    }

    function logError(message) {
      logText(message, true);
    }

    function checkboxChanged(e) {
      const checkbox = e.target;
      const textfield = document.querySelector('#' + checkbox.id.split('_')[0]);

      textfield.disabled = !checkbox.checked;
      if (!checkbox.checked)
        textfield.value = '';
    }

    async function testWebShare() {
      if (navigator.share === undefined) {
        logError('Error: Unsupported feature: navigator.share()');
        return;
      }

      const title_input = document.querySelector('#title');
      const text_input = document.querySelector('#text');
      const url_input = document.querySelector('#url');
      const file_input = document.querySelector('#files');

      const title = title_input.disabled ? undefined : title_input.value;
      const text = text_input.disabled ? undefined : text_input.value;
      const url = url_input.disabled ? undefined : url_input.value;
      const files = file_input.disabled ? undefined : file_input.files;

      if (files && files.length > 0) {
        if (!navigator.canShare || !navigator.canShare({files})) {
          logError('Error: Unsupported feature: navigator.canShare()');
          return;
        }
      }

      try {
        await navigator.share({files, title, text, url});
        logText('Successfully sent share');
      } catch (error) {
        logError('Error sharing: ' + error);
      }
    }

    async function testWebShareDelay() {
      await sleep(6000);
      testWebShare();
    }

    function onLoad() {
      // Checkboxes disable and delete textfields.
      document.querySelector('#title_checkbox').addEventListener('click',
          checkboxChanged);
      document.querySelector('#text_checkbox').addEventListener('click',
          checkboxChanged);
      document.querySelector('#url_checkbox').addEventListener('click',
          checkboxChanged);

      document.querySelector('#share').addEventListener('click', testWebShare);
      document.querySelector('#share-no-gesture').addEventListener('click',
          testWebShareDelay);

      if (navigator.share === undefined) {
        if (window.location.protocol === 'http:') {
          // navigator.share() is only available in secure contexts.
          window.location.replace(window.location.href.replace(/^http:/, 'https:'));
        } else {
          logError('Error: You need to use a browser that supports this draft ' +
                   'proposal.');
        }
      }
    }

    window.addEventListener('load', onLoad);
  </script>
</body>
</html>

Upvotes: 0

Views: 183

Answers (1)

Prime
Prime

Reputation: 2849

You can fix like this. You have to remove associated javascript codes as well.

<table>
    <tr><td>Title:</td>
        <td><input id="title" value="The Title" size="40" /></td>
    </tr>
    <tr><td>Text:</td>
        <td><input id="text" value="The message" size="40"/></td>
    </tr>
    <tr><td>URL:</td>
        <td><input id="url" value="https://example.com" size="40"/></td>
    </tr>
  </table>
  <p><input id="share" type="button" value="Share" />
     <input id="share-no-gesture" type="button" value="Share without user gesture" /></p>
  <div id="output"></div>
    function sleep(delay) {
      return new Promise(resolve => {
        setTimeout(resolve, delay);
      });
    }

    function logText(message, isError) {
      if (isError)
        console.error(message);
      else
        console.log(message);

      const p = document.createElement('p');
      if (isError)
        p.setAttribute('class', 'error');
      document.querySelector('#output').appendChild(p);
      p.appendChild(document.createTextNode(message));
    }

    function logError(message) {
      logText(message, true);
    }

    async function testWebShare() {
      if (navigator.share === undefined) {
        logError('Error: Unsupported feature: navigator.share()');
        return;
      }

      const title_input = document.querySelector('#title');
      const text_input = document.querySelector('#text');
      const url_input = document.querySelector('#url');

      const title = title_input.disabled ? undefined : title_input.value;
      const text = text_input.disabled ? undefined : text_input.value;
      const url = url_input.disabled ? undefined : url_input.value;

      try {
        await navigator.share({title, text, url});
        logText('Successfully sent share');
      } catch (error) {
        logError('Error sharing: ' + error);
      }
    }

    async function testWebShareDelay() {
      await sleep(6000);
      testWebShare();
    }

    function onLoad() {
      document.querySelector('#share').addEventListener('click', testWebShare);
      document.querySelector('#share-no-gesture').addEventListener('click',
          testWebShareDelay);

      if (navigator.share === undefined) {
        if (window.location.protocol === 'http:') {
          // navigator.share() is only available in secure contexts.
          window.location.replace(window.location.href.replace(/^http:/, 'https:'));
        } else {
          logError('Error: You need to use a browser that supports this draft ' +
                   'proposal.');
        }
      }
    }

    window.addEventListener('load', onLoad);

Upvotes: 1

Related Questions