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?

Answer 1

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;
  });
});

Answer 2

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;
}

});

Answer 3

您可以创建一个按钮，使onclick在准备好文档时可以立即执行操作，该按钮应该可以正常工作。