Editable HTML Form with a Save Button

Editable HTML Form with a Save Button - javascript

I want to create an HTML application form and send it to applicants through email. each individual has to download the file, fill it out separately and send it back to me.
Is it possible to embed a save button and overwrite the changes permanently ? all I could find was save the changes locally (or as a separate file) which is not what I want. here is a simple form I could find on w3schools:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Save">
</form>

I found this code instead. all I had to do was change the output to html and style it the way I want. though it saves the changes as a new file but that's ok. I couldn't find anything else :
<!DOCTYPE html>
<html>
<head>
<title>Save form Data in a Text File using JavaScript</title>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text], textarea, select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button]{
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<!--Add few elements to the form-->
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<!--Add to button to save the data.-->
<div>
<input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
</div>
</div>
</body>
<script>
let saveFile = () => {
// Get the data from each element on the form.
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
// This variable stores all the data.
let data =
'\r Name: ' + name.value + ' \r\n ' +
'Age: ' +age.value + ' \r\n ' +
'Email: ' + email.value + ' \r\n ' +
'Country: ' + country.value + ' \r\n ' +
'Message: ' + msg.value;
// Convert the text to BLOB.
const textToBLOB = new Blob([data], { type: 'text/plain' });
const sFileName = 'formData.txt'; // The file to save the data.
let newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
</script>
</html>

Related

Adding CSS to a window.open created in JavaScript

The goal of my code is to create a resume builder using HTML, CSS and JavaScript. Once the user "clicks" create resume, a new window should open with the content enter styled in a resume format of my choosing. I cannot use HTML to style the resume.
The issue I am having is my styling will not populate in an on-the-fly created with JavaScript. At this point, I have only tried to center the first name (I am testing to see if my code is correct). I am not receiving any errors, however, nothing is changing. I am not sure if it is because I am only doing the first name and I need to format the other content, or if I am actually coding something wrong.
I have created the HTML for the users to enter their information and the JavaScript to populate the information. No errors!
I added a function to center align the firstName. No errors! However, nothing happens!?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB-115 Final Project</title>
<style>
body {
background-color: peru;
}
h1 {
text-align: center;
padding: 60px;
background: forestgreen;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Build Your Resume</h1>
<form>
<div id="myinfo">
<h2>Personal Information:</h2>
<label>Enter your first name:</label><br>
<input type="text" id="firstName"><br><br>
<label>Enter your last name:</label><br>
<input type="text" id="lastName"><br><br>
<label>Enter your preferred name:</label><br>
<input type="text" id="preName"><br><br>
<label>Enter your email address:</label><br>
<input type="text" id="email"><br><br>
<label>Enter your phone number:</label><br>
<input type="text" id="number"><br><br>
<label>Enter your state:</label><br>
<input type="text" id="state"><br><br>
<label>Enter your city:</label><br>
<input type="text" id="city"><br><br>
<label>Enter your zipcode:</label><br>
<input type="text" id="zip"><br><br>
<p>About Me</p>
<textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
</div>
<div id="myEdu">
<h2>Enter Educational History:</h2>
<label>Start Date:</label>
<input type="date" id="eduStart"><br><br>
<label>End Date:</label>
<input type="date" id="eduEnd"><br><br>
<label>Name of school:</label><br>
<input type="text" id="school"><br><br>
<label>Degree type:</label><br>
<input type="text" id="degree"><br><br>
<label>Field of study:</label><br>
<input type="text" id="major"><br><br>
</div>
<div id="myJob">
<h2>Enter job information:</h2>
<label>Start Date:</label>
<input type="date" id="jobStart"><br><br>
<label>End Date:</label>
<input type="date" id="jobEnd"><br><br>
<p>Position Details:</p>
<textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
</div>
<div id="extra">
<h2>Please Enter Your Skills:</h2>
<textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>
<h2>Links:</h2>
<p>Please provide links to any websites or blogs.</p>
<textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
</div>
<input type="button" id="btnSubmit" value="Create Resume">
</form>
<script src="projectJS.js"></script>
</body>
</html>
JavaScript:
/*style*/
function myFunction () {
let fName = document.getElementById("firstName");
fName.style.textAlign = "center";
}
/*button*/
document.getElementById("btnSubmit").addEventListener('click',myWindow)
/*function to create resume*/
function myWindow()
{
/*get HTML first name*/
fName = document.getElementById("firstName").value;
/*get HTML last name*/
lName = document.getElementById("lastName").value;
/*get HTML preferred name*/
pName = document.getElementById("preName").value;
/*get HTML email address*/
eAddress = document.getElementById("email").value;
/*get HTML phone number*/
phoneNum = document.getElementById("number").value;
/*get HTML state*/
stateAdd = document.getElementById("state").value;
/*get HTML city*/
cityAdd = document.getElementById("city").value;
/*get HTML zip code*/
zipCode = document.getElementById("zip").value;
/*get HTML about me*/
about = document.getElementById("aboutMe").value;
/*get HTML Edu start date*/
schoolStart = document.getElementById("eduStart").value;
/*get HTML Edu end date*/
schoolEnd = document.getElementById("eduEnd").value;
/*get HTML School*/
schoolName = document.getElementById("school").value;
/*get HTML degree type*/
degreeType = document.getElementById("degree").value;
/*get HTML major*/
fieldStudy = document.getElementById("major").value;
/*get HTML job start date*/
jStart = document.getElementById("jobStart").value;
/*get HTML job end date*/
jEnd = document.getElementById("jobEnd").value;
/*get HTML job details*/
jobDetails = document.getElementById("details").value;
/*get HTML skills*/
mySkills = document.getElementById("skills").value;
/*get HTML links*/
webPage = document.getElementById("links").value;
myText = ("<html>\n<head>\n<title>WEB-115 Final Project</title>\n</head>\n<body>");
myText += (fName);
myText += (lName);
myText += (pName);
myText += (eAddress);
myText += (phoneNum);
myText += (stateAdd);
myText += (cityAdd);
myText += (zipCode);
myText += (about);
myText += (schoolStart);
myText += (schoolEnd);
myText += (schoolName);
myText += (degreeType);
myText += (fieldStudy);
myText += (jStart);
myText += (jEnd);
myText += (jobDetails);
myText += (mySkills);
myText += (webPage);
myText += ("</body>\n</html>");
flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
}

Firstly, you can check style works or not with a file or an inline style:
// If you use css file style
// myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><link rel="stylesheet" type="text/css" href="styles1.css">\n</head>\n<body>`);
// Else if you use inline style
let style = `body {
color: blue;
}
.text-center {
text-align: center;
}
`;
myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><style>${style}</style>\n</head>\n<body>`);
myText += `<div class="text-center">${fName}</div>`;
Then, if you want to use a function to do this job, you can control it by set a global flyWindow variable like my way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB-115 Final Project</title>
<style>
body {
background-color: peru;
}
h1 {
text-align: center;
padding: 60px;
background: forestgreen;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Build Your Resume</h1>
<form>
<div id="myinfo">
<h2>Personal Information:</h2>
<label>Enter your first name:</label><br>
<input type="text" id="firstName"><br><br>
<label>Enter your last name:</label><br>
<input type="text" id="lastName"><br><br>
<label>Enter your preferred name:</label><br>
<input type="text" id="preName"><br><br>
<label>Enter your email address:</label><br>
<input type="text" id="email"><br><br>
<label>Enter your phone number:</label><br>
<input type="text" id="number"><br><br>
<label>Enter your state:</label><br>
<input type="text" id="state"><br><br>
<label>Enter your city:</label><br>
<input type="text" id="city"><br><br>
<label>Enter your zipcode:</label><br>
<input type="text" id="zip"><br><br>
<p>About Me</p>
<textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
</div>
<div id="myEdu">
<h2>Enter Educational History:</h2>
<label>Start Date:</label>
<input type="date" id="eduStart"><br><br>
<label>End Date:</label>
<input type="date" id="eduEnd"><br><br>
<label>Name of school:</label><br>
<input type="text" id="school"><br><br>
<label>Degree type:</label><br>
<input type="text" id="degree"><br><br>
<label>Field of study:</label><br>
<input type="text" id="major"><br><br>
</div>
<div id="myJob">
<h2>Enter job information:</h2>
<label>Start Date:</label>
<input type="date" id="jobStart"><br><br>
<label>End Date:</label>
<input type="date" id="jobEnd"><br><br>
<p>Position Details:</p>
<textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
</div>
<div id="extra">
<h2>Please Enter Your Skills:</h2>
<textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>
<h2>Links:</h2>
<p>Please provide links to any websites or blogs.</p>
<textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
</div>
<input type="button" id="btnSubmit" value="Create Resume">
</form>
<!-- <script src="projectJS.js"></script> -->
<script>
/*button*/
document.getElementById("btnSubmit").addEventListener('click', myWindow)
/*function to create resume*/
function myWindow() {
/*get HTML first name*/
fName = document.getElementById("firstName").value;
/*get HTML last name*/
lName = document.getElementById("lastName").value;
/*get HTML preferred name*/
pName = document.getElementById("preName").value;
/*get HTML email address*/
eAddress = document.getElementById("email").value;
/*get HTML phone number*/
phoneNum = document.getElementById("number").value;
/*get HTML state*/
stateAdd = document.getElementById("state").value;
/*get HTML city*/
cityAdd = document.getElementById("city").value;
/*get HTML zip code*/
zipCode = document.getElementById("zip").value;
/*get HTML about me*/
about = document.getElementById("aboutMe").value;
/*get HTML Edu start date*/
schoolStart = document.getElementById("eduStart").value;
/*get HTML Edu end date*/
schoolEnd = document.getElementById("eduEnd").value;
/*get HTML School*/
schoolName = document.getElementById("school").value;
/*get HTML degree type*/
degreeType = document.getElementById("degree").value;
/*get HTML major*/
fieldStudy = document.getElementById("major").value;
/*get HTML job start date*/
jStart = document.getElementById("jobStart").value;
/*get HTML job end date*/
jEnd = document.getElementById("jobEnd").value;
/*get HTML job details*/
jobDetails = document.getElementById("details").value;
/*get HTML skills*/
mySkills = document.getElementById("skills").value;
/*get HTML links*/
webPage = document.getElementById("links").value;
// If you directly use a css file style
// myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><link rel="stylesheet" type="text/css" href="styles1.css">\n</head>\n<body>`);
// Else if you use inline style
// let style = `body {
// color: blue;
// }
// .text-center {
// text-align: center;
// }
// `;
// myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><style>${style}</style>\n</head>\n<body>`);
// myText += `<div class="text-center">${fName}</div>`;
// Else if you want to set it by a function
myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title>\n</head>\n<body>`);
myText += `<div id="firstName">${fName}</div>`;
myText += (lName);
myText += (pName);
myText += (eAddress);
myText += (phoneNum);
myText += (stateAdd);
myText += (cityAdd);
myText += (zipCode);
myText += (about);
myText += (schoolStart);
myText += (schoolEnd);
myText += (schoolName);
myText += (degreeType);
myText += (fieldStudy);
myText += (jStart);
myText += (jEnd);
myText += (jobDetails);
myText += (mySkills);
myText += (webPage);
myText += ("</body>\n</html>");
flyWindow = window.open('about:blank', 'myPop', 'width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
myFunctionToSetCenterFirstName();
}
// Create global variable flyWindow to set style by a javascript function
var flyWindow;
// Then set style by this function
function myFunctionToSetCenterFirstName() {
let fName = flyWindow.document.getElementById("firstName");
fName.style.textAlign = "center";
}
</script>
</body>
</html>
Successful people are patient people, believe it!

How to check if two fields match in javascript?

Im new to javascript and i have this kind of problem. I have two fields and they must be checked if the input inside is the same. If they are the same an alert should popup to tell so. Thanks in advance.
Here is an example of my fields:
function writeText() {
n = "has been collected " + window.document.myform.exemplu1.value;
document.getElementById("content").innerHTML = n;
}
function writePass() {
n = window.document.myform.exemplu2.value;
alert("password is " + n);
}
<div>
<h3> Example</h3>
<form name="myform">
<p> <input name="exemplu1" type="text" value="Edit field" onBlur="writeText()" size="25" maxlength="30" />
<span id="content"> </span></p>
<p> <input name="exemplu2" type="password" value="Parola" onBlur="writePass()" size="15" maxlength="15" /></p>
</form>
</div>

Use the strict equality operator.
I have bound a callback using adEventListener to the click event of a button to perform the check.
const buttonEl = document.querySelector('button')
const usernameEl = document.getElementById('username')
const passwordEl = document.getElementById('password')
buttonEl.addEventListener('click', () => usernameEl.value === passwordEl.value ? console.log('They are the same') : console.log('They are different'))
* {
color: #DDD;
background-color: white;
font-size: 1.1em;
padding: 10px;
margin: 10px;
}
<input type="text" id="username" />
<input type="password" id="password" />
<button>Check</button>

To Fetch input text field value and adhere it to Subject of mail

I have this code in which i want to capture "subject" from input field and append it to "Subject" of "form" tag.
I am not getting how to use document.getElementById here.
Please help.
<!DOCTYPE html>
<html>
<body>
<form name="form1" method="post" action="mailto:somebody#gmail.com?Subject=Internal Issues enctype="text/plain">
<label for="Subject">Subject</label>
<input type="text" id="Subject" name="Subject">
</html>
</body>

Here don't use method or type with form attribute and your input test must contains name="subject"
Try with,
document.getElementById('sender').addEventListener("click", sendEmail);
function GetBody() {
var body = "Assignee : " + document.getElementById('Assignee').value + '\n' + "Requester: " + document.getElementById('Requester').value + '\n';
return body;
};
function sendEmail() {
var email = 'someone#gmail.com';
var body = GetBody();
var subject = document.getElementById('subject').value;
var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + encodeURIComponent(body);
window.location.href = mailto_link;
}
<form>
<div style="white-space:nowrap">
<label for="Requester" style="padding-right:50px;">Requester*</label>
<input type="text" id="Requester" name="Requester:" placeholder="Your Vuclip Mail Id..">
</div>
<div style="white-space:nowrap">
<label for="Assignee" style="padding-right:57px;">Assignee*</label>
<input type="text" id="Assignee" name="Assignee" placeholder="Whom you want to assign">
</div>
<div style="white-space:nowrap">
<label for="subject" style="padding-right:57px;">Subject*</label>
<input id="subject" name="subject " type="text" value="I have a suggestion" style="width: 870px; font-size: 18px;" />
</div>
</form>
<button id="sender">Send email</button>

How to check whether an email address contains an # sign and a '.'. in html and javascript

I'm performing some validation checks on some inputs from the user. I was wondering how do I check that the email entered by the user contains an # symbol and a '.' as well as characters before and after the # symbol. Thanks in advance for answering.
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
function showInput() {
var comment = document.getElementById("com").value;
var first = document.getElementById("fname").value;
var last = document.getElementById("lname").value;
var dateOfVisit = document.getElementById("date").value;
var firstError = document.getElementById('firstNameError');
var lastError = document.getElementById('lastNameError');
var displayEl = document.getElementById('displayname');
if (!first) {
firstError.setAttribute('style', 'display: block; color: red');
} else {
firstError.setAttribute('style', 'display: none;');
}
if (!last) {
lastError.setAttribute('style', 'display: block; color: red');
} else {
lastError.setAttribute('style', 'display: none;');
}
displayEl.innerHTML =
first + " " + last + " visited this on " + dateOfVisit + " and said '" + comment || 'not a thing...' + "'";
}
</script>
<title>Great Pyramid of Giza</title>
</head>
<body>
<h2>Leave A Review!</h2>
<p>Have you been to this wonder of the world? If so, leave a review.</p>
<form>
First Name:<br>
<input type = "text" name="firstname" id="fname"><br>
<span style="display: none;" id="firstNameError">First name is required!</span>
Last Name:<br>
<input type = "text" name="lastname" id="lname"><br>
<span style="display: none;" id="lastNameError">Last name is required!</span>
Email Address:<br>
<input type = "text" name="email"><br>
Date of Visit:<br>
<input type = "text" name="date" id="date"><br>
Comment:<br>
<input type = "text" name="comment" size="70" id="com"><br>
</form>
<input type = "submit" value="Submit" onclick="showInput();">
<h2>Comments:</h2>
<p><span id='displayname'></span></p>
</body>
</html>

You can create a email input and validate against that instead of using any regex...
function isEmail(email) {
var input = document.createElement('input')
input.type = 'email'
input.value = email
return input.validity.valid
}
console.log(isEmail('admin#example.com'))
console.log(isEmail('#example.com'))
But why bother??? just use <input type="email"> and skip all javascript nonsens
<form>
<input type="text" name="firstname" required autocomplete="given-name">
<input type="text" name="lastname" required autocomplete="family-name">
<input type="email" name="email" autocomplete="email">
<input type="date" min="2018-04-21" name="date">
<textarea name="comment"></textarea>
<input type="submit">
</form>
ps, use form.onsubmit instead of btn.onclick (way better)
read more about constraint validation and inputs

Ajax success function is not working properly

I've made a simple ajax/php form and my success function is not working properly for some reason. Im still getting emails, so i guess the condition is true, but the is not appearing and the submit button is not blocked. Here's my code:
function myFunction() {
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var company = document.getElementById("company").value;
var phone = document.getElementById("phone").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone;
if (name == '' || message == '' || company == '' || phone == '') {
document.getElementById("error").style="display: block; color: red;";
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "email.php",
data: dataString,
cache: false,
success: function() {
document.getElementById("success").style="display: block; color: green;";
}
});
}
return false;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX + PHP форма</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.input_group {
display:inline-block;
padding: 5px;
width:100%;
text-align: center;
}
form {
width: 50%;
}
#send_message {
text-align: center;
}
</style>
</head>
<body>
<form id="contact" action="">
<fieldset>
<legend>AJAX + PHP форма</legend>
<div class = "input_group">
<label for="name" id="name_label">Имя</label> <br/>
<input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/>
</div>
<br/>
<div class = "input_group">
<label for="company" id="company_label">Компания</label> <br/>
<input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="phone" id="phone_label">Телефон</label> <br/>
<input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="msg_text" id="msg_label">Запрос</label> <br/>
<textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea>
</div>
<div class = "input_group">
<input type="submit" onclick="myFunction()" id="submit" value="Отправить" />
</div>
</fieldset>
</form>
<h2 style="display:none;" id ="error">Заполните все поля!</h2>
<h2 style="display:none;" id="success">Message sent!</h2>
List item

You can't set the style attribute as a string with el.style. Either set each style individually (.style.display,. style.color,...) or use
$('#success').css({display: 'block', color: 'green'})

this is your final code which working fine for me
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX + PHP форма</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.input_group {
display:inline-block;
padding: 5px;
width:100%;
text-align: center;
}
form {
width: 50%;
}
#send_message {
text-align: center;
}
</style>
</head>
<body>
<form id="contact" action="">
<fieldset>
<legend>AJAX + PHP форма</legend>
<div class = "input_group">
<label for="name" id="name_label">Имя</label> <br/>
<input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/>
</div>
<br/>
<div class = "input_group">
<label for="company" id="company_label">Компания</label> <br/>
<input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="phone" id="phone_label">Телефон</label> <br/>
<input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="msg_text" id="msg_label">Запрос</label> <br/>
<textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea>
</div>
<div class = "input_group">
<input type="button" onclick="myFunction()" id="submit" value="Отправить" />
</div>
</fieldset>
</form>
<h2 style="display:none;" id ="error">Заполните все поля!</h2>
<h2 style="display:none;" id="success">Message sent!</h2>
<script>
function myFunction() {
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var company = document.getElementById("company").value;
var phone = document.getElementById("phone").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone;
if (name == '' || message == '' || company == '' || phone == '') {
document.getElementById("error").style="display: block; color: red;";
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "demo.php",
data: dataString,
cache: false,
success: function(data) {
alert(data)
$('#success').css({display: 'block', color: 'green'});
}
});
}
return false;
}
</script>
and this is demo php file
<?php
print_r($_REQUEST);
?>
just update button type submit to button

Develop Reference

JavaScript is the programming language of the Web.

Editable HTML Form with a Save Button - javascript

Related

Adding CSS to a window.open created in JavaScript

How to check if two fields match in javascript?

To Fetch input text field value and adhere it to Subject of mail

How to check whether an email address contains an # sign and a '.'. in html and javascript

Ajax success function is not working properly

Categories

Resources