Send input checkbox values, only those selected to window.open()

Asked

Viewed 132 times

0

I would like to send the checkbox values, only those selected to a page using the window.open():

<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste1'> Teste1</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste2'> Teste2</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste3'> Teste3</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste4'> Teste4</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste5'> Teste5</label>
<div>
<div class='btn-box'>
    <button class='btn btn-info'>Enviar</button>
</div>

I tried that way but the values are sent like this:

<script>
    $('.checkbox .btn').click(function(){
         var inputValores = $('.checkbox input').serialize();
         window.open('destino.php?' + inputValores);
    });
</script>

The URL GETS:

destino.php?checkbox=Teste1&checkbox=Teste2&checkbox=Teste3....

CAN BE SENT LIKE THIS?

destino.php?checkbox[].....
javascript html input
  • 1

    Are you using jQuery?

  • Hi Fernandosavio solved the b.o., posted the solution below, thanks for the attention!

2 answers

1

You can send via POST. Just place the checkboxes within a form. Then open a new tab with window.open() giving a name to the tab, and make a Submit pointing to the tab name:

<form name="boxes" method="post" action="destino.php" target="destino">
   <div class='checkbox'>
       <label><input type='checkbox' name='checkbox[]' value='Teste1'> Teste1</label>
   </div>
   <div class='checkbox'>
       <label><input type='checkbox' name='checkbox[]' value='Teste2'> Teste2</label>
   </div>
   <div class='checkbox'>
       <label><input type='checkbox' name='checkbox[]' value='Teste3'> Teste3</label>
   </div>
   <div class='checkbox'>
       <label><input type='checkbox' name='checkbox[]' value='Teste4'> Teste4</label>
   </div>
   <div class='checkbox'>
       <label><input type='checkbox' name='checkbox[]' value='Teste5'> Teste5</label>
   </div>
   <div class='btn-box'>
       <button class='btn btn-info'>Enviar</button>
   </div>
</form>

<script>
$('.btn-box button.btn').click(function(){
   window.open(null, 'destino');
   document.forms.boxes.submit();
});
</script>

In this line:

window.open(null, 'destino');

The first argument null would be the page to open, but it will be loaded by the attribute action of form. And the second argument 'destino' is the name of the tab, where the attribute target has the same value and where to send the form.

  • Can not send via POST, flees the purpose. I have resolved and thank you for the attention given.

0

I solved the O.R. as follows:

<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste1'> Teste1</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste2'> Teste2</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste3'> Teste3</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste4'> Teste4</label>
<div>
<div class='checkbox'>
    <label><input type='checkbox' name='checkbox[]' value='Teste5'> Teste5</label>
<div>
<div class='btn-box'>
    <button class='btn btn-info'>Enviar</button>
</div>

<script>
    $('.btn-box button.btn').click(function(){
        var valores= new Array();
        $(".checkbox input:checked").each(function () {
           valores.push( $(this).val() );
        });
        parent.location.href='destino.php?arr=' + valores + '';
    });
</script>

Browser other questions tagged javascript html input

You are not signed in. Login or sign up in order to post.