How to submit attr value and form values with POST using JQuery and PHP?

Question

So I have a form with an input box and an 3 of a type of div that highlights when clicked. I'm trying to get it to submit the attribute and "#email" value and email it to me via PHP.

Here's my HTML:

<form id="form" name="form" class="custompurchase" action="custom.php" method="post">
    <input type="email" id="email" name="email" maxlength="40" class="textbox2" placeholder="Email address" required/>
    <a class="customoption storage" onclick="activate(this, 'storage');" data-name="500GB HDD">
        ...
    </a>
    <a class="customoption storage" onclick="activate(this, 'storage');" data-name="1TB HDD">
        ...
    </a>
    <a class="customoption storage" onclick="activate(this, 'storage');" data-name="2TB HDD">
        ...
    </a>
</form>

Here's my JQuery:

$(function() {
    var form = $('#form');
    $(form).submit(function(event) {
        event.preventDefault();
        var email = $("#email").val();
        var storage = $(".customoptionactive.storage").attr("data-name");
        $.ajax({
            type: "POST",
            url: $(form).attr("action"),
            data: email, storage
        })
        .done(function(response) {
            ...
        });
    });
});

And finally my PHP:

<?php
    $emailto = "[email protected]";
    $subject = "Custom PC";
    $email = $_POST['email'];
    $storage = $_POST['storage'];
    $entire = "Email: ".$email."\n"."Storage: ".$storage;
    mail($emailto, $subject, $entire);
?>

However, when I see the email, this is all I get:

Email:
Storage:

What am I doing wrong? Do I need to set the dataType? Thank you so much for your answers!

Edit: Different from similar question because it was a simple syntax error.

Possible duplicate of Send FormData and String Data Together Through JQuery AJAX? — Kevin Kopf
– Kevin Kopf, Commented Feb 15, 2016 at 0:48

roullie · Accepted Answer · 2016-02-15 00:46:23Z

6

Change your data option on your $.ajax

 data: email, storage

to

 data: {email:email, storage:storage}

answered Feb 15, 2016 at 0:46

roullie

2,82019 silver badges26 bronze badges

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

6 Comments

Kyle Horkley Over a year ago

You, sir, are a life saver. I've spent HOURS on this and could not figure it out. I'll accept as best answer as soon as I can :D

roullie Over a year ago

@KyleHorkley Glad i helped. :)

Kyle Horkley Over a year ago

if you don't mind, could you explain how this fixed it? I understand with the curly brackets, but what is the ":" doing to help?

roullie Over a year ago

@KyleHorkley since on your php your accessing it through $_POST['email'].. you should also name the email value with email. converting it to an input on a normal post submition it should look like <input type="text" name="email" value="" />

roullie Over a year ago

normally you could also do data : $('Your_form').serialize()

|

Community · Accepted Answer · 2017-05-23 12:15:00Z

1

You may want to use FormData and append custom data to it, as manta pointed it out here: Send FormData and String Data Together Through JQuery AJAX?

var formData = new FormData();
formData.append('storage', $(".customoptionactive.storage").attr("data-name"));

$.ajax({
    type: "POST",
    url: $(form).attr("action"),
    data: formData
})
.done(function(response) {
    ...
});

this will save you time adding those input values manually

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Feb 15, 2016 at 0:52

Kevin Kopf

14.3k15 gold badges57 silver badges69 bronze badges

Collectives™ on Stack Overflow

How to submit attr value and form values with POST using JQuery and PHP?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related