jQuery ajax没有成功

Question

I have a piece of HTML code:

<div id="question_form">
<form method="POST" id="question_form" action="addQuestion.php">
<input type="hidden" id="u_id" name="u_id" value="6"/>
<input type="hidden" id="u_a_name" name="u_a_name" value=""/>
<textarea placeholder="question here" cols="138" rows="3" name="question" id="question_input"/>
<input type="image" class="ask_button" value="submit" src="img/ask.png"/>
</form>
</div>

And here is JavaScript:

$(".ask_button").click(function() {
        $.ajax({
               type: "POST",
               url: "addQuestion.php",
               data: $("div#question_form").formSerialize() + "&textareadata="+escape($("#question_input").value),
               success: function(data)
               {
                        if (data == "Asked") {
                        window.location.reload();
                    } else {
                        alert(data);
                    }
               }
             });
        return false;
    });

The php file checks is question is empty and if not - writes it into database.

When I click on submit button I see the addQuestion.php page, not alert, though php script is executed correctly. What can be a problem?

Answer 1

escape($("#question_input").value) should be encodeURIComponent($("#question_input").val())

The jQuery object has no value property(use .val() instead) which is causing an error in your code and presumably causing the form to submit to addQuestion.php

---

You also have two id tags with the same name:

<div id="question_form">
<form method="POST" id="question_form" action="addQuestion.php">

Each id tag must be completely unique in the HTML for jQuery to supply expected results. Try renaming one of them.