www.webdeveloper.com
Results 1 to 5 of 5

Thread: Dynamically changing URL of Twitter button using textfields

  1. #1
    Join Date
    Dec 2008
    Posts
    9

    Dynamically changing URL of Twitter button using textfields

    Twitter dev provide the following code for adding a 'Tweet' button to your site.

    Code:
    </script>
    <a href="https://twitter.com/intent/tweet?text=Text1%20Text2" data-lang="en">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    I'm a javascript newbie and what I would like to do is replace 'Text1' and 'Text2' values in the URL with textfield values from a form.

    Can anybody advise?

    Thanks.

  2. #2
    Join Date
    Nov 2010
    Posts
    978
    something like this?
    Code:
    <body>
    <input type="text" id="link1"/>
    <input type="text" id="link2"/>
    <input type="button" onclick="changeLink()" value="change" />
    <a id="thelink" href="https://twitter.com/intent/tweet?text=Text1%20Text2" data-lang="en">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    function changeLink(){
    var t1=document.getElementById("link1").value;
    var t2=document.getElementById("link2").value;
    document.getElementById("thelink").href="https://twitter.com/intent/tweet?text="+t1+"%20"+t2;
    }
    </script>
    </body>

  3. #3
    Join Date
    Dec 2008
    Posts
    9
    Quote Originally Posted by xelawho View Post
    something like this?
    Code:
    <body>
    <input type="text" id="link1"/>
    <input type="text" id="link2"/>
    <input type="button" onclick="changeLink()" value="change" />
    <a id="thelink" href="https://twitter.com/intent/tweet?text=Text1%20Text2" data-lang="en">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    function changeLink(){
    var t1=document.getElementById("link1").value;
    var t2=document.getElementById("link2").value;
    document.getElementById("thelink").href="https://twitter.com/intent/tweet?text="+t1+"%20"+t2;
    }
    </script>
    </body>
    Yes! Something like that. Thanks.

    Instead of onclick, I've gone with onblur:

    <input type="text" id="link1"/ onblur="changeLink()">
    <input type="text" id="link2"/ onblur="changeLink()">

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    Code:
    <input type="text" id="link1" onblur="changeLink()" />
    <input type="text" id="link2" onblur="changeLink()" />
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Dec 2008
    Posts
    9
    Quote Originally Posted by Padonak View Post
    Code:
    <input type="text" id="link1" onblur="changeLink()" />
    <input type="text" id="link2" onblur="changeLink()" />
    Oops. Yes - thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles