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);
Related
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.
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.
I really cant understand why it's not working, here is my html:
<form>
<h1 class="forms_container_title">Registration form: </h1>
<div class="form_items">
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form_items">
<input type="text" name="surname" id="surname" placeholder="Enter your surname">
</div>
<div class="form_items">
<input type="email" name="emal" id="email" placeholder="Enter your email">
</div>
<div class="form_items">
<input type="password" name="pw" id="pw" placeholder="Enter password">
</div>
</form>
<div id="submit_form">
<button type="submit">Submit</button>
</div>
and this is simple javascprit, for example:
const fname = document.getElementById("name");
and I want to get its value with ".value", but it's only showing ".nodevalue" option, whyy ???
I just want to ask that how do I add current URL in an input of form, so I can save it where I want to save.
I have tried simple Javascript, succeed but amp page become invalid.
My code is as follows
<form method="GET" class="p2" action="SUBMIT URL" target="_top">
<input type="hidden" value="" name="redirect" />
<div class="block-width2">
<div class="col-md-6"><p><input name="name" placeholder="Full Name *" type="text" required /></p></div>
<div class="col-md-6">
<p data-aos="fade-left" class="aos-init aos-animate"><input name="Email" placeholder="E-mail ID *" type="email" required /></p>
</div>
</div>
<div class="block-width2">
<div class="col-md-5"><p><input name="Mobile" placeholder="Contact No.*" type="text" required /></p></div>
<div class="col-md-7"><p><input name="city" placeholder="City*" required type="text"></p></div>
</div>
<div class="block-width2">
<div class="col-md-12"><p><input name="comments" placeholder="Comments*" required type="text" /></p></div>
</div>
<input type="hidden" name="vendor" value="VMware" />
<input type="hidden" name="course" value="VMware Training" />
<input type="hidden" name="url" id="url" value="" /> //Here I want page URL.
<div class="block-width2">
<div class="col-md-12"><p><button class="button-set" type="submit">Submit Now </button></p></div>
</div>
</form>
<script>document.getElementById("url").value = location.href;</script> // working with invalid AMP
I have a main form and within it I have a second form declared with ng-form directive like this:
<form name="settingsForm">
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm">
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button>Save address</button>
</ng-form>
<button>Save</button>
</form>
When I hit submit button all inputs are validated, I wonder if I can validate only firstName for example and not the ng-form because, I want ng-form to be submitted separated on save address, not on save.
First of all you need to disable the default validation of the form as shown by Zohaib Ijaz. You can utilize the validation variable $invalid provided by AngularJS.
<form name="settingsForm" novalidate>
<div>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
<p ng-show="validateMainForm && settingsForm.firstName.$invalid"
class="help-block">You name is required.</p>
<br />
</div>
<ng-form name="addressForm">
<div>
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" />
</div>
<div>
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
<p ng-show="validateAddressForm && addressForm.zip.$invalid"
class="help-block">Zip code is required</p>
</div>
<button type="submit" ng-click="submitAddressForm()">Save address</button>
<br/>
</ng-form>
<button type="submit" ng-click="submitMainForm()">Save</button>
</form>
As you have disabled the default validation, the validation happens on click of submit button for the main form as well as the address form. On submit, a flag is set which shows the error block if the field is invalid. There is a flag validateMainForm for the settingsForm and validateAddressForm for the addressForm. When the flag is true, it shows the p element below each input field if it is invalid.
Here is the plunker that demonstrates this.
For more information, you can refer this blog- Angular Form Validation:
You can do something like this
https://jsbin.com/latepo/edit?html,js,output
<form name="settingsForm" novalidate>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm" >
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button type="submit" ng-click="submit2()">Save address</button>
</ng-form>
<button type="submit" ng-click="submit1()">Save</button>
</form>
angular.module('myapp', []).controller('MyController', MyController);
function MyController ($scope){
$scope.submit1 = function (){
alert('submit1');
};
$scope.submit2 = function (){
alert('submit2');
};
}