通过JavaScript将动态文本输入传递到链接中

Question

So i've been at this for hours and havn't figure it out and I know there is an easy solution so I figured I would ask here. I am trying to pass the value of a text area into a link as part of a twitter share button. I think the problem is with global scopes I am able to get the variable from within my external javascript but not from my main php file. For example.

Here is the html:

   <div id="share_twitter">
    Friends Twitter Username (optional) <input type="text" name="friends_twitter" value="@" />
<script type="text/javascript"> 
       window.document.write('<a href="http://twitter.com/share?text='+window.twitter_text+'&url=http://example.com/<?php echo $slug;?>" class="twitter-share-button"></a>'); 
</script>

Then I have the Javascript in extenral.js which is suppose to get the value of "friends_twitter" and send it back to the main page which will allow me to make a dynamic link to that persons twitter.

I tried this var friends_twitter_input = $("input[name=friends_twitter]"); but got undefined if i do window.friends_twitter_input = $("input[name=friends_twitter]"); it works a bit better but still not as intended.

I also wrote code to detect key change which works but only if it's placed inside of external.js

I may be going about this all wrong but I can't seem to get it staight. Anyhelp would be great.

Update

I'm getting the error "friends_twitter_input is not defined" in firebug but not sure why

inside custom.js

$(document).ready(function(){
var friends_twitter_input = $("input[name=friends_twitter]").val();
    $(".twitter-share-button").click(function() {
            var friends_twitter_input = $('input[name=friends_twitter]').val();

    });
}

inside index.php

<script type="text/javascript"> 
    window.document.write('<a href="http://twitter.com/share?text='+friends_twitter_input+'&url=http://example.com/<?php echo $slug;?>" class="twitter-share-button"></a>');
 </script>

I think i need to not write the share link until the input has a value or define the value as null.

Thanks for all the help.

Answer 1

Not quite sure about the structure of all your code but a few things that may help.

To get the value from the input button this is the code you need.

var friends_twitter_input = $("input[name=friends_twitter]").val();

Also make sure that the code that tries to read the value of the input text is executed after the input text is in place.

To execute your javascript after the page load use this:

$(document).ready(function() {
  //All your javascript here.
});

To hook up to the oncahnge event of the input text do this (inside the ready handler)

$("input[name=friends_twitter]").onchange(function() {
     var friends_twitter_input = $(this).val();
});

Please note that the code in the onchange event is just for demo purposes you should probably want to use onblur or better hook up in the onclick event of the submit button.