CQ components and Posting data via javascript

Avatar

Avatar

Tboness

Avatar

Tboness

Tboness

15-10-2015

Good afternoon.

Trying to code a custom component form.
Takes user information, and posts it (jQuery.Post) to an external URL.

Subscription form:

<%@include file="/libs/foundation/global.jsp"%> <script> (function($) { // Form Submit jQuery('form[name=subscribeForm]').validate({ debug: false, errorPlacement: function (error, element) { return; }, submitHandler: function(form){ jQuery.post('http://externalURL.com/formmail.php', { firstname: jQuery('input[name=firstname]', form).val(), lastname: jQuery('input[name=lastname]', form).val(), email: jQuery('input[name=email]', form).val(), mobile_number: jQuery('input[name=mobileNumber]', form).val(), }, function (response) { jQuery('.section__wrapper__title').hide(); loader.container.hide(); if(response.success == true) { jQuery.get('NewsletterThankYou.html', function(html){ loader.container.html(html); }); } else { jQuery.get('ErrorMessage.html', function(html){ loader.container.html(html); }); } }, 'json'); } }); })(); // Form Submit </script> <form name="subscribeForm" method="POST" class="form__parent validate-form"> <div class="form__entry"> <label class="form__label"> <span>Name:</span> <input type="text" name="firstname" id="firstname" placeholder="Name*" class="form__input" tabindex="1" required autofocus> </label> </div> <div class="form__entry"> <label class="form__label"> <span>Surname:</span> <input type="text" name="lastname" id="lastname" placeholder="Surname*" class="form__input" tabindex="2" required> </label> </div> <div class="form__entry"> <label class="form__label"> <span>Email Address:</span> <input type="text" name="email" id="email" placeholder="Email Address*" class="form__input" tabindex="4" required> </label> </div> <div class="form__entry"> <label class="form__label"> <span>Your Phone Number:</span> <input type="text" name="mobileNumber" id="mobileNumber" class="form__input" pattern="\d*" placeholder="Mobile Number*" tabindex="5" required> </label> </div> <div class="form__entry"> <input type="submit" value="submit >" id="submit" class="form__input form__submit"> </div> </form>


Each time I submit the form, the following error is returned:

         
Status
500
Message
javax.jcr.nodetype.ConstraintViolationException: no matching property definition found for {}firstname
View Entire Topic

Avatar

Avatar

Tboness

Avatar

Tboness

Tboness

15-10-2015

This is probably the 3rd version of the form I tried.
Had my JS code inside a clientlibs folder.
Then tried embedding the script inside the page.

Even if I hook up my submit button to a javascript function:
<input type="submit" value="submit >" id="submit" class="form__input form__submit" onclick="javascript:submitForm();">
 

<script>
function submitForm() {
    alert("Submit Form");
}
</script>

 

"Submit form" alert pops up, but then Im still presented with the error:
javax.jcr.nodetype.ConstraintViolationException: no matching property definition found for {}firstname
Removing the form tag resolved the issue.

Thanks for the link.
Will work off the example.

Kind regards
Toby