Develop Reference

Submit and Reset not working for contact form

I have created a simple form for contact-us section on a website. For submit button, initially I used type=submit but later came across a suggestion to change it to type=button. However the code is not working for submit as well as reset. Can someone please help to point out whats wrong in my code below.
function submitForm() {
var frm = document.getElementById('contactFormAP');
alert('H2');
frm.submit(); // Submit the form
alert('H3');
frm.reset(); // Reset form data
return false;
}
<form class="contactForm" action="email_form.php?do=send" method="post" role="form" id="contactFormAP">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" id="contactnumber" placeholder="Contact Number" data-rule="minlen:10" data-msg="Please enter correct contact number with country code" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="text-center">
<input type="button" value="Submit" id="submitbtn" onclick="submitForm()">
</div>
</form>

Use the OnSubmit-Listener instead:
https://www.w3schools.com/jsref/event_onsubmit.asp

how to clear the form after submit it

Hi I have a website which was developed using php and it contains contact form where users submit their data. Down below is the code for contact form
<div class="form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm" >
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id ="ss" class="text-center" >
<button type="submit" value="submit" name="submit" title="Send Message" >SUBMIT</button>
</div>
</form>
</div>
After submitting the form I want to clear the fields and I tried the below code
<script>
function myFunction() {
document.getElementById("innov-contact").reset();
}
</script>
From the above when I try to save the form it refreshes the fields but it does not save in database and even I tried the below code
<script type="text/javascript">
$("#innov-contact")[0].reset();
</script>
But it does not clear the form and even I tried the below code
$(document).ready(function() {
var options = {
target: '#output1',
clearForm: true // clear all form fields after successful submit
};
// bind form using 'ajaxForm'
$('#innov-contact').ajaxForm(options);
});
Please let me any other method to clear the form

you can use trigger() to reset the form with jQuery
$('#form_id').trigger("reset");

This is from the jQuery Form Plugin docs.
$('#innov-contact').clearForm();
If you want to clear any specific fields.
$('#innov-contact #email').clearFields();

$('.form-control').val('');
This will clear all form fields with the class form-control.

Add 1 input type reset in form and click after ajax request:
$(document).ready(function() {
$('#innov-contact').submit((e) => {
e.preventDefault();
//Ajax...
$("#reset").click();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm">
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id="ss" class="text-center">
<button type="submit" value="submit" name="submit" title="Send Message">SUBMIT</button>
</div><input type="reset" id="reset">
</form>

use this $("#fname").val(""); it will clear the value in the 'fname' input field. Like this you can clear every field.

Change background color of an input when user clicks

First of all, I think this question maybe is having an answer somewhere here on site and sorry for being repetitive but I can`t find what I want.
So... I have a form with 4 inputs, I want when someone clicks on the input to type in the value background color to be changed, and when the user clicks somewhere else to change it back to normal.
If anyone has multiple examples please write it down, I want to know more about how javascript works.
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company"
placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone"
placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>

Use :focus pseudo-class selector to apply CSS when the element is focused.
input:focus {
background-color: #ddd;
}
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company" placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone" placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
UPDATE : If you want to toggle between states on each click then you need to toggle(probably a class) based on click event.

How to use validations in Angularjs?

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!

AngulaJS input fields not loose focus when clicked

I am trying to create a simple angularjs form where i want to have nested object as ng-model
$scope.project = {
name:"Some Name",
location:{line1:"" , line2:"", city:"", zipcode:""}
}
http://plnkr.co/edit/RfN7qZBX3HlOtGhFOdFX?p=preview
now the problem is when i click on line2 , city,state etc focus goes back to line1
tried changing HTML and several other stuff but don't know what to do..
Tried removing bootstrap as well.

The issue is that you are misusing the <label> tag. Instead of this:
<label class="form-group">
Client Location
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</label>
Try this:
<div class="form-group">
<label>Client Location</label>
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</div>
The first label should be changed as well. Instead of this:
<label class="form-group">Name
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</label>
Try this:
<div class="form-group">
<label>Name</label>
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</div>
Or this:
<div class="form-group">
<label>
Name
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</label>
</div>