Getting value from input box, changing url based on certain conditions

Question

Should be straightforward, but I just can't work out why this will not work! I'm a n00b, first off.

I have two input boxes that users need to fill in, a name and an amount. If these have been filled in, I change the query string on the URL, if not, then I give them a pre-defined query string for the URL.

I can't get a working jsfiddle, as something weird is going on with the & signs for my query string, sigh.

Basically, I cannot get the URL to change on click.

So here's my code, and the non-working jsfiddle for those interested: http://jsfiddle.net/9uk68m6x/

        <form>
                <input type="text" class="name">
                <input type="text" class="amount">
            <script type="text/javascript">

                $(function() {

                    $('.makeUrl').click(function(){
           var url = 'http://www.website.com',
           nameVal = $("input.name").val(),
                         amountVal = $("input.amount").val();
                         if (nameVal != ''){
                            //if name value isn't blank, then
                                $("a.makeUrl").prop("href", url+'&name='+nameVal+'&free_amount=1&amount='+amountVal+'00');
                            }
                            else (nameVal == ''){
                                $("a.makeUrl").prop("href", "http://www.website.com&free_amount=1&amount=200");
                            }

                    });

                });
            </script>
            <a href="http://www.website.com&free_amount=1&amount=200" class="ctaButton makeUrl">Donate</a>
        </form>

Terry · Accepted Answer · 2014-12-03 16:33:25Z

There is a syntax error in your script: else do not accept any kind of arguments. Use else if instead. However, since your condition is binary (nameVal is either empty or not), then you can actually make do without the second if statement.

Therefore, some changes I have made:

Revise the conditional statement. You simply have to check if nameVal is empty or not using the expresison !nameVal.
Change the href attribute using .attr() instead of .prop().
Use $(this) in the click function since it is cached

Here is the fiddle: http://jsfiddle.net/teddyrised/9uk68m6x/4/

$(function () {
    $('.makeUrl').click(function (e) {
        // Declare variables
        var url = 'http://www.website.com',
            nameVal = $("input.name").val(),
            amountVal = $("input.amount").val();

        // Conditional statement
        if (nameVal) {
            //if name value isn't blank, then
            $(this).attr("href", url + '&name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00');
        } else {
            $(this).attr("href", "http://www.website.com&amp;free_amount=1&amp;amount=200");
        }

        // Check updated href
        console.log($(this).attr("href"));
    });
});

Phil Tune · Accepted Answer · 2014-12-03 16:21:42Z

1

You need to have a ? in there somewhere. A valid parameterized URL would be:

"http://www.website.com/?free_amount=1&amount=200"

Yeah, that is kinda hard to fiddle when they encode those characters for you before it runs.

answered Dec 3, 2014 at 16:21

Phil Tune

3,3824 gold badges27 silver badges53 bronze badges

Comments

delCano · Accepted Answer · 2014-12-03 16:25:04Z

1

After a couple changes to your JS, it seems to be working, at least in JSFiddle.

$(function () {
  $('.makeUrl').click(function () {
    var url = 'http://www.website.com',
        nameVal = $("input.name").val(),
        amountVal = $("input.amount").val();
    if( nameVal !== "" ) {
        //if name value isn't blank, then
        $("a.makeUrl").prop("href", url + '?name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00');
    } else {
        $("a.makeUrl").prop("href", "http://www.website.com?free_amount=1&amount=200");
    }
  });
});

answered Dec 3, 2014 at 16:25

delCano

3852 silver badges12 bronze badges

Comments

vaso123 · Accepted Answer · 2014-12-03 16:27:12Z

You had a syntax error at the else. Remove the (newVal == '') or use else if

Anyway, here is a working jsfiddle what is show you the URL. (Prevent to activate the link, because of e.preventDefault();

And it's checkin the amountVal also.

<form>
    <input type="text" class="name">
    <input type="text" class="amount">
    <script type="text/javascript">
        $(function() {
            $('.makeUrl').click(function(e) {
                e.preventDefault();
                var url = 'http://www.website.com',
                        nameVal = $("input.name").val(),
                        amountVal = $("input.amount").val();
                var newUrl;
                if (nameVal !== '' && amountVal != '') {
                    //if name value isn't blank, then
                    newUrl = url + '?name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00';
                    $("a.makeUrl").prop("href", newUrl);

                } else {
                    newUrl = 'http://www.website.com&free_amount=1&amount=200';
                    $("a.makeUrl").prop("href", "http://www.website.com?free_amount=1&amount=200");
                }
                $('#url').html(newUrl);


            });

        });
    </script>
    <a href="http://www.website.com?free_amount=1&amount=200" class="ctaButton makeUrl">Donate</a>
</form>
<div>URL is: <span id="url"></span></div>

Collectives™ on Stack Overflow

Getting value from input box, changing url based on certain conditions

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related