<script>
const scriptURL = ''
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
</script>
<div class="col-md-5">
<div class="background-form">
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Your name" name="Name" type="text" tabindex="1" required >
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="Phone_No" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<select name="Category_Interested" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
<div class="callus">
<span class="call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
<section id="fixed-form-container">
<div class="button blink">
<span>Free Enquiry</span>
</div>
<div class="body">
<form name="submit-to-google-sheet">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" name="Name">
</div>
<div class="form-group">
<label for="contact">Phone No.:</label>
<input type="tel" name="Phoneno" class="form-control" id="contact">
</div>
<div class="form-group" style="margin-top: -38px;">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="category">Category Interested In</label>
<select name="category" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div class="callus callus-phone">
<span class="call-phone-span call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
</section>
</div>
I am trying to link two forms that are created using HTML with one google sheet. If i try adding two SrciptURLs, it shows an error. I want that data of both the forms can be seen in one Google Sheet. Is that possible? If yes, then how?
These are the forms along with the script that i added to link it to the Google Sheet.
There is no error when i fill in the entries and submit in both the forms but details of only one form can be seen in the Google Sheets.
Related
Hello I can not validate my form with jquery validation. it does not giving me any errors but I can still type number and letters to the name field.
Here is the code for validation:
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters");
$('#customer-form').validate({
rules: {
name: {
lettersonly: true
}
}
});
and here is the code for the form:
<html>
<head>
<title></title>
<asset:stylesheet src="application.css"/>
<asset:javascript src="jquery-3.3.1.min.js"/>
<asset:javascript src="application.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<g:form controller="customer" action="saveCustomer" class="customer-form">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" required class="form-control name" id="name" placeholder="Enter first and last name" name="name">
</div>
<div class="form-group">
<label for="code">Code</label>
<input type="text" required class="form-control" id="code" placeholder="Enter code" name="code">
</div>
<div class="form-group">
<label for="contactP">Contact Person</label>
<input type="text" class="form-control" id="contactP" placeholder="Enter contact person" name="contactP">
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control" required id="status" name="status">
<option disabled selected>Please select a Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<g:link controller="customer" action="index" ><button type="button" class="btn btn-primary">Cancel</button></g:link>
<button type="submit" class="btn btn-default" style = "background-color: #b52222">Add</button>
</form>
</g:form>
Thank you.
You are calling validate on customer-form id.
$('#customer-form').validate({
but your form does not have any id. It has a class.
So either adds an id in the form (id="customer-form") or change jquery code to
$('.customer-form').validate({
I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"
You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">
I have select with options and I have many inputs. I need to span ready input if I select in option for example "USER" and hide it again if select another option.
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div>   </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
$( "#selectlist" ).change(function(event) {
if (this.value == 1 || this.value == 2) {
$(".form-control").show();
} else {
$(".form-control").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div>   </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
I would use a custom attribute called valueTie. When you update the select, your content will automatically update accordingly. What's nice is all you have to do is add another option and another div with the attribute valueTie and you're up and running with another option.
$("#selectlist").change(function () {
$("[valueTie]").hide()
$("[valueTie='" + $(this).val() + "']").show();
});
$("#selectlist").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading">
Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12" valueTie="1">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div class="col-xs-12" valueTie="2">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
I have a set of html5 fields inside a registration form tags in the code below.The inbuilt jquery plugin called validation.js is working fine with all the html fields which doesnt have any other jquery function defined on the html element tag's "id" attribute. In validate.js , the jquery validation rules: and messages: are customised with respect to html element's "name" attribute.My problem is jquery validations are not working on those html element tags whose id is used for defining other functions
For eg :
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option id="S" value="user1">user1</option>
<option id="T" value="user2">user2</option>
</select>
In the above code snippet you can see the usertype . when the usertype is selected there is a jquery which works onChange event with respect to the id="usertype".But my requirement is to do the validation that,the user must mandatorily select the usertype with the jquery validation plugin as well with the other jquery function .How to solve this? How can i write the validation rule for the select dropdown (required).
<div class="form-group">
<input type="email" class="form-control input-lg" name="uname" placeholder="email address" id="uname" onBlur="checkAvailability()">
<span id="user-availability-status"></span>
<p><img src="loading-small.gif" id="loaderIcon" style="display:none" /></p>
<div id ="errors">
</div>
</div>
<div class="form-group">
<input class="form-control input-lg" name="password" id="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control input-lg" name="password2" placeholder="Re-enter password" type="password">
</div>
<!--<div class="form-group">
<input type="password" class="form-control input-lg" name="cfmPassword" placeholder="Retype above password" id="cfmPassword">
<span id="confirm-password-status"></span>
</div>-->
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
</select>
<div id ="errors">
</div>
</div>
<p> </p>
<!--Student Section Form BEGIN-->
<div id="user1">
<div class="form-group" >
<input type="text" align="center" class="form-control input-lg" name="user1_first_name" placeholder="First Name" id="firstname">
</div>
<div class="form-group">
<input type="text" align="center" class="form-control input-lg" name="user1_last_name" placeholder="Last Name" id="lastname">
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="female"/> Female
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
I've two tabs in my homepage, one for personal registration and another to companies. The validation works fine in the first, but in the second tab, the validation don't work and returns nothing.
First of all, the HTML:
<!-- Fire nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Pessoa Fisica</li>
<li>Pessoa Juridica</li>
</ul>
<!-- Nav tabs -->
<div class="tab-content">
<div class="tab-pane fade in active" id="pf">
<form id="pfRegister" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" id="firstName" class="form-control inputSk" placeholder="Name" name="firstName" required>
</div>
<div class="form-group">
<input type="text" id="lastName" class="form-control inputSk" placeholder="Surname" name="lastName" required>
</div>
<div class="form-group">
<input type="text" id="email" class="form-control inputSk" placeholder="Email" name="email" required>
</div>
<div class="form-group">
<input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" required>
</div>
<div class="form-group">
<input type="password" id="confirm_password" class="form-control inputSk" placeholder="Confirm your password" name="confirm_password" required>
</div>
<div class="form-group">
<select id="gender" name="gender" class="form-control inputSk" required>
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control inputSk input" name="birth" id="birth" required>
</div>
</div>
</div>
<div class="actionForm">
<button type="submit" id="send" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
<!-- company register -->
<div class="tab-pane fade" id="pj">
<form id="pjRegister" class="captcha" action="" method="post" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control inputSk" name="cnpj" id="cnpj" placeholder="CNPJ" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="juridicIdentity" id="razaosocial" placeholder="Razao Social" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="companyIdentity" id="company" placeholder="Company Name" required>
</div>
<div class="form-group">
<input type="text" class="form-control inputSk" name="administrator" id="administrator" placeholder="Administrator Account" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pjEmail" name="pjEmail" placeholder="Email" required>
</div>
<div class="form-group">
<input type="email" class="form-control inputSk" id="pj_confirm_email" name="pj_confirm_email" placeholder="Confirm Email" required>
</div>
<div class="form-group">
<input type="password" id="pjPassword" class="form-control inputSk pwstrength_viewport_progress" placeholder="Password" required>
</div>
<div class="form-group">
<input type="password" id="pjConfirm_password" class="form-control inputSk" placeholder="Confirm Password" required>
</div>
<div class="actionForm">
<button type="button" id="pjSend" class="btn btn-default sk skBtn-primary submit">Sign up</button>
</div>
</form>
</div>
</div> <!-- end of pj panel -->
The JS:
$("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
$("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
The defaults and showErrors is set inside $.validator.setDefaults.
I tried to validate one by one with this, but still not working:
var pfreg = $("#pfRegister").validate({
rules: {rules},
messages: {msgs}
});
//companies validator
var pjreg = $("#pjRegister").validate({
rules: {rules},
messages: {msgs}
});
pjreg.element('input');
pfreg.element('input');
Searching the web, I found a possible solution:
$("#pjRegister").each(function(){
$(this).validate();
});
But this way the form don't validate when I click the Submit button.
Your first button is a type="submit", which is captured automatically by the validation plugin, so validation is triggered.
Your second button is a type="button", which is not captured, so the plugin does nothing when you click it.
Working DEMO: http://jsfiddle.net/9o0zd4pt/1/