I am brand new to jQuery, I'm proficient in HTML, CSS, and JavaScript. I've set up a little test form and I just need help getting the ball rolling. I'm trying to add the class of 'form-control' to all my inputs on the page and I can't seem to figure it out.
$(document).ready(function() {
$('input').addClass('form-control');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="row">
<div class="col-md-3 form-floating">
<input type="text" placeholder="First Name" id="firstName">
<label for="firstName">First Name</label>
</div>
<div class="col-md-3 form-floating">
<input type="text" placeholder="Last Name" id="lastName">
<label for="lastName">Last Name</label>
</div>
<div class="col-md-3 form-floating">
<input type="text" placeholder="Phone" id="phone">
<label for="phone">Phone</label>
</div>
<div class="col-md-3 form-floating">
<input type="email" id="email" placeholder="Email">
<label for="email">Email</label>
</div>
</div>
</form>
Add this script to the head on document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
and it should work, and check chrome devtools if you have other errors.
Related
I have included the recaptcha v3 to my simple html form, the form submit good, but in the server side i find an empty array coming to inbox.
Here a copy/paste of my form code:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("mywebsite_form").submit();
}
</script>
<form id="website_form" class="website-form" action="https://webto.mywebsite.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D58000000H4Yu">
<input type=hidden name="retURL" value="http://www.mywebsite.com">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">First Name</label>
<input class="form-control" id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
</div>
<div class="form-group col-md-6">
<label for="last_name">Last Name</label>
<input class="form-control" id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="email">Email</label>
<input class="form-control" id="email" maxlength="80" name="email" size="20" type="text"/>
</div>
</div>
<div class="form-group col-md-12">
<label for="subject">Subject</label>
<input class="form-control" id="subject" maxlength="80" name="subject" size="20" type="text"/>
</div>
<div class="form-group col-md-12">
<label for="description">Description</label>
<textarea class="form-control" name="description"></textarea>
</div>
<button class="g-recaptcha"
data-sitekey="mywebsite_key"
data-callback='onSubmit'
data-action='submit'>Submit</button>
</form>
What additional lines should i add to make the form fields arrive to the other side "server"?
you should include the "reCAPTCHA_site_key" parameter in the url of the google script
<script src="https://www.google.com/recaptcha/api.jsrender=reCAPTCHA_site_key"></script>
I figure out the problem, the form was rendered twice in the same page wich make the not unique in the page,so the form was sended empty. To resolve that i have to render the form html code only 1 time, the problem is now solved.
Thanks a lot everyone!
This will most likely need to involve javascript, which I know almost nothing about so please bear with me.
I would like to have a regular form, say styled with bootstrap. But I don't want to display the all the fields at once when the page is loaded. Instead I would like to display the first field and continue to display the following fields as the previous fields are focused or have content in them.
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
In this example only "Name" would show up, when the page loads, then when it is focused then the "Email" field would show up.
Any ideas would be great, thanks!
Just hide all elements in the form except for the first one, listen for changes on the form and display the next element relating to the last changed element (the event.target).
Example (which is definitley improvable):
$(".form-group:not(:first-child)").hide();
$("form").on("change keypress paste", function (event) {
$(event.target).parent().next().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
You could use JQuery to remove a hidden class on input focus.
Run the code snippet or check out the CodePen Demo:
$(document).ready(function() {
$("input").focus(function() {
$(this).parent(".form-group").next().removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group hidden">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group hidden">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group hidden">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am facing a problem in form validation using Angular.js.
This is my HTML code:
<form class="form-horizontal" name="regForm" novalidate>
<div class="form-group" ng-class="{'has-error':regForm.name.$touched && regForm.name.$invalid}">
<label class="control-label col-sm-2">Username:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="name" ng-model="name" placeholder="Enter Username" ng-minlength="5" ng-maxlength="10" required>
</div>
<div class="help-block" ng-messages="regForm.name.$error" ng-if="regForm.name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Password:</label>
<div class="col-sm-10">
<input class="form-control" type="password" name="pwd" ng-model="pwd" placeholder="Enter Password" ng-pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" maxlength="12" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Repeat Password:</label>
<div class="col-sm-10">
<input class="form-control col-sm-6" type="password" name="num" ng-model="repeat password" placeholder="Repeat password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email Address:</label>
<div class="col-xs-10">
<input class="form-control col-sm-6" type="email" name="num" ng-model="email" placeholder="Enter Email Address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Repeat Email Address:</label>
<div class="col-xs-10">
<input class="form-control col-sm-6" type="email" name="num" ng-model="repeatemail" placeholder="Repeat Email Address">
</div>
</div>
</form>
For the first input field (i.e. username) I tried validations using ng-messages and has-error. This was the output I am getting
I need the specific output be like, if name is small means I have to get error message like "your name is too small". But when I am typing the name I am getting three error messages at a time.
You need to specify the condition for each message to show:
<p ng-if="regForm.name.$error.minlength">Your name is too short.</p>
Your code is working for me. I suspect you don't have the angular-messages module included. From the angular docs:
First, get the file:
Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-messages.js
NPM e.g. npm install angular-messages#X.Y.Z
Bower e.g. bower install angular-messages#X.Y.Z
Then, include angular-messages.js in your HTML:
<script src="path/to/angular.js"></script>
<script src="path/to/angular-messages.js"></script>
Finally, load the module
in your application by adding it as a dependent module:
angular.module('app', ['ngMessages']);
With that you're ready to get started!
I'm trying the http://aurelia.io/get-started.html project, and after installing everything, i get the following error in chrome console:
And this is the error in Firefox
Got it !
I typed value.bond instead of value.bind in the markup
app.html:
<template>
<section>
<h2>${heading}</h2>
<form role="form" submit.delegate="welcome()">
<div class="form-group">
<label for="fn">First Name</label>
<input type="text" value.bond="firstName" class="form-control" id="fn" placeholder="first name">
</div>
<div class="form-group">
<label for="ln">Last Name</label>
<input type="text" value.bond="lastName" class="form-control" id="ln" placeholder="last name">
</div>
<div class="form-group">
<label>Full Name</label>
<p class="help-block">${fullName}</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</section>
</template>
I am trying to validate a form with the jQuery validation plugin. However, I am only getting the validation to work for 1 of the inputs. Any ideas?
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"> </script>
<form id="driver-form" class="form-horizontal driver" method="post">
<div class="form-group">
<label for="inputName1" class="col-md-2 col-md-offset-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverFirst" placeholder="First Name" required/>
</div>
</div>
<div class="form-group">
<label for="driverLast" class="col-md-2 col-md-offset-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverLast" placeholder="Last Name" required/>
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-md-2 col-md-offset-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="driverEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-group">
<label for="inputPhone1" class="col-md-2 col-md-offset-2 control-label">Phone Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverPhone" placeholder="Phone Number" required/>
</div>
</div>
</form>
javascript:
$("#driver-form").validate();
jsfiddle: http://jsfiddle.net/rynslmns/533Yt/
The validation framework used name attribute, you have not specified it
<input type="text" class="form-control" id="driverFirst" name="driverFirst" placeholder="First Name" required/>
Demo: Fiddle