samedi 9 mai 2015

Passing different parameters to ajax based on the button that has been clicked

I have the following html form:

<form class="center" id="myform">
<p>
    <input id="email" name="email" type="email" class="textox email" title="" placeholder="your@email.com" required>
</p>
    <textarea name="slogan" id="textarea" maxlength="140" style="resize:none" class="textoxarea" title="Please enter at least 5 characters" placeholder="Placeholder" ></textarea>
<div class="terms">
        <input type="checkbox" class="required" value="None" id="terms" name="terms">I accept terms</input>
    </div>
</p>
<input type="submit" id="sendfeedback" value="now" disabled/>
    <input id="datetimepicker" type="text" readonly="readonly">
        <input type="submit" id="postmelater" value="send" disabled/>
</form>

And as you can see above, I have a form with two buttons. The logic behind it works like that, that when I want to put text to database with current timestamp - I choose button sendfeedback. However, there's also a possibility of adding the feedback with chosen timestamp, that is happening when user choses the date from datetimepicker and hits postmelater. Now, the ajax code for that looks like this:

$(document).ready(function () {

$('#myform').validate({// initialize the plugin
    errorElement: 'div',
    rules: {
        email: {
            required: true,
            email: true
        },
        slogan: {
            required: true,
            minlength: 2
        },
        terms: {
            required: true,
            maxlength: 2
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        var mail = $("#email").val(); //mg
        var text = $("#textarea").val();
        var date = 0;
        var stand = 1;
        $.ajax({
            url: 'savedatanow.php'
            type: "POST",
            data: {
                mail: mail,
                text: text,
                date: date,
                stand: stand

            },
            success: function(response)
            {

                alert(response);
            }
        });

    }
});
$('#myform').find('input, textarea').on('change', function () {
    var btn = $('#myform').find('input[type=submit]');
    if ($('#myform').valid()) {
        btn.removeAttr('disabled');
    } else {
        btn.attr('disabled', 'disabled');
    }
});
});

There's a validation process attached to the fields and so far - only support for the first button. How can I add a support for 2nd button, and in case when user clicks it - also pass the datetime attribute to ajax? Can I distinguish them somehow in Ajax? Thanks!

Aucun commentaire:

Enregistrer un commentaire