使用jQuery进行Ajax调用并在表单提交时更新元素

Question

Here is my html form

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

Here is the javascript im trying to use to accomplish this;

$(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;
    });
});

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

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

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

Answer 1

Because you're binding to the submit click instead of the form's submit.. try this instead:

$('#createForm').submit(function() {

// your function stuff...

return false; // don't submit the form

});

Answer 2

There is great jQuery plugin called jQuery Form Plugin . All you have to do is just:

$('#createform').ajaxForm(
    target: '#generated'
});   

Answer 3

Dan's answer should fix it. However, if #createurl is not a submit/input button, and is a link styled with css etc., you can do this:

$('#createurl').click(function () {
  $('#createForm').submit();
});

$('#createForm').submit(function () {
  // all your function calls upon submit
});