Submit form content to a php via post using Javascript

[lottiemasi1]

Good day Gurus,

I am using an admin to create UX for my site. I am using one of template to create form wizard and it uses javascript and css to create the submit button. I am not very good in those to but comfortable in PHP and HTML.

I want to capture the form content into the PHP code but it is submitted to javascript code. what to do.

here is the javascript

// Validate steps wizard

// Show form
var form = $(".steps-validation").show();

$(".steps-validation").steps({
    headerTag: "h6",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    titleTemplate: '<span class="step">#index#</span> #title#',
    labels: {
        finish: 'Submit'
    },
    onStepChanging: function (event, currentIndex, newIndex) {
        // Allways allow previous action even if the current form is not valid!
        if (currentIndex > newIndex) {
            return true;
        }
        // Forbid next action on "Warning" step if the user is too young
        if (newIndex === 3 && Number($("#age-2").val()) < 18) {
            return false;
        }
        // Needed in some cases if the user went back (clean up)
        if (currentIndex < newIndex) {
            // To remove error styles
            form.find(".body:eq(" + newIndex + ") label.error").remove();
            form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function (event, currentIndex) {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex) {
        alert("Submitted!!!");
    }
});

// Initialize validation
$(".steps-validation").validate({
    ignore: 'input[type=hidden]', // ignore hidden fields
    errorClass: 'danger',
    successClass: 'success',
    highlight: function (element, errorClass) {
        $(element).removeClass(errorClass);
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass(errorClass);
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    rules: {
        email: {
            email: true
        }
    }
});


// Initialize plugins
// ------------------------------

// Date & Time Range
$('.datetime').daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    locale: {
        format: 'MM/DD/YYYY h:mm A'
    }
});

The HTML is here

                                        <form action="#" class="icons-tab-steps wizard-notification">

                                            <!-- Step 1 -->
                                            <h6><i class="step-icon la la-home"></i> Step 1</h6>
                                            <fieldset>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="firstName2">First Name :</label>
                                                            <input type="text" class="form-control" id="firstName2">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="lastName2">Last Name :</label>
                                                            <input type="text" class="form-control" id="lastName2">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="emailAddress3">Email Address :</label>
                                                            <input type="email" class="form-control" id="emailAddress3">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="location2">Select City :</label>
                                                            <select class="c-select form-control" id="location2" name="location">
                                                                <option value="">Select City</option>
                                                                <option value="Amsterdam">Amsterdam</option>
                                                                <option value="Berlin">Berlin</option>
                                                                <option value="Frankfurt">Frankfurt</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="phoneNumber2">Phone Number :</label>
                                                            <input type="tel" class="form-control" id="phoneNumber2">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="date2">Date of Birth :</label>
                                                            <input type="date" class="form-control" id="date2">
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>

                                            <!-- Step 2 -->
                                            <h6><i class="step-icon la la-pencil"></i>Step 2</h6>
                                            <fieldset>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="proposalTitle2">Proposal Title :</label>
                                                            <input type="text" class="form-control" id="proposalTitle2">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="emailAddress4">Email Address :</label>
                                                            <input type="email" class="form-control" id="emailAddress4">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="videoUrl2">Video URL :</label>
                                                            <input type="url" class="form-control" id="videoUrl2">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="jobTitle2">Job Title :</label>
                                                            <input type="text" class="form-control" id="jobTitle2">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="shortDescription2">Short Description :</label>
                                                            <textarea name="shortDescription" id="shortDescription2" rows="4" class="form-control"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </form>

[Martyr2]

I am going to assume that your Javascript form has a class called steps-validation and that is how these two pieces of code are linked together. I am also going to assume that after the wizard is done, the onFinished event is what is triggered.

Right now it is just showing an alert saying Submitted!!!. Here is where you would tell your form to submit itself. Instead of the alert, have you tried using form.submit()? This is going to tell the form to submit itself based on the action value of your form. Since the form is currently pointing at # I would imagine it is going to call to itself. The PHP then you have on this page is going to see the form values as if the form was normally submitted. I hope you get what I am saying here.

1. You are validating the form and a submit button is shown.
2. You click the submit button which I figure would trigger the onFinished event.
3. onFinished would then call form.submit() telling the form to go ahead and submit itself.
4. The form submits to its current page
5. PHP will then see the form submission values in its $_GET superglobal (since you don’t specify a method of POST in your form)

You can then work on the values in PHP as if it was just an ordinary form being submitted. Hopefully this is how things are working. I had to guess a little from your code examples.

[lottiemasi1]

Thanks @Martyr2 for your response. This did work