ajax form input to database post

Question

i am trying for hours now, cant get it to work

my ajax call

 $('.button').click( function() {
         var mail = $("#mail_content").val();

         alert(mail);

        $.ajax({  
            type: "POST",  
            url: "process.php",  
            data: "mail="+ mail,  
            success: function(){  
                alert("success");  
            }  
        });
    });

my process.php

<?php
//  echo "<pre>";
//  print_r($_POST);
//  echo "</pre>";

include 'config.php';
include 'lib.php';

$db = dbConnect();


$mail = quote_smart($_POST['mail']);

//insert, update, select, delete
$query = "INSERT INTO mail VALUES ('', '$mail')";
$result = insertQuery($query);


 dbClose($db);

echo "entry saved";

?>

my form

<div class="email">
            <div class="email_title">GET NOTIFIED FOR THE GRAND OPENING<br /> </div>
            <div id="contact_form">
              <form id="mail" name="mail" action="" method="post" enctype="multipart/form-data">
                <fieldset>
                  <label for="mail" id="email_label">YOUR EMAIL</label>
                  <input type="text" name="mail_content" id="mail_content" size="30" value="" class="text-input" />
                  <input type="submit" name="submit" class="button" id="submit_btn" value="SAVE" />
                </fieldset>
              </form>
            </div>
        </div>

am i overlooking something? it works when i put the process.php code in the action in the form

form:<div class="email"> <div class="email_title">GET NOTIFIED FOR THE GRAND OPENING<br /> </div> <div id="contact_form"> <form id="mail" name="mail" action="" method="post" enctype="multipart/form-data"> <fieldset> <label for="mail" id="email_label">YOUR EMAIL</label> <input type="text" name="mail_content" id="mail_content" size="30" value="" class="text-input" /> <input type="submit" name="submit" class="button" id="submit_btn" value="SAVE" /> </fieldset> </form> </div> </div> — Emillio Memoso
– Emillio Memoso, Commented Nov 10, 2012 at 23:01
Did you know that you can edit your own post to add more information to the thread? Please have a look to the FAQ : stackoverflow.com/faq — ForceMagic
– ForceMagic, Commented Nov 10, 2012 at 23:05
change it to $("#mail").submit(function(){}); instead of button click — Dinesh
– Dinesh, Commented Nov 10, 2012 at 23:10

Erdinç Çorbacı · Accepted Answer · 2012-11-10 23:18:57Z

1

Just change your ajax call as below ... This also solves submitting with enter issue.

 $('#mail').submit( function() {
        var mail = $("#mail_content").val();
        alert(mail);
        $.ajax({  
            type: "POST",  
            url: "process.php",  
            data: "mail="+ mail,  
            success: function(){  
                alert("success");  
            }  
        });
        return false;
    });

answered Nov 10, 2012 at 23:18

Erdinç Çorbacı

1,21315 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emillio Memoso Over a year ago

when i use that it does not submit and does not give me any alerts either, i also tried to bind another action to pressing the enter key but does not work

Erdinç Çorbacı Over a year ago

in order to make this work you have to use <input type="submit".... if you have converted that button in sample to <input type="button" please revert it back

ahmetunal · Accepted Answer · 2012-11-10 23:04:53Z

1

first thing I see is, your .button is a submit input, so when you click it, the form will be submitted, instead of the ajax call.

Make it a button

<input type="button" name="submit" class="button" id="submit_btn" value="SAVE" />

answered Nov 10, 2012 at 23:04

ahmetunal

3,9691 gold badge25 silver badges28 bronze badges

2 Comments

Emillio Memoso Over a year ago

one more problem, when i hit enter, it behaves like a submit.

Erdinç Çorbacı Over a year ago

Sorry but using a "button" as a ajax submit button is usually not a good idea.

Collectives™ on Stack Overflow

ajax form input to database post

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related