Value from a text field is not returning anything

Question

I'm trying to build a little app where the user enters a store name which will become the alt text to an image and the URL of their store which will become a h ref, which will then generate some copy and paste code to use on their website.

The problem I have is that when trying to use vanilla JavaScript to read the value of the store name nothing is showing.

Please see my fiddle: http://jsfiddle.net/willwebdesigner/gVCcm/

$(document).ready(function() { 

    //  Creates a method and prototype for the Array for splicing up words
    Array.prototype.removeByValue = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    }

    var myStore = {
        storeName: document.getElementById("storeName").value,
        Url: document.getElementById("yourURL"),
        instructions: "<p>Please copy the code above and paste it into your webpage to display the shop4support logo and a link to your store.</p>",

        blackLogo: function() {
            return "&lt;img src=&quot;https://www.shop4support.com/Resources/home/information/InformationForProviders/Availables4s-bk.jpg&quot; alt=&quot;" + this.storeName + " is available on shop4support&quot; /&gt;";
        }
    }

    $("#urlForm").submit(function(e) {

        // Clear output form first
        $(output).html(' ');
        e.preventDefault();

        // Create an array for conditional statements
        var address = [];
        address = $(myStore.Url).val().split("www");

        // Need to put a conditional in here to detect if https://
        if(address[0] === "https://") {
            $(output)
                .slideDown()
                .prepend("&lt;a href=&quot;"+ $(myStore.Url).val() + "&quot;&gt;" + myStore.blackLogo() + "&lt;/a&gt; ")
                .append(myStore.instructions);

        } else if(address[0] === "http://") {
            // Remove the http part off the URL
            var removeHttp = address;
            removeHttp.removeByValue('http://');
            $(output)
                .slideDown()
                .prepend("&lt;a href=&quot;https://www" + removeHttp + "&quot;&gt;" + myStore.blackLogo() + "&lt;/a&gt; ")
                .append(myStore.instructions);

        } else {
            $(output)
                .slideDown()
                .prepend("&lt;a href=&quot;https://"+ $(myStore.Url).val() + "&quot;&gt;" + myStore.blackLogo() + "&lt;/a&gt; ")
                .append(myStore.instructions);
        }
    });
});

Thanks Will

Answer 1

The moment you are initializing the myStore object the values aren't filled in yet. You will have to do this on submit.

So you can move the var myStore = {} into the submit callback:

http://jsfiddle.net/gVCcm/1/

Answer 2

update your code as :

    $("#urlForm").submit(function(e) {
               myStore.storeName= (document.getElementById("storeName").value);
   /* The rest of your code */
    }