CODEWITHSUNDEEP
javascriptphpajaxforms
ikinciadam
ikinciadam

Reputation: 129

Send Form Data Through JQuery AJAX / javascript

I have a form like this;

<form action="out.php" method="post">
    <input type="hidden" name="a" value="a" />
    <input type="hidden" name="b" value="b" />
    <input type="hidden" name="c" value="c" />
    <input type="hidden" name="d" value="d" />
    <input type="hidden" name="e"  maxlength="60" value="e" />
    <input type="hidden" name="f" value="f" />
    <input type="submit" value="Create & Send">
</form>

this form can not be seen by users. They just see a submit button like "Create Label & Send To Customer" . But they need to input Customer's eMail Address. So i have a js code the submit button trigger it. And it asks the email address. The JS code:

$('#dialog_prompt').click(function(){
    $.prompt("What is customer's email?","",
    function(value){
        $.msg("So, you like '"+value+"'?");
    },
    function(){
        $.msg("You clicked cancel!");
    });
});

So my problem is; when the user submit the button and input the customer's email and hit the ok, JS must send the values from the form & email address to the "out.php".

So how can I send form data via JS?

Upvotes: 0

Views: 313

Answers (2)

Unamata Sanatarai
Unamata Sanatarai

Reputation: 6637

HTML:

<form action="out.php" method="post">
<input type="hidden" name="em" value="" class="customeremail" />
<input type="hidden" name="a" value="a" />
<input type="hidden" name="b" value="b" />
<input type="hidden" name="c" value="c" />
<input type="hidden" name="d" value="d" />
<input type="hidden" name="e"  maxlength="60" value="e" />
<input type="hidden" name="f" value="f" />
<input type="submit" value="Create & Send">
</form>

JS:

$('#dialog_prompt').click(function(){
    $.prompt("What is customer's email?","",
    function(value){
        $('form .customeremail').val(value);
        $('form').ajaxSubmit();
    },
    function(){
        $.msg("You clicked cancel!");
    });
});

Upvotes: 2

Jenz
Jenz

Reputation: 8369

You can send the details using AJAX.

$('#dialog_prompt').click(function(){
                $.prompt("What is customer's email?","",
                function(value){        
                    $.msg("So, you like '"+value+"'?");

                    $.ajax({
                    url: "out.php",   // url to which details are send
                    type: 'POST',
                    data: $('form').serialize(),   // pass form details
                    } ).done (function(data) {      // on success

                  });

                },
                function(){
                    $.msg("You clicked cancel!");
                });
            });

Now you can access the values passed through AJAX in out.php page using $_POST.

Note : The serialize() method creates a URL encoded text string by serializing form values.

Upvotes: 0

Related Questions