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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Sham_HC

Total Posts

2.1K

Likes

160

Correct Reply

1.2K

Avatar

Sham_HC

Total Posts

2.1K

Likes

160

Correct Reply

1.2K
Sham_HC

15-10-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

Answers (1)

Answers (1)

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