We Keep Coding

How Can I Display Success message On Divi Contact Form Module

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.

Detecting display: inline-block with Javascript vanilla

I have a multilanguage registration page. All the of it is on one HTML document, and each language is in its own div, with display:none; or display:visible depending on the language selected.
All of the forms are identical, ie. <input type="email" class="email"> is the same on all forms (with different placeholders etc.).
I would like to know how I could use a conditional statement to see which div is visible, so I could take out the appropriate class information via index.
For example, the user filled out the English registration page, I know I need to use getElementsByClassName(".email")[1].value. (index 1).
Or is there a way to detect which element in the array has actual content/value (as the specific class array will be empty, except for 1 entry).
HTML
<div class="lng" id="sl">
<div class="registerTitle">
Slo - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="Janez"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Novak"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />
<span class="radioS">Spol: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Moski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Zenski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Ostalo</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="moj#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>
<div class="lng" id="en">
<div class="registerTitle">
Eng - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="John"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'John'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Doe"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Doe'" /><br />
<span class="radioS">Gender: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Male</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Female</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Other</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="my#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'my#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>

Have a look at - how can I disable everything inside a form using javascript/jquery?
Disabling other form inputs might be an option, so when you go to submit, the form that isn't disabled submits.

Here's a way to detect if an array of inputs has a value and then log to the console. I know it's general, but I'm having a hard time understanding exactly what you need in your case:
const emailInputs = Array.from(document.querySelectorAll('.email'));
const form = document.querySelector('form');
form.addEventListener('change', () => {
const hasValue = emailInputs.filter((input) => input.value);
console.log('these inputs are active...\n');
hasValue.forEach(val => console.log(val));
});
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="en">English </label>
<input type="email" name="en" id="email" class="email">
</div>
<div class="form-example">
<label for="fr">French </label>
<input type="email" name="fr" id="email2" class="email">
</div>
<div class="form-example">
<label for="es">Spanish </label>
<input type="email" name="es" id="email3" class="email">
</div>
<div class="form-example">
<label for="it">Italian </label>
<input type="email" name="it" id="email4" class="email">
</div>
</form>
Here's a JSFiddle if you want to play with it outside of this setting.

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();
);

Jquery validate multiple inputs with email

I have a form where i ask the user to input email addresses for an automated email to be sent. I have set both the email inputs to be required and to check for valid email, but it seems to work only for the first one. What am I doing wrong here?
<form class="validate" method="post" id="formLoc">
<div data-role="fieldcontain">
<label for="email-from">from</label>
<input type="text" class="required email" id="email-from" placeholder="from" />
</div>
<div data-role="fieldcontain">
<label for="email-to">to</label>
<input type="text" id="email-to" class="required email" placeholder="to" />
</div>
<div data-role="fieldcontain">
<label for="email-message">message</label>
<textarea id="email-message" cols="100" rows="40"></textarea>
</div>
<div class="email-sent">
<h4></h4>
</div>
<div class="SendEmailButton">
<button type="submit" data-role="button" data-icon="forward" data-inline="true"
data-mini="true" data-theme="c">send</button>
</div>
</form>
Here's a fiddle with the problem : http://jsfiddle.net/bobby5193/8dHg9/544/

Add the name attribute to both input fields.
<input type="text" name="email-from" class="required email" id="email-from" placeholder="from" />
<input type="text" name="email-to" id="email-to" class="required email" placeholder="to" />
<textarea name="email-message" id="email-message" cols="100" rows="40" class="required"></textarea>
Here is a jsFiddle
Update
Here is an updated jsFiddle which has validation on the textarea. I added the name attribute and class="required" to it.

If you want get more than one text box to insert Email like
<ul>
<li>
<input id="emailcheck" type="text" placeholder="Email" name="ToEmails[0]" required />
<input id="emailcheck" type="text" placeholder="Email" name="ToEmails[1]" required />
<input id="emailcheck" type="text" placeholder="Email" name="ToEmails[2]" required />
</li>
</ul>
Now we will get all email address from text box.
var email = $('input[name^=ToEmails]');
console.log(email);