Re: Problem in palette retrieving <form> tag data which has radiobuttons

abishek2010505 · ‎04-12-2024

Hi. So, I am working with palettes and am using it to display a HTML page which has radiobuttons for getting the user input option. I'm not able to get the radiobutton value which was clicked by the user when the submit button is clicked. Instead the page just reloads and the checked radiobutton goes unchecked when I click on the submit button.

Here is a sample HTML code I'm working on:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/palette.js"></script>
</head>
<body>
<div>

    <h1>Fusion 360 Palette Sample</h1>
    <h3>Send Data to HTML Event Handler</h3>
    <div style='margin-left: 30px;'>
        <form name="language" onsubmit="sendInfoToFusion()">
            <input type="radio" id="html" name="fav_language" value="HTML">
            <label for="html">HTML</label><br>
            <input type="radio" id="css" name="fav_language" value="CSS">
            <label for="css">CSS</label><br>
            <input type="radio" id="javascript" name="fav_language" value="JavaScript">
            <label for="javascript">JavaScript</label><br>
            <input type="submit" value="Submit"  style='background-color: #cccccc; padding: 5px'>
        </form>
    </div>

    <h3>HTML Event Response Value:</h3>
    <div id='returnValue' style='margin-left: 30px;'>Response</div>

    <h3>Message from "Send to Palette" Command</h3>
    <div style='margin-left: 30px;'>
        <p id='fusionMessage'>Message from Fusion</p>
        <br/><br/>
    </div>

</div>
</body>
</html>

This is the JavaScript code for giving the button's functionality:

function sendInfoToFusion() {
    const args = {
        arg1: document.forms[language][fav_language]
    };
    // Send the data to Fusion as a JSON string. The return value is a Promise.
    adsk.fusionSendData("messageFromPalette", JSON.stringify(args)).then((result) =>
        document.getElementById("returnValue").innerHTML = `${result}`
    );
}

The HTML portion seems to work fine in a normal web browser. Any help on how to solve this issue would be much appreciated.

Thanks.

kandennti · ‎04-13-2024

Hi @abishek2010505 -San.

Since I am not familiar with it, I did a lot of research. The cause of the reload seems to be type="submit".

I fixed it and other parts like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!-- <script src="static/palette.js"></script> -->
  </head>
  <body>
    <div>
      <h1>Fusion 360 Palette Sample</h1>
      <h3>Send Data to HTML Event Handler</h3>
      <div style="margin-left: 30px">
        <form name="language">
          <input type="radio" id="html" name="fav_language" value="HTML" />
          <label for="html">HTML</label><br />
          <input type="radio" id="css" name="fav_language" value="CSS" />
          <label for="css">CSS</label><br />
          <input
            type="radio"
            id="javascript"
            name="fav_language"
            value="JavaScript"
          />
          <label for="javascript">JavaScript</label><br />
          <input
            type="button"
            value="Submit"
            style="background-color: #cccccc; padding: 5px"
            onclick="sendInfoToFusion()"
          />
        </form>
      </div>

      <h3>HTML Event Response Value:</h3>
      <div id="returnValue" style="margin-left: 30px">Response</div>

      <h3>Message from "Send to Palette" Command</h3>
      <div style="margin-left: 30px">
        <p id="fusionMessage">Message from Fusion</p>
        <br /><br />
      </div>
    </div>
  </body>
  <script>
    function sendInfoToFusion() {
      if (window.adsk) {
        var value = document.language.fav_language;
        let checkedName = "";
        for (i = 0; i < value.length; i++) {
          if (value[i].checked) {
            checkedName = value[i].value;
          }
        }
        const args = {
          arg1: checkedName,
        };
        adsk
          .fusionSendData("messageFromPalette", JSON.stringify(args))
          .then(
            (result) =>
              (document.getElementById("returnValue").innerHTML = result)
          );
      }
    }
  </script>
</html>

微妙な名前のブログ

サービスユーティリティ	エクスポート方法

Fusion

Problem in palette retrieving <form> tag data which has radiobuttons

Problem in palette retrieving <form> tag data which has radiobuttons

Forums Links

Post to forums