Clash Royale CLAN TAG#URR8PPP

Submit form using JS and AJAX

I have little problem with JS and AJAX, i dont know this languages. I know php and i have applied for position php developer, now i have some tasks to do and i stucked at one. It is simple task, form, submit, process information, store in DB, and send. Only problem is i have to use AJAX to submit form, i done little research and somehow i made wrote this code but it doesnt work.

<div>
<form method="POST" action="add.php" id="form">
<input type="email" name="email" id="email" value="Email">
<textarea name="content" id ="content">Message</textarea>
<input type="submit" value="Submit" id="submit">
</form>
<a href="send.php">Send messages from database</a>
</div>
<script>
$(document).ready(function()
// When click on button store values from form fields into variables
$("form").submit(function(event) );
);
</script>
</body>


IN form can i use input type button instead of submit (so no need for preventDefault in JS) and in JS i do it
$("#submit").click(function.....

I think i have tried all combinations and when form is submited it goes with default, no JS activated...

SOLVED: problem was in IF statment, content="" instead of content=="", OMG how i overlooked that...

url: ("#form").attr('action');

url: ("#form").attr('action');

,

$("#form").submit(...

3 Answers
3

Use the serialize() method (described bellow) instead of manually getting the value of each field of your form in order to build the JSON object.

serialize()

$('#form').submit(function()
$.ajax(
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function()
alert("Data successfully forwarded to add.php");

);
return false;
);


You have a syntax error in your ajax call.

ajax

$.ajax (
type: "POST",
url: ("#form").attr('action'); // This is bad JSON
data: "email": email, "content": content,
cache: false,
success: function()
alert("Data successfully forwarded to add.php");

);


Replace that line with:

url: $("#form").attr('action'),


To answer your questions, yes you are right, you can use an input of type button and you don't necessary need to depend on submitting the form. Here is how you'd write it without form submission:

input

button

<div>
<form method="POST" action="add.php" id="form">
<input type="email" name="email" id="email" value="Email">
<textarea name="content" id ="content">Message</textarea>
<input type="button" value="Submit" id="submit" onclick="SendAjax();">
</form>
<a href="send.php">Send messages from database</a>
</div>
<script>
// When click on button store values from form fields into variables
function SendAjax()
var email = $("#email").val();
var content = $("#content").val();
// Check if fields are empty
if (email==""
</script>


As you can see, I prefer to specify the URL in AJAX instead of taking it from the form's action which I sometimes have it set to a different URL from the AJAX. However, if you want to take the URL from the form's action, then fix that line in your code to be:

url: $("#form").attr('action'),


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.