Set var in $.ajax() method using input from a form?

Question

My goal sounds fairly simple, at the moment i'm having an issue getting my head around it.

It is to get the value of a text field in a form and pass it to a var used in an $.ajax() method which posts to the Google Shopping API and gets a response in JSON which is then outputted to a webpage..

So far i've got the $.ajax method working perfectly, which returns JSON objects from Google Shopping. I can also output these into an HTML string and display the results on a webpage.

This is what I am using..

<!DOCTYPE html>
<html>
<head>
  <style>
  #images { padding:0; margin:0; overflow: hidden;}
  #images img { width:200px; height:200px; border:none;}
  #lists li { display: table;}
  #lists img { width:200px; height: 200px; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1 id="title"></h1>
<p id="description"></p>
<div id="images"></div> 
<div id="lists"></div> 

<script>


var apiKey = "key";
var country = "US";
var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";
var search = $(this).parents('form').serialize();

$.ajax({
    type: "get",
    url: apiurl,
    dataType: 'jsonp',
    data : 
    {
        key: apiKey, 
        country: country, 
        q: search,
    },
    success: function(data) {

         $.each(data.items, function(i, item){

            if (item.product.images.length > 0) // sanity check
            {

            //global variables
            var link = item.product.images[0]['link'];
            var title = item.product.title;

                var listData = "<li>" + title + "</li>" + '<img title="' + title + '" src="' + link + '" />';

                $('#lists').append(listData);

                var img = $("<img/>").attr("src", link);
                $("<a/>").attr({href: link, title: "Courtesy of me"}).append(img).appendTo("#images");

                console.log(data)
            }
        });

        // console.log(data);
        console.log(data)
    }
});

</script>
</body>
</html>

Using a form and javascript, is it possible to change the var 'search' to what a user enters in a text field, in the .ajax method to specify what I want to return?

Any suggestions would be great!

Do you just want to replace var search = $(this).parents('form').serialize(); with var search = $('#textField').val(); ? — El Ronnoco
– El Ronnoco, Commented Oct 10, 2011 at 13:48
Well, I want the value of a text field in the form to be passed to the var 'search' when the form is submitted. — jcrowson
– jcrowson, Commented Oct 10, 2011 at 15:45

Blazemonger · Accepted Answer · 2011-10-10 13:46:17Z

2

You could replace the q: search in your $.ajax call to q: $(this).parents('form').serialize()

edited Oct 10, 2011 at 13:46

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Oct 10, 2011 at 13:27

Manuel van Rijn

10.3k1 gold badge33 silver badges54 bronze badges

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

2 Comments

jcrowson Over a year ago

Ok, in order to do this I need to submit the form still. Which event should I bind to the form?

Manuel van Rijn Over a year ago

not sure if this is what you're looking for, but when the <script>untill</script> is the code for submitting the form, i would do: $("form").submit(function(e) { e.preventDefault(); .... code block ... });

Blazemonger · Accepted Answer · 2011-10-10 13:46:43Z

1

Here is how I do it when it comes to ajax forms.

build a form that actually works without js or jQuery.
use jQuery to bind an event to this form, preventDefault() and submit it via $.post.

edited Oct 10, 2011 at 13:46

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Oct 10, 2011 at 13:25

OpenGG

4,5902 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

Set var in $.ajax() method using input from a form?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related