CQ components and Posting data via javascript

[Former Community Member]

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

[Sham_HC · Accepted solution]

It is not calling your custom javascript instead posting into page where you have form rendered. In essense not going to external url.   Either change form post url OR call you javascript from form.  Also u might face cors issue. 

http://scottsdigitalcommunity.blogspot.com/2013/06/posting-form-data-to-adobe-cq-using.html

[Former Community Member]

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