CODEWITHSUNDEEP
javascripthtmlcssgoogle-apps-script
John Smith
John Smith

Reputation: 397

Pass Javascript variable to HTML button as href

I have this javascript that fetches a users folderID and gives back a link to that folder. 

    <script>
        function onSuccess(ID_FOLDER) {
        var div = document.getElementById('output');
        var FolderPathURL = "https://drive.google.com/drive/folders/"+ID_FOLDER+"";
        div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'>Link to Folder</a>"
        }
        google.script.run.withSuccessHandler(onSuccess).getFolderIds();
    </script>

The html looks like this, and a href link is presented. This works as is right now.

<div id="output">Folder URL</div>

But i need the link to be a button (a google css blue action button), so when they click the button the link opens.

<button class="action">Show Folder</button>

Upvotes: 0

Views: 1495

Answers (3)

John Smith
John Smith

Reputation: 397

As of HTML5, buttons support the formaction attribute. Best of all no javascript or trickery needed.

Change:

  div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'><button class="action button-blue">Show Folder</button> </a>"

To:

  div.innerHTML = "<form><button formaction='"+FolderPathURL+"'>Show Folder</button></form>"

Upvotes: 0

Ashwin
Ashwin

Reputation: 323

Add this class to the relevant link tags:

.button-blue {
  background: -moz-linear-gradient(top, #4d90fe, #4787ed);
  background: -ms-linear-gradient(top, #4d90fe, #4787ed);
  background: -o-linear-gradient(top, #4d90fe, #4787ed);
  background: -webkit-linear-gradient(top, #4d90fe, #4787ed);
  background: linear-gradient(top, #4d90fe, #4787ed);
  border: 1px solid #3079ed;
  color: #fff;
}

Upvotes: 1

Hiren patel
Hiren patel

Reputation: 971

 <script>
    function onSuccess(ID_FOLDER) {
    var div = document.getElementById('output');
    var FolderPathURL = "https://drive.google.com/drive/folders/"+ID_FOLDER+"";
    div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'><button class="action button-blue">Show Folder</button> </a>"
    }
    google.script.run.withSuccessHandler(onSuccess).getFolderIds();
</script>

add css as @Ashwin has suggested

.button-blue {
 background: -moz-linear-gradient(top, #4d90fe, #4787ed);
 background: -ms-linear-gradient(top, #4d90fe, #4787ed);
 background: -o-linear-gradient(top, #4d90fe, #4787ed);
 background: -webkit-linear-gradient(top, #4d90fe, #4787ed);
 background: linear-gradient(top, #4d90fe, #4787ed);
 border: 1px solid #3079ed;
 color: #fff;
 }

Upvotes: 1

Related Questions