jquery submit url query strings without form

Question

I have this simple html page:

<html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
         $(document).on('click', 'button', function(){
             var selectval = $('select').val();
             $.get('/',
             {
                  selectval: selectval
             });
         });
    });
    </script>
    </head>

    <body>
    <select>
         <option value="Option1">Option1</option>
         <option value="Option2">Option2</option>
    </select>

    <button>Submit</button>
    </body>
</html>

I want the button to act like a submit button on a form with get method. So clicking the button should submit the get variable (selectval) as a query string.

So clicking the button should go to:

http://domain.com/?selectval=option1

Is there a way to do this without wrapping into a form?

i don't like using forms much. Also interested to know if this is doable at all or not — Michael Samuel
– Michael Samuel, Commented Sep 27, 2014 at 13:55

Apul Gupta · Accepted Answer · 2014-09-27 14:49:55Z

3

Try this as javascript:

<script type="text/javascript">
    $(document).ready(function () {
         $(document).on('click', 'button', function(){
             var selectval = $('select').val();
             location.href = "?selectval="+selectval;
         });
    });
    </script>

answered Sep 27, 2014 at 14:49

Apul Gupta

3,0344 gold badges24 silver badges30 bronze badges

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

1 Comment

Apul Gupta Over a year ago

:) Sometimes solutions are simpler than our expectations. Why should we try harder way? :)

bansi · Accepted Answer · 2014-09-27 15:08:19Z

1

you can do it and it is perfectly valid to do so. You can try the following method to do it. Note I have used IDs for the required elements.

<html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
         $('#btn').click( function(){
             var selectval = $('#opt').val();
             $.get('/',
             {
                  selectval: selectval
             },function(data){
                 alert(data);
             });
         });
    });
    </script>
    </head>

    <body>
    <select id="opt">
         <option value="Option1">Option1</option>
         <option value="Option2">Option2</option>
    </select>

    <button id="btn">Submit</button>
    </body>
</html>

Fiddle Here

edited Sep 27, 2014 at 15:08

answered Sep 27, 2014 at 13:59

bansi

57.3k6 gold badges44 silver badges52 bronze badges

2 Comments

Michael Samuel Over a year ago

sorry tried this and it did nothing...it didn't submit anything

bansi Over a year ago

It is working for me, the only thing i changed is use jquery from different source. src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" http://code.jquery.com/jquery-latest.min.js doesn't seem to load from my machine

Collectives™ on Stack Overflow

jquery submit url query strings without form

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related