CQ components and Posting data via javascript | Community
Skip to main content
October 16, 2015
Solved

CQ components and Posting data via javascript

  • October 16, 2015
  • 2 replies
  • 731 views

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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sham_HC

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

2 replies

Sham_HC
Sham_HCAccepted solution
Level 10
October 16, 2015

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

October 16, 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