[SOLVED] In jquery or jquery mobile, how can one pass a link created by a user to a button also created by the user? By user I mean the end-user, not me

In jquery or jquery mobile, how can one pass a link created by a user to a button also created by the user? By user I mean the end-user, not me

I've started off by using this example: http://jsfiddle.net/WEyyh/144/;

<div data-role="page" id="home">
    <div data-role="content">

        <input type="text" id="buttonText" placeholder="Enter Button Name"/>
        <input type="button" id="createButton" value="Create Button" />
        <div id="buttonPlaceHolder">&nbsp;</div>

    </div>
</div>
<script>
    $('#createButton').bind('click', function() {
        $('#buttonPlaceHolder').append('<a href="#"  
            data-role="button">'+$('#buttonText').val()+'</a>');
        // refresh jQM controls
        $('#home').trigger('create');
    });
</script>

and now I want to add functionality to each new button created by the user by taking his/her input of a web address and passing it to the anchor for that button. i.e. I want to replace the hash mark in 'href="#"' to whatever the user types into an address field (which will be located directly beneath the "enter button name" field) once "create button" is clicked. I've been trying for days and don't think I've gotten close to figuring this out or finding a good example.

Solution

Here check out this fiddle - http://jsfiddle.net/WEyyh/152/

I simply took your example and added another input to your form with an id of url.. and when the button is being created I am using the .val() of that input and putting it instead of the # in your anchor

$('#buttonPlaceHolder').append('<a href="' + $('#url').val() + '" data-role="button">'+$('#buttonText').val()+'</a>');

Keep in mind that when you enter something into the input box you should have http:// there because otherwise it will assume it is a local link.. try http://www.google.com

API link for val() - http://api.jquery.com/val/