Question

I’ve a text box and a submit button. When the form is submitted (enter pressed or button clicked), I’d like the browser to remain on the current page and not reload anything.

I’d like to take the input from the text field, use this data to contact an HTTP GET API, then return the output from the API back into the input text box, and highlight the output so that it can be copied to clipboard.

I’m new to jQuery, so if anyone’s willing to write this hopefully small snippet of code, it’d be much appreciated 🙂

Answer 1

This code says:

• When the form submits…
• don’t do the default thing (submitting the form)…
• send a GET request to the specified server with a certain value, then when it completes run a function that…
• puts the data into the input and…
• selects the text in the input.

You’ll need to change your URL, the mystring to whatever the server is expecting as a paramater, and if you have multiple forms or inputs, you’ll need to specify ids or classes (e.g. form#myid or form.myclass). Other than that this should work.

$('form').submit(function(e){
    e.preventDefault();
    $.get("/url/from/get/api", {mystring: $('input').val()}, function(data, status) {
        $('input').val(data);
        $('input').select()
    });
    return false;
})

Read more at http://api.jquery.com/jQuery.get/