How Can I Display Success message On Divi Contact Form Module - javascript

Hello I have a divi contact form module. website is not wordpress. I want to display a success message after user submits form. How can I go about it. Tried many ways.
The form appears below.
<div class="et_pb_module et_pb_contact_form_0 dct-contact-forn et_pb_contact_form_container clearfix"
data-form_unique_num="0"
id="et_pb_contact_form_0">
<div class="et-pb-contact-message"><p>Thanks</p></div>
<div class="et_pb_contact">
<form action="contact.php" class="et_pb_contact_form clearfix"
method="post">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last"
data-id="name_2" data-type="input">
<label class="et_pb_contact_form_label"
for="name">Name</label>
<input class="input" data-field_type="input" data-required_mark="required" id="name"
name="name" placeholder="Name"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_half"
data-id="email" data-type="email">
<label class="et_pb_contact_form_label" for="email">Email
Address</label>
<input class="input" data-field_type="email" data-required_mark="required" id="email"
name="email" placeholder="Email Address"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_2 et_pb_contact_field_half et_pb_contact_field_last"
data-id="subject" data-type="input">
<label class="et_pb_contact_form_label" for="subject">Subject</label>
<input class="input" data-field_type="input" data-required_mark="required" id="subject"
name="subject" placeholder="Subject"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_last"
data-id="message" data-type="text">
<label class="et_pb_contact_form_label"
for="et_pb_contact_message_0">Message</label>
<textarea class="et_pb_contact_message input" data-field_type="text"
data-required_mark="required"
id="message"
name="message"
placeholder="Message"></textarea>
</p>
<input name="et_pb_contactform_submit_0" type="hidden"
value="et_contact_proccess">
<div class="et_contact_bottom_container">
<button class="et_pb_contact_submit et_pb_button" name="submit"
type="submit">Submit
</button>
</div>
<input id="_wpnonce-et-pb-contact-form-submitted-0"
name="_wpnonce-et-pb-contact-form-submitted-0"
type="hidden"
value="7dbdd1dfcb"><input name="_wp_http_referer"
type="hidden"
value="/?page_id=1750">
</form>
That is what it looks like. I really need assistance. Anyone here that could help, would appreciate your time and efforts. thanks in advance.

Related

How to prevent google app script reloading/redirecting my webpage after form data submission ..?

I am using google app script to submit form data to my email. It's a webpage contact form. But by default after hitting the submit button it takes to a different page and shows a "result:success" weird kinda message. I want to prevent that reload or redirect. How can I do that?
HTML
<form id="email-form" class="gform" action="https://script.google.com/macros/s/AKfyJu890G2t-RuhJxTNIA/exec" method="post">
<div class="email-name">
<input id="name" name="name" type="text" class="form-control" placeholder="write name" autocomplete="off">
</div>
<div class="email-main">
<input id="email" name="email" type="text" class="form-control" placeholder="write email" autocomplete="off">
</div>
<div class="email-subject">
<input id="subject" name="subject" type="text" class="form-control" placeholder="write related sub" autocomplete="off">
</div>
<div class="email-message">
<textarea id="message" name="message" class="form-control" placeholder="write message here"></textarea>
</div>
<button id="send-email" type="submit">SUBMIT EMAIL</button>
</form>
I can add an alert using onclick event but still the reload happens. Please provide javascript code for preventing the default behavior for this form.
I've been able to get around this before by moving the submit button out of the form.
<form id="email-form" class="gform" action="https://script.google.com/macros/s/AKfyJu890G2t-RuhJxTNIA/exec" method="post">
<div class="email-name">
<input id="name" name="name" type="text" class="form-control" placeholder="write name" autocomplete="off">
</div>
<div class="email-main">
<input id="email" name="email" type="text" class="form-control" placeholder="write email" autocomplete="off">
</div>
<div class="email-subject">
<input id="subject" name="subject" type="text" class="form-control" placeholder="write related sub" autocomplete="off">
</div>
<div class="email-message">
<textarea id="message" name="message" class="form-control" placeholder="write message here"></textarea>
</div>
</form>
<button id="send-email" type="submit">SUBMIT EMAIL</button>
If that does not work you can try using target to a hidden iframe.

How can I show console.log over Aws Cloudwatch + Elastic Beanstalk

I have a simple form created and that having one function to console.log all the field values. How can I get these logs to appear on AWS Cloudwath ?
My form -
<form role="form" id="form" name="form" method="POST">
<div class="form-group">
<label for="name">Enter Name</label>
<input ng-model="data.name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="age">Age</label>
<input ng-model="data.age" type="text" maxlength="3" class="form-control" id="age" placeholder="Enter Age">
</div>
<div class="form-group">
<label for="address">Address</label>
<input ng-model="data.address" type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
<button type="submit" class="btn btn-primary" ng-click="reqCalling()">Submit</button>
</form>
Please Help I have no idea what to do

How to close a boostrap collapse whenever a user scroll down or coutside the collapse

This is what I'm currently using to trigger it
GET FREE QUOTE
then this is the html code
<div id="demo" class="collapse">
<br><br><br><br><br><br><br><br>
<div class="wrap-type-input">
<form id="get_free_quote" class="contact-form" method="post" action="contact/contact-process.php">
<div class="input-wrap name">
<input type="text" value="" tabindex="1" placeholder="Name (*)" name="name" id="name" required="">
</div>
<div class="input-wrap name">
<input type="text" min="0" value="" accept="*/phone" tabindex="1" placeholder="Phone (*)" name="phone" id="name" required="">
</div>
<div class="input-wrap email">
<input type="email" value="" tabindex="2" placeholder="Email (*)" name="email" id="email" required="">
</div>
<div class="textarea-wrap">
<textarea class="type-input" tabindex="3" placeholder="Items you Need" name="message" id="message-contact" required=""></textarea>
</div>
<div class="subscribe">
<button type="submit" id="submit" class="button" name="submit">Send Message</button>
</div>
</form>
</div>
</div>
I will really be grateful for an answer

Bootstrap-validator not displaying errors

I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);

ajax form submision not working at rating

Here the code for review rating. When I submit the form, the data will not be submitted to database. Any help is welcome.
<form id="commentform" method="POST" action="#" class="form form-inline form-contact">
<p class="push-down-20">
<input type="text" tabindex="3" size="30" value="" id="url" name="txtTitle">
<label for="email">REVIEW TITLE<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="text" aria-required="true" tabindex="1" size="30" value="" id="author" name="txtName" required>
<label for="author">NAME<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="email" aria-required="true" tabindex="2" size="30" value="" id="email" name="txtEmail" required>
<label for="email">MAIL<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="text" tabindex="3" size="30" value="" id="url" name="txtContact">
<label for="email">CONTACT<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<textarea class="input-block-level" tabindex="4" rows="7" cols="70" id="comment" name="txtComment" placeholder="Your Review ..." required></textarea>
</p>
<p class="push-down-20">
<!--<div class="tuto-cnt">-->
<div class="rate-ex2-cnt">
<div id="1" class="rate-btn-1 rate-btn"></div>
<div id="2" class="rate-btn-2 rate-btn"></div>
<div id="3" class="rate-btn-3 rate-btn"></div>
<div id="4" class="rate-btn-4 rate-btn"></div>
<div id="5" class="rate-btn-5 rate-btn"></div>
</div>
<!--</div>-->
</p>
<p>
<input class="btn btn-primary bold" type="submit" tabindex="5" id="rate-btn" name="rate-btn">Submit</button>
</p>
</form>
You should check if the form submitted successsfully first.In the other words, if there's something wrong in the submit button or form definition, background codes will know nothing about what you do! The second step, you said 'the data will not be submitted to database', if the backgound codes already received the data successfully but can't save to database only, I suggest you paste more codes about the saving process, then we can know more about where's the error!

Categories