JS to get checked box value add to URL and then on click goes to URL

Question

I have a script that looks like this:

var baseUrl = 'http://ab3.0e7.myftpupload.com/idmatch_process.php?idmatch_process.php?quizid=". urlencode($quiz_id) ."&escalation=". urlencode($escalation) ."&correctrule=". urlencode($correctrule) ."&page=" . $next_page ."&ans=';

$(document).ready(function () {

// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e) {

    e.preventDefault();

    if ($(this).is(':checked')) {

        // read in value
        var queryString = $(this).val();

        // loop through siblings (customize selector to your needs)
        var s = $(this).siblings();
        $.each(s, function () {

            // see if checked
            if ($(this).is(':checked')) {

                // append value
                queryString += ' OR ' + $(this).val();
            }
        });

        // jump to url
        window.location = baseUrl + queryString;
    }
});

});

Basically I am getting the value of the checked box and then appending it to the and of baseUrl. Then i am automatically changing the window location. What i would like to do is have the window location changes not on checkbox click but on a button click that I will add. Anyone have an easy way of doing this?

Alexis · Accepted Answer · 2016-04-08 14:02:59Z

Store your ulr in a global var.

show the button only if url is not empty and redirect on click.

var baseUrl = 'http://ab3.0e7.myftpupload.com/idmatch_process.php?idmatch_process.php?quizid=". urlencode($quiz_id) ."&escalation=". urlencode($escalation) ."&correctrule=". urlencode($correctrule) ."&page=" . $next_page ."&ans=';

var newurl="";

$(document).ready(function () {

// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e) {

    e.preventDefault();

    if ($(this).is(':checked')) {

        // read in value
        var queryString = $(this).val();

        // loop through siblings (customize selector to your needs)
        var s = $(this).siblings();
        $.each(s, function () {

            // see if checked
            if ($(this).is(':checked')) {

                // append value
                queryString += ' OR ' + $(this).val();
            }
        });

        // jump to url
       newurl = baseUrl + queryString; //setting new url
       $("#yourbutton").show();
    }
});

  $("#yourbutton").click(function(){
     if(newurl!="")
       window.location.href=newurl;
}

});

Richard Vanbergen · Accepted Answer · 2016-04-08 14:02:57Z

If you move the declaration of queryString to the outer scope you can use it later on click.

$(document).ready(function () {
  var queryString = '';

  // listen to change event (customize selector to your needs)
  $('input[type=checkbox]').change(function (e) {

    e.preventDefault();

    if ($(this).is(':checked')) {
      // read in value
      queryString = $(this).val();

      // loop through siblings (customize selector to your needs)
      var s = $(this).siblings();
      $.each(s, function () {
        // see if checked
        if ($(this).is(':checked')) {
          // append value
          queryString += ' OR ' + $(this).val();
        }
      });
    }
  });

  $('button.submit').on('click', function() {
    // jump to url
    window.location = baseUrl + queryString;
  });
});

E.Serra · Accepted Answer · 2016-04-08 13:58:46Z

0

You can create a button that onclick does what you are doing now on document ready, that should work.

answered Apr 8, 2016 at 13:58

E.Serra

1,68412 silver badges14 bronze badges

Collectives™ on Stack Overflow

JS to get checked box value add to URL and then on click goes to URL

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related