Form doesn't close on submit button using ng-Show, ng-disabled

I am trying to create a form to add new users. The submit button remains disabled until I fill up all the textboxes. But once I fill up all the textboxes correctly, it gets enabled.

Here is the problem. After I click the submit button, the user gets added into the table, but the form doesn't close. The textboxes clears and all of them displays the error messages.

I have also added the style- input.ng-invalid.ng-dirty{border:1px solid red;} before the head tag.

<form name="addForm"class="form-horizontal" action="/action_page.php">



                            <div class="form-group">

                                <label class="control-label col-sm-2">Email</label>

                                <div class="col-sm-10">

                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">First Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>

                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Last Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>

                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Contact</label>

                                <div class="col-sm-10">

                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>

                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Role</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>

                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>

                                </div>

                            </div>                        



                            <div class="form-group">

                                <div class="col-sm-offset-2 col-sm-10">

                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>

                                </div>

                            </div>

                        </form>

			<div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>

edited Nov 15 '18 at 15:03

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

add a comment |

I am trying to create a form to add new users. The submit button remains disabled until I fill up all the textboxes. But once I fill up all the textboxes correctly, it gets enabled.

Here is the problem. After I click the submit button, the user gets added into the table, but the form doesn't close. The textboxes clears and all of them displays the error messages.

I have also added the style- input.ng-invalid.ng-dirty{border:1px solid red;} before the head tag.

<form name="addForm"class="form-horizontal" action="/action_page.php">



                            <div class="form-group">

                                <label class="control-label col-sm-2">Email</label>

                                <div class="col-sm-10">

                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">First Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>

                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Last Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>

                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Contact</label>

                                <div class="col-sm-10">

                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>

                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Role</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>

                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>

                                </div>

                            </div>                        



                            <div class="form-group">

                                <div class="col-sm-offset-2 col-sm-10">

                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>

                                </div>

                            </div>

                        </form>

			<div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>

edited Nov 15 '18 at 15:03

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

add a comment |

I am trying to create a form to add new users. The submit button remains disabled until I fill up all the textboxes. But once I fill up all the textboxes correctly, it gets enabled.

Here is the problem. After I click the submit button, the user gets added into the table, but the form doesn't close. The textboxes clears and all of them displays the error messages.

I have also added the style- input.ng-invalid.ng-dirty{border:1px solid red;} before the head tag.

<form name="addForm"class="form-horizontal" action="/action_page.php">



                            <div class="form-group">

                                <label class="control-label col-sm-2">Email</label>

                                <div class="col-sm-10">

                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">First Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>

                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Last Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>

                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Contact</label>

                                <div class="col-sm-10">

                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>

                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Role</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>

                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>

                                </div>

                            </div>                        



                            <div class="form-group">

                                <div class="col-sm-offset-2 col-sm-10">

                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>

                                </div>

                            </div>

                        </form>

			<div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>

edited Nov 15 '18 at 15:03

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

I am trying to create a form to add new users. The submit button remains disabled until I fill up all the textboxes. But once I fill up all the textboxes correctly, it gets enabled.

Here is the problem. After I click the submit button, the user gets added into the table, but the form doesn't close. The textboxes clears and all of them displays the error messages.

I have also added the style- input.ng-invalid.ng-dirty{border:1px solid red;} before the head tag.

<form name="addForm"class="form-horizontal" action="/action_page.php">



                            <div class="form-group">

                                <label class="control-label col-sm-2">Email</label>

                                <div class="col-sm-10">

                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">First Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>

                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Last Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>

                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Contact</label>

                                <div class="col-sm-10">

                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>

                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Role</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>

                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>

                                </div>

                            </div>                        



                            <div class="form-group">

                                <div class="col-sm-offset-2 col-sm-10">

                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>

                                </div>

                            </div>

                        </form>

			<div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>

<form name="addForm"class="form-horizontal" action="/action_page.php">



                            <div class="form-group">

                                <label class="control-label col-sm-2">Email</label>

                                <div class="col-sm-10">

                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">First Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>

                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Last Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>

                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Contact</label>

                                <div class="col-sm-10">

                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>

                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Role</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>

                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>

                                </div>

                            </div>                        



                            <div class="form-group">

                                <div class="col-sm-offset-2 col-sm-10">

                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>

                                </div>

                            </div>

                        </form>

			<div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>

<form name="addForm"class="form-horizontal" action="/action_page.php">



                            <div class="form-group">

                                <label class="control-label col-sm-2">Email</label>

                                <div class="col-sm-10">

                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>

                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">First Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>

                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Last Name</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>

                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Contact</label>

                                <div class="col-sm-10">

                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>

                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>

                                </div>

                            </div>



                            <div class="form-group">

                                <label class="control-label col-sm-2">Role</label>

                                <div class="col-sm-10">

                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>

                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>

                                </div>

                            </div>                        



                            <div class="form-group">

                                <div class="col-sm-offset-2 col-sm-10">

                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>

                                </div>

                            </div>

                        </form>

			<div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>

html angularjs

edited Nov 15 '18 at 15:03

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

edited Nov 15 '18 at 15:03

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

edited Nov 15 '18 at 15:03

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

asked Nov 15 '18 at 13:56

Vaibhav Shankar

187

add a comment |

1 Answer
1

active

oldest

votes

Here's how I would do it :

Put my form in a div

<div class="contact-form">

    <form method="post" action="sendemail.php" id="contact-form">

        <!-- FORM CONTENT HERE -->

    </form>

</div>

Then, add this to your script file (note that the code $('#contact-form').hide() will hide your form after the post) :

//Contact Form Validation

$('#contact-form').on('submit', function(event) {

    event.preventDefault();

    var $inputs = $('#contact-form :input');



    // not sure if you wanted this, but I thought I'd add it.

    // get an associative array of just the values.

    var data = {};

    $inputs.each(function() {

        data[this.name] = $(this).val();

    });



    $.ajax({

        url: '/send-mail',

        data: data,

        method: 'post'

    })

    .then(function success(res) {

         console.log('Success!');

         var s1 = document.getElementById('contact-title');

         s1.innerHTML = 'Form sent with success.';

         $('#contact-form').hide()

    })

    .catch(function error(err) {

         console.error(err);

         var s2 = document.getElementById('contact-title');

         s2.innerHTML = 'Errors sending your form...';

         $('#contact-form').hide()

    })

});

Hope you can find your answer here.

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

@Vaibhav Shankar, glad I could help!

– Jean-Philippe Bergeron
Nov 15 '18 at 19:47

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321063%2fform-doesnt-close-on-submit-button-using-ng-show-ng-disabled%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Here's how I would do it :

Put my form in a div

<div class="contact-form">

    <form method="post" action="sendemail.php" id="contact-form">

        <!-- FORM CONTENT HERE -->

    </form>

</div>

Then, add this to your script file (note that the code $('#contact-form').hide() will hide your form after the post) :

//Contact Form Validation

$('#contact-form').on('submit', function(event) {

    event.preventDefault();

    var $inputs = $('#contact-form :input');



    // not sure if you wanted this, but I thought I'd add it.

    // get an associative array of just the values.

    var data = {};

    $inputs.each(function() {

        data[this.name] = $(this).val();

    });



    $.ajax({

        url: '/send-mail',

        data: data,

        method: 'post'

    })

    .then(function success(res) {

         console.log('Success!');

         var s1 = document.getElementById('contact-title');

         s1.innerHTML = 'Form sent with success.';

         $('#contact-form').hide()

    })

    .catch(function error(err) {

         console.error(err);

         var s2 = document.getElementById('contact-title');

         s2.innerHTML = 'Errors sending your form...';

         $('#contact-form').hide()

    })

});

Hope you can find your answer here.

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

@Vaibhav Shankar, glad I could help!

– Jean-Philippe Bergeron
Nov 15 '18 at 19:47

add a comment |

Here's how I would do it :

Put my form in a div

<div class="contact-form">

    <form method="post" action="sendemail.php" id="contact-form">

        <!-- FORM CONTENT HERE -->

    </form>

</div>

Then, add this to your script file (note that the code $('#contact-form').hide() will hide your form after the post) :

//Contact Form Validation

$('#contact-form').on('submit', function(event) {

    event.preventDefault();

    var $inputs = $('#contact-form :input');



    // not sure if you wanted this, but I thought I'd add it.

    // get an associative array of just the values.

    var data = {};

    $inputs.each(function() {

        data[this.name] = $(this).val();

    });



    $.ajax({

        url: '/send-mail',

        data: data,

        method: 'post'

    })

    .then(function success(res) {

         console.log('Success!');

         var s1 = document.getElementById('contact-title');

         s1.innerHTML = 'Form sent with success.';

         $('#contact-form').hide()

    })

    .catch(function error(err) {

         console.error(err);

         var s2 = document.getElementById('contact-title');

         s2.innerHTML = 'Errors sending your form...';

         $('#contact-form').hide()

    })

});

Hope you can find your answer here.

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

@Vaibhav Shankar, glad I could help!

– Jean-Philippe Bergeron
Nov 15 '18 at 19:47

add a comment |

Here's how I would do it :

Put my form in a div

<div class="contact-form">

    <form method="post" action="sendemail.php" id="contact-form">

        <!-- FORM CONTENT HERE -->

    </form>

</div>

Then, add this to your script file (note that the code $('#contact-form').hide() will hide your form after the post) :

//Contact Form Validation

$('#contact-form').on('submit', function(event) {

    event.preventDefault();

    var $inputs = $('#contact-form :input');



    // not sure if you wanted this, but I thought I'd add it.

    // get an associative array of just the values.

    var data = {};

    $inputs.each(function() {

        data[this.name] = $(this).val();

    });



    $.ajax({

        url: '/send-mail',

        data: data,

        method: 'post'

    })

    .then(function success(res) {

         console.log('Success!');

         var s1 = document.getElementById('contact-title');

         s1.innerHTML = 'Form sent with success.';

         $('#contact-form').hide()

    })

    .catch(function error(err) {

         console.error(err);

         var s2 = document.getElementById('contact-title');

         s2.innerHTML = 'Errors sending your form...';

         $('#contact-form').hide()

    })

});

Hope you can find your answer here.

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

Here's how I would do it :

Put my form in a div

<div class="contact-form">

    <form method="post" action="sendemail.php" id="contact-form">

        <!-- FORM CONTENT HERE -->

    </form>

</div>

Then, add this to your script file (note that the code $('#contact-form').hide() will hide your form after the post) :

//Contact Form Validation

$('#contact-form').on('submit', function(event) {

    event.preventDefault();

    var $inputs = $('#contact-form :input');



    // not sure if you wanted this, but I thought I'd add it.

    // get an associative array of just the values.

    var data = {};

    $inputs.each(function() {

        data[this.name] = $(this).val();

    });



    $.ajax({

        url: '/send-mail',

        data: data,

        method: 'post'

    })

    .then(function success(res) {

         console.log('Success!');

         var s1 = document.getElementById('contact-title');

         s1.innerHTML = 'Form sent with success.';

         $('#contact-form').hide()

    })

    .catch(function error(err) {

         console.error(err);

         var s2 = document.getElementById('contact-title');

         s2.innerHTML = 'Errors sending your form...';

         $('#contact-form').hide()

    })

});

Hope you can find your answer here.

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

answered Nov 15 '18 at 15:30

Jean-Philippe Bergeron

72111

@Vaibhav Shankar, glad I could help!

– Jean-Philippe Bergeron
Nov 15 '18 at 19:47

add a comment |

@Vaibhav Shankar, glad I could help!

– Jean-Philippe Bergeron
Nov 15 '18 at 19:47

@Vaibhav Shankar, glad I could help!

– Jean-Philippe Bergeron
Nov 15 '18 at 19:47

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky