Using a send button in a GET request in jQuery

Question

I am using jQuery to send a request to my server and then render the results. However, now I want to use a button, so that the request would only be sent after clicking on the send button, not like my previous code where I used an "onkeyup" which is uncontrollable; because I want to send my request after finishing typing my request and not before.

         <script>
       function Search(query_text)
        {
        $.get( "http://localhost:9000?query="+query_text, function( data ) {
                 $(\"#div2\").empty()
                 ..............
                 $(\"#div2\").append("</table>")
        }, "json")
    .fail(function() {
           $("#rep")
               .append('<br/><p style="color:red">Oops! Error with XMLHttpRequest</p>')
        });
        ;
        }   
        </script>

This is the input that calls the jQuery function:

  <input id="queryText" type="text" onkeyup="Search($(this).val())" /><br>

I've tried to add a simple button and then call the jQuery function like this, but it didn't work because the page reloads and I don't get the results I need:

        <form class="form-inline">
        <div class="form-group">
        <input type="text" class="form-control" id="queryText" placeholder="Your text">
        </div>
        <button type="submit" class="btn btn-primary" onclick="Search($('#queryText').val())">Find courses</button>
        </form>

I don't know if there is a way to keep using GET requests instead of using a form and sending that time a POST request.

Thank you in advance!

chnnge button type submit to type="button".

Nishit Maheta
– Nishit Maheta

2015-02-21 06:17:50 +00:00
Commented Feb 21, 2015 at 6:17 — Nishit Maheta
– Nishit Maheta, Commented Feb 21, 2015 at 6:17

Kartikeya Khosla · Accepted Answer · 2015-02-21 06:25:52Z

1

Correct the id you are using its queryTexte and not queryText and instead of double quotes use single quotes in jQuery selector as shown :-

<button type="button" class="btn btn-primary" onclick="Search($('#queryTexte').val())">Search</button>

Instead of using type=submit button make it type=button as shown above.

edited Feb 21, 2015 at 6:25

answered Feb 21, 2015 at 6:16

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

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

2 Comments

Othmane Over a year ago

Thank you now at least I succeed to get the text inside, however my page reloads when I click on the button. I will update my question !

Kartikeya Khosla Over a year ago

@Othmane..you are using submit button instead use type=button as shown in my answer.

winhowes · Accepted Answer · 2015-02-21 06:24:58Z

1

I would do something like this to keep JS and HTML separated and avoid quote issues:

$("button").on("click", function(){
    Search($("#queryTexte").val());
});

And if your script is loaded before the DOM element, wrap it like this to wait for the DOM to be ready:

$(function){
    $("button").on("click", function(){
        Search($("#queryTexte").val());
    });
});

answered Feb 21, 2015 at 6:24

winhowes

8,1255 gold badges31 silver badges41 bronze badges

Comments

Domain · Accepted Answer · 2015-02-21 06:24:49Z

0

HTML:

<input id="queryTexte" type="text" /><br>

jQuery:

<script>

jQuery(document).ready(function($){

    $('.btn-primary').click(function(){

    var query_text = $('#queryTexte').val();

            $.get( "http://localhost:9000?query="+query_text, function( data ) {
                     $('#div2').empty();
                     ..............
                     $('#div2').append("</table>");
            }, "json")
        .fail(function() {
               $("#rep")
                   .append('<br/><p style="color:red">Oops! Error with XMLHttpRequest</p>')
            });
      });
});
</script>

answered Feb 21, 2015 at 6:24

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

Using a send button in a GET request in jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related