JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<button id='go'>Go</button>

<div class="input-group"> <span class="input-group-addon">Alias</span>

    <input type="text" class="form-control" placeholder="Alias" userprofile='alias' aria-describedby="sizing-addon2" value='' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">About me</span>

    <input type="text" class="form-control" placeholder="About me" userprofile='about_me' aria-describedby="sizing-addon2" value='a' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Other names</span>

    <input type="text" class="form-control" placeholder="Other names / aliases" userprofile='other_names' aria-describedby="sizing-addon2" value='b' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Location</span>

    <input type="text" class="form-control" placeholder="Your Location" aria-describedby="sizing-addon2" userprofile='location' value='c' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Website</span>

    <input type="text" class="form-control" placeholder="Website" aria-describedby="sizing-addon2" userprofile='website' value='d' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Public Email</span>

    <input type="text" class="form-control" placeholder="Public Email - Can be seen in your profile publicly" userprofile='email' aria-describedby="sizing-addon2" value='e' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Contact Number</span>

    <input type="text" class="form-control" placeholder="Contact Number" aria-describedby="sizing-addon2" userprofile='contact_number' value='f' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Facebook</span>

    <input type="text" class="form-control" placeholder="Alias" aria-describedby="sizing-addon2" value='g' />
</div>
<br />
<div class="input-group"> <span class="input-group-addon">Twitter</span>

    <input type="text" class="form-control"...

JavaScript

$(function () {
    $('.gobtn').click(function () {

        userKey = 'abcdefghijklmnop';
        alias = $("input[userprofile='alias']").val();
        about_me = $("input[userprofile='about_me']").val();
        other_names = $("input[userprofile='other_names']").val();
        location = $("input[userprofile='location']").val();
        website = $("input[userprofile='website']").val();
        email = $("input[userprofile='email']").val();
        contact_num = $("input[userprofile='contact_number']").val();
        facebook_link = $("input[userprofile='facebook_link']").val();
        twitter_link = $("input[userprofile='twitter_link']").val();
        pinterest_link = $("input[userprofile='pinterest_link']").val();

        $.ajax({
            type: 'POST',
            data: {
                userKey: userKey,
                alias: alias,
                about_me: about_me,
                other_names: other_names,
                location: location,
                website: website,
                email: email,
                contact_num: contact_num,
                facebook_link: facebook_link,
                twitter_link: twitter_link,
                pinterest_link: pinterest_link
            },
            url: 'script_a.php',
            //    dataType: 'json',
            //    async: false,
            success: function (result) {
                alert('success' + result);
            },

            error: function () {
                alert('error');
            }
        });
    });
});