AJax Submit onclick Font Awesome Icon

Question

I am trying to display a simple rating option on a website, a thumbs up & down that when clicked will send the response to my external URL.

The site will be displayed on mobile devices as well as desktops (that's why i'm using touchstart and click ).

I need to post the following values to my external URL;

• date
• time
• feedback (good / bad)

I'm successfully receive the date and time, but not feedback type. Looking at the console I can see the following;

My code is as follows;

HTML

<form id="kioskFeedback">
    <a href="#" id="feedbackGood" name="Feedback" value="GOOD"> <i class="fa fa-thumbs-o-up fa-4x"></i></a>
    <a href="#" id="feedbackBad" name="Feedback" value="BAD"> <i class="fa fa-thumbs-o-down fa-4x"></i></a>
</form>

AJAX

    $(document).ready(function() {
        var today = new Date();
        var date = today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        $("#kioskFeedback").on("touchstart, click", function(e) {
            event.preventDefault();
            var serializedData = $(this).serialize();
            $.ajax({
                url: "my external url here",
                type: "post",
                data: serializedData + '&Date=' + date + '&Time=' + time
            });
            .done(function(response, textStatus, jqXHR) {
                console.log('success');
            });
        });
    });

Answer 1

Expanding on @ADyson's comment, look at the docs for $.serialize() http://api.jquery.com/serialize/

---

To Make what you have work...

Change this var serializedData = $(this).serialize();

to this var serializedData = $(this).attr('value');

That should get you started. Once you read the documentation and understand that <a></a> elements are not form elements and the $.serialize() method will not return the expected results you may want to go back and update the rest of the click handler to use a different variable name like so,

    $("#kioskFeedback a").on("touchstart, click", function(e) {
        e.preventDefault();
        var feedbackVal = $(this).attr('value');
        $.ajax({
            url: "my external url here",
            type: "post",
            data: {
                // If the script is expecting "Feedback" swap in place of "value"
                value: feedbackVal,
                Date: date,
                Time: time
            }
        });
        .done(function(response, textStatus, jqXHR) {
            console.log('success');
        });
    });

Also you should change event.preventDefault(); to e.preventDefault() seeing that your event information is being passed as e and not event .

Your target needs to get updated also, so adding an a to $("#kioskFeedback") like this $("#kioskFeedback a") will shrink the scope to the link element. Allowing you to get the attribute value.

I am also attaching a working fiddle.

 $("#kioskFeedback a").on("touchstart, click", function(e) { e.preventDefault(); var feedbackVal = $(this).attr('value'); console.log(feedbackVal); /* $.ajax({ url: "my external url here", type: "post", data: { // If the script is expecting "Feedback" swap in place of "value" value: feedbackVal, Date: date, Time: time } }); .done(function(response, textStatus, jqXHR) { console.log('success'); }); */ }); 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="kioskFeedback"> <a href="#" id="feedbackGood" name="Feedback" value="GOOD"> <i class="fa fa-thumbs-o-up fa-4x"></i></a> <a href="#" id="feedbackBad" name="Feedback" value="BAD"> <i class="fa fa-thumbs-o-down fa-4x"></i></a> </form>