why not just use $.ajax? just as easy, and you have more control over what gets submitted.
Can't call ajaxSubmit function on document body
-
07-10-2022 - |
Question
I can only insert my code on the body of the page. I need to submit form via Ajax and send strings to server app. So i use jQuery
form plugin. This is a code that i try to add:
<script src='http://somesite.ru/interactive/jquery-1.8.3.min.js'></script>
<script src='http://malsup.github.io/min/jquery.form.min.js'></script>
<link rel='stylesheet' type='text/css' href='http://somesite.ru/interactive/somesite_interactive.css'>
<div id='question_block'>
<b>You can left your question at the form right here:</b>
<form action='http://somesite.ru/interactive/question' id='interactive_form'>
<span>Your name:</span><input type='text' name='sender' size='64'>
<textarea name='question_text'></textarea>
<input type='button' id='interactive_submit_question' value='Отправить'>
</form>
<script type='text/javascript'>
$("#interactive_submit_question").click(function(){
$("#interactive_form").ajaxSubmit();
$("#interactive_question_block").html("<b>Thanks! Your question was submited successfully.</b>");
});
</script>
I don't get any errors while page is loading, but when i click the button i got
"TypeError: $(...).ajaxSubmit is not a function".
But i just import the form plugin with
<script src='http://malsup.github.io/min/jquery.form.min.js'></script>
Update:
Looks like the problem is that at this page already loaded jQuery (2 times) and old version of form plugin.
I just used a simple function $.post() to send data to my server.
Solution
OTHER TIPS
Do you really need ajaxSubmit method? You can try this:
<script type='text/javascript'>
$(document).ready(function() {
var helper = {};
helper.parseFormData = function parseFormData(form) {
var json = {};
form.find("[name]").each(function() {
var _name = $(this).attr("name")
, _value = $(this).attr("value");
json[_name] = _value;
});
return json;
};
helper.submitForm = function submitForm(form, callback) {
var _data = helper.parseFormData(form)
, _url = form.attr("action")
, _type = form.attr("method");
$.ajax({
type: _type,
url: _url,
data: _data,
success: function(content, p2, p3) {
callback(content);
},
error: function(p1, p2, p3) {
callback(null);
}
});
};
// submit form on button click
$("#interactive_submit_question").click(function(){
helper.submitForm($("#interactive_form"), function() {
$("#interactive_question_block").html("<b>Thanks! Your question was submited successfully.</b>");
});
});
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow