How to pass the value from input checkbox to URL Parameters in jquery

Question

I am trying to update the url Parameters based on the input selected of the form.

<form method="get" action="current.php" id="header-form">   
  <input type="hidden" name="location" value="location">
  <input type="checkbox" name="type[]" class="type" value="opt1"> option1
  <input type="checkbox" name="type[]" class="type" value="opt2"> option2
  <input type="checkbox" name="type2[]" class="type1" value="new1"> new1
  <input type="checkbox" name="type2[]" class="type1" value="new2"> new2
</form>

Jquery

By selecting the checkbox i want to append the values to the URL

My Jquery

<script type="text/javascript">
  $(document).ready(function() {
    $(".type").change(function () {
      $("#header-form").trigger("submit");
    });
    $(".type1").change(function() {
      $("#header-form").trigger("submit");
    });
  });
</script>

If i select option1 it works fine and if i try to select the option 2, it removes the option 1 from the URL.

If i select the option 1 & option 2

URL Should be -> http://localhost.current.php?type=option1&option2

And if i select all the values option1 & option 2 and new 1 & new 2

URL Should be -> http://localhost.current.php?type=option1&option2?type1=new1&new2

And if i select the values option1 & new 1 & new 2

URL Should be -> http://localhost.current.php?type=option1?type1=new1&new2

No, i dont know how to do it in Ajax. It will be great to send via ajax. I have php query on the page to show the results based on the url parameters. — user2468312
– user2468312, Commented Nov 6, 2021 at 0:50
so why did you submit form with each checkbox change? and what is #property? — Maria Raynor
– Maria Raynor, Commented Nov 6, 2021 at 0:52
If you use the submit button, this will happen by clicking on the submit button. Is there a reason you do not do this? — Maria Raynor
– Maria Raynor, Commented Nov 6, 2021 at 0:54

Maria Raynor · Accepted Answer · 2021-11-06 01:44:30Z

2

You must keep the previous submit data.
do this with PHP:

<form method="get" action="current.php" id="header-form">

    <input type="hidden" name="location" value="location">
    <input type="checkbox" name="type[]" <?php if(isset($_GET['type']) && in_array('opt1', $_GET['type'])): ?>checked<?php endif; ?> class="type" value="opt1"> option1
    <input type="checkbox" name="type[]" <?php if(isset($_GET['type']) && in_array('opt2', $_GET['type'])): ?>checked<?php endif; ?> class="type" value="opt2"> option2

    <input type="checkbox" name="type2[]" <?php if(isset($_GET['type2']) && in_array('new1', $_GET['type2'])): ?>checked<?php endif; ?> class="type1" value="new1"> new1
    <input type="checkbox" name="type2[]" <?php if(isset($_GET['type2']) && in_array('new2', $_GET['type2'])): ?>checked<?php endif; ?> class="type1" value="new2"> new2

</form>

edited Nov 6, 2021 at 1:44

answered Nov 6, 2021 at 1:08

Maria Raynor

3621 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2468312 Over a year ago

Now it keeps the value selected from the URL. Thank you

user2468312 Over a year ago

Sorry, there is a issue, the url works as expected, but the check box selected value is incorrect, if i select only opt2, after the page load, the selected option is [op1] instead of opt2.

Maria Raynor Over a year ago

@user2468312 sorry, you're right. I updated my answer.

Maria Raynor Over a year ago

@user2468312 you're welcome.

Collectives™ on Stack Overflow

How to pass the value from input checkbox to URL Parameters in jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related