using jquery to make ajax call and update element on form submit
<p>Here is my html form</p>

<pre><code>    &lt;div id=create&gt;
        &lt;form action=index.php method=get id=createform&gt;
        &lt;input type=text name=urlbox class=urlbox&gt;
        &lt;input type=submit id=createurl class=button value=go&gt;
        &lt;/form&gt;
    &lt;/div&gt;
    &lt;div id=box&gt;
        &lt;input type=text id=generated value="your url will appear here"&gt;
    &lt;/div&gt;
</code></pre>

<p>Here is the javascript im trying to use to accomplish this;</p>

<pre><code>$(function () {
    $("#createurl").click(function () {
        var urlbox = $(".urlbox").val();
        var dataString = 'url=' + urlbox;

            if (urlbox == '') {
                alert('Must Enter a URL');
            }else{
                $("#generated").html('one moment...');
                $.ajax({
                    type: "GET",
                    url: "api-create.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("#generated").prepend(html);
                    }
                });
            }return false;
    });
});
</code></pre>

<p>when i click the submit button, nothing happens, no errors, and the return data from api-create.php isnt shown.</p>

<p>the idea is that the new data from that php file will replace the value of the textbox in the #box div.</p>

<p>i am using google's jquery, and the php file works when manually doing the get request, so ive narrowed it down to this</p>
