jQuery code not executing code when javascript is executed? - javascript

Code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container mt-4">
<h1 class="text-left" style="margin-bottom: 50px">Daily Fridge & Freezer Monitoring Record</h1>
<form action="/auth/21-TEMP-01b" method="post" id="form">
<div class="form-group">
<label>Select Fridge Or Freezer</label>
<select class="form-control" id="fridgeFreezer" name="fridge">
<option value="Fridge-1">Fridge 1</option>
<option value="Fridge-2">Fridge 2</option>
</select>
</div>
<div class="form-group fridges Fridge-1">
<h4>Fridge 1</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature-1" name="temperature-1">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments-1" name="comments-1"></textarea>
</div>
<div class="form-group fridges Fridge-2">
<h4>Fridge 2</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature-2" name="temperature-2">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments-2" name="comments-2"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="Fridge-1"){
$(".fridges").not(".Fridge-1").hide();
$(".Fridge-1").show();
}
else if($(this).attr("value")=="Fridge-2"){
$(".fridges").not(".Fridge-2").hide();
$(".Fridge-2").show();
}
else{
$(".fridges").hide();
}
});
})
.change();
var temp1 = document.getElementById('temperature-1');
var form = document.getElementById('form');
form.addEventListener('submit', function(e) {
if(temp1.value === '' || temp1.value == null) {
e.preventDefault()
document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;
alert("temp1 not fully filled")
}
})
});
</script>
</body>
</html>
Idea
I am trying to create form validation.
Running the above code details
You will see when you change the option in the drop down menu - different div element loads up. This is done through the jQuery code in the script.
Option 1
Option 2
Next, Javascript
I will be using Javascript to validate the form.
I only have started out validating the first div element of fridge 1. If value is empty I have an alert saying which input has not been filled.
In this scenario I have cleared out all data from Fridge 1 to run the if statement for the error.
Notice this line of code:
document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;
This re-selects the option to the one has the error.
But when I run it - this happens.
Div element of fridge-2 is still showing? How come is the jQuery not executing ?

You have to trigger a change event if you want the change event listener to execute.
form.addEventListener('submit', function(e) {
if(temp1.value === '' || temp1.value == null) {
e.preventDefault()
$('#fridgeFreezer').val("Fridge-1"); // can be simplified like this
$('#fridgeFreezer').trigger("change"); // important line
alert("temp1 not fully filled")
}
})

Related

In Google sheets I have a form in my sidebar that is not submitting the data. What is wrong with my code?

I'm new to coding and I wanted to make data entry more uniform in my worplace. And so I have been trying to create a html form in a sidebar and submit the resulting data to a speadsheet.
I have my form and my sidebar working but no matter what I try or which tutorial I follow I can't seem to wrap my head around how to get the data from the html form to my spreadsheet.
Here is the .gs
function onOpen(){
SpreadsheetApp.getUi()
.createMenu('Menu CFC')
.addItem('Ajout','showSidebar')
.addToUi();
showSidebar();
}
function showSidebar(){
var html = HtmlService.createHtmlOutputFromFile('menuCFC')
.setTitle('Mon menu CFC')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function formCFCSubmit(form_data){
var sheet = spreadsheetApp.getActive().getSheetByName('Feuille 1');
sheet.([form_data.nom,form_data.numéro])
}
and here is a simplified version of my html form for testing purpose.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form name="formAjoutCFC">
<div class ="block form-group">
<label for="Nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Nom" required>
</div>
<div class ="block form-group">
<label for="Numéro">Numéro</label>
<input type="text" name="numéro" id="numéro" placeholder="Numéro" required>
</div>
<div class="block">
<button type="submit" class="action">Valider</button>
</div>
<div calss="block">
<input type="reset">
</div>
</form>
<script>
document.querySelector("#formAjoutCFC").addEventListener("submit", //not sure about the #
function(e)
{
e.preventDefault();
google.script.run.formCFCSubmit(this);
);
</script>
</body>
</html>
Any help would be welcome as I'm out of my depth at the moment ^^
You are doing all right #Lugh, very close to your goal indeed. But you need to take care of some things:
Your showSideBar function is alright too.
On your formCFCSubmit(form_data) you have errors:
The class you want to call from is SpreadsheetApp not (s)preadsheetApp.
sheet.([form_data.nom,form_data.numéro]) is not an existing method.
// For testing purposes, you can paste the data in ranges "A1" and "B1" for example:
function formCFCSubmit(form_data){
var sheet = SpreadsheetApp.getActive().getSheetByName('Feuille 1');
sheet.getRange('A1').setValue(form_data.nom);
sheet.getRange('B1').setValue(form_data.numero);
// Notice accent removed from numero!
// Putting accents in code will give you headaches sooner than later...
}
On your menuCFC.html:
Here is where most of your trouble is coming from...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<!-- Notice 'id'! That's what the # in the query selector is referencing. Not name -->
<form id="formAjoutCFC">
<div class="block form-group">
<label for="Nom">Nom</label>
<input type="text" name="nom" id="nom" placeholder="Nom" required>
</div>
<div class="block form-group">
<label for="Numero">Numéro</label>
<input type="text" name="numero" id="numero" placeholder="Numéro" required>
</div>
<div class="block">
<button type="submit" class="action">Valider</button>
</div>
<div class="block">
<input type="reset">
</div>
</form>
<script>
document.querySelector("#formAjoutCFC")
.addEventListener(
"submit",
function(e) {
e.preventDefault();
google.script.run.formCFCSubmit(this);
}
);
</script>
</body>
</html>
Now the script in your sidebar, can get the form by id, and when submitted execute the formCFCSubmit function that does what you want it to with form_data.
Keep on coding!
Notes:
You should read official documentation now that you are into coding.
Read about the SpreadsheetsApp class from Apps Script's Spreadsheet service to find out which functions you can use to tailor to your need.

How to disable bootstrap 4 validation style from valid controls

I'm using bootstrap 4 styling for my application. Application has two text boxes and one submit button. When you click the "Save" button it will call a web API and get some details asynchronously(it will not redirect the page).
Validation applied for the first text box only.
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test Page</title>
</head>
<body>
<form class="container needs-validation" novalidate>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save" />
</div>
</form>
</body>
</html>
My problem:
When I click the "Save" button without entering any values to the text boxes, green color style(validation true style) is applying to the "Address" textbox. I don't wont that to happen.
I only need red color style(validation failed style) to be applied if the validation is failed. If the values are entered(validation is true), I don't need any styling to be applied to the text boxes.
Also when I enter some value to the "Name" text box and click the "Save" button, I don't want green color styling for that text box.
Screenshot:
I, for one, do not like overriding the CSS style so you could also choose to just specify which fields to validate instead of the entire form.
Add a class to your .form-group element (e.g. .validate-me)
<form class="container needs-validation" novalidate>
<div class="form-group row mt-5 validate-me">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" formnovalidate="formnovalidate" id="address" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
</div>
</form>
Now change your JavaScript slightly, retrieve all the form-groups with the validate-me class and instead of calling form.classList.add('was-validated') loop through all the captured form-groups and add was-validated to them instead.
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Get all form-groups in need of validation
var validateGroup = document.getElementsByClassName('validate-me');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
//Added validation class to all form-groups in need of validation
for (var i = 0; i < validateGroup.length; i++) {
validateGroup[i].classList.add('was-validated');
}
}, false);
});
}, false);
You might want to look at this answer.
Specifically, instead of adding .was-validated to the entire form, only add .is-invalid to the form elements which have the :invalid pseudo-class.
This code should work in your case:
for (var i = 0; i < validateGroup.length; i++) {
var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
for (var j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
}
}
You can override css of the is-valid validation. When you right click on the green check box and choose inspect you can see which class is causing the green light
So you should specify to not inherit those from bootstrap. The code should be like this :
<!DOCTYPE html>
<html>
<head>
<style>
.form-control.is-valid:focus, .was-validated :valid.form-control{ border-color:inherit !important;
background-image: inherit !important;
box-shadow:inherit !important;}
</style>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Test Page</title>
<script type="text/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<form class="container needs-validation" novalidate id="myFrom" >
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Please enter your name" required />
<div class="invalid-feedback">
Please enter the name.
</div>
</div>
</div>
<div class="form-group row mt-5">
<label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" />
</div>
</div>
<div class="form-group row">
<input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
</div>
</form>
</body>
</html>
What I added is the style tag and css options below the head tag.
Override the $form-validation-states scss variable. This is documented in Bootstrap 5 but the same technique applies to version 4.
https://v5.getbootstrap.com/docs/5.0/forms/validation/#customizing
$form-validation-states: (
"valid": ( <-- delete this
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
);
(function () {
'use strict';
window.addEventListener('load', function () {
const forms = document.getElementsByClassName('needs-validation');
Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
const invalidGroup = form.querySelectorAll(":invalid");
for (let j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
}
}, false);
});
}, false);
})();
The post from #Ilker Kadir Ozturk worked for me by just using style, except that my valid field border inherited from a prior color (Black) which I did not want to use. I am using Bootstrap 4 and ASP.NET MVC in a razor page. Here is his code adjusted with my color (#DDDDDD). I included my comments also above the styles :
#* This is to prevent the green color style on Bootstrap validation to be applied to all textboxes when the info is valid.
Only the red color style(validation failed style) should be applied if the validation failed.
If the values are ok, no styling should be applied to the text boxes.
Also when the "submit" button is clicked, there is no need for the green color styling to show up either.
*#
<style>
.form-control.is-valid:focus, .was-validated :valid.form-control {
border-color: #DDDDDD !important;
background-image: inherit !important;
box-shadow: inherit !important;
}
</style>
A partial Solution to Remove Styling In Case Validation Was Successful
If form.checkValidity() evaluates true, remove was-validated class from the form.
An example in React Bootstrap:
Having <Form noValidate validated={this.state.validated} onSubmit={this.onSubmit}>
onSubmit = (e) => this.setState({ validated: !e.currentTarget.checkValidity()});
Here is my solution to a similar problem using jQuery:
In your submit method, insert the following lines after calling checkValidity():
$("#myForm").find(":valid").parent().removeClass("was-validated"); // Optional: Removes all green borders that have been fixed since last submit attempt
$("#myForm").removeClass("needs-validation");
$("#myForm").find(":invalid").parent().addClass("was-validated");
This solution only adds red borders to invalid inputs. Once they have been corrected, though, they will be displayed with a green border, but personally, I still prefer this over a forest of green fields if only one input is invalid ...
I would like to summarize this using an example. This one includes:
Validations for some fields you need adding class value
"validate-me"
Remove the green validation style
Refresh the invalid validation
This example will contain three html inputs:
the html code for this example is:
<form class="needs-validation " novalidate>
<div class="validate-me">
<label for="firstNameId">First name</label>
<input type="text" class="form-control" id="firstNameId" required>
<div class="invalid-feedback">
Please provide a first name.
</div>
</div>
<div class="">
<label for="miId">MI</label>
<input type="text" class="form-control" id="miId" required>
<div class="invalid-feedback">
Please provide a MI name.
</div>
</div>
<div class="validate-me">
<label for="lastNameId">Last name</label>
<input type="text" class="form-control" id="lastNameId" required>
<div class="invalid-feedback">
Please provide a last name.
</div>
</div>
...
</form>
For validation, include the following js function:
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Get all form-groups in need of validation
var validateGroup = document.getElementsByClassName('validate-me');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
//Added validation class to diva in need of validation
for (var i = 0; i < validateGroup.length; i++) {
var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
for (var j = 0; j < invalidGroup.length; j++) {
invalidGroup[j].classList.add('is-invalid');
invalidGroup[j].addEventListener("input", e => e.target.classList.remove("is-invalid"), { once: true });
}
}
}, false);
});
}, false);
Therefore, the validation will be applied just to fields that have class value: "validate-me", green validation will be removed and the red invalid message will be auto refreshed.
Example with no green validation:

How to I call a function when form submit

Below is my part in my html page which is to get a threshold value and to call a function with the value
<form id="distance_input" onSubmit="return false;" >
<p>Enter a threshold</p>
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr" class="search" onkeydown="search(this)"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
function search(ele) {
if(event.keyCode == 13) {
console.log(ele.value+" from enter button");
set_tothreshold(ele.value);
}
}
</script>
But when I do this I get the graphs do not get refreshed( set_tothreshold function gets new data for graph when the value is passes in the function) and shows that
Uncaught ReferenceError: search is not defined
at HTMLInputElement.onkeydown
when I tried with
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
</script>
also when I press submit button no changes happened(even does not prints value in console).But why does the value does not get printed.Any help is appreciated.
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value);
set_to_threshold(value);
});
function set_to_threshold(val){
console.log('do something here with val ', val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input type="text" value="input something"/>
<button id="myButton">click</button>
</body>
</html>
this is what you want . yourfunction call when form submit
<form id="distance_input" onSubmit="yourFunction(); return false;" >
Kindly include jquery in your file. It works fine.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
Include this at the head section of the html page. And also there u referred function set_to_threshold() which is undefined. So only you are getting the error. Kindly write a function for it. it'll work!

HTML Form Submit button doesn't work, only reloads page

I wanted to make a settings page for a Chrome Extension, but the save button doesn't work. The .click() doesn't even activate at all. I put all of my code beneath. Also, do I use the commented out button instead(see below)?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Y.A.Y | Options</title>
<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="/js/caps.js"></script>
</head>
<body>
<h1>Settings</h1>
<form>
<label>Enabled: </label>
<select id="on">
<option value="on">Yes</option>
<option value="off">No</option>
</select>
</br>
<label>First Letter:</label>
<select id="first">
<option value="on">Capital</option>
<option value="off">Lowercase</option>
</select>
</br>
<label>Change First Letter of Each </label>
<select id="per">
<option value="on">Word</option>
<option value="off">Sentence</option>
</select>
<!--<input id="save" type = "submit" value = "Save"/>!-->
<button id="yayay" type="submit">Save</button>
</form>
</body>
</html>
Javascript
var pretty_fied = false;
var isOn;
var isCapFirst;
var firstLetterPerWord;
getData()
function getData() {
chrome.storage.local.get(function (data) {
isOn = data.isOn;
isCapFirst = data.isCapFirst;
firstLetterPerWord = data.firstLetterPerWord;
})
}
$('form').on('submit', function () {
alert("HI!");
isOn = ($("#on").value == "on");
isCapFirst = ($("#first").value == "on");
firstLetterPerWord = ($("#per").value == "on");
console.log(isOn);
chrome.storage.local.set({
isOn: isOn,
isCapFirst: isCapFirst,
firstLetterPerWord: firstLetterPerWord
});
console.log("Saved");
});
In the form field you should specify the action, in other words what you are doing with the form
Eg.
<form action ='test.php' method="post"></form>
Which will send the form to a file called test.php
In the case though you will want to use jquery submit.
This is an example using the submit function in jquery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
source: http://www.w3schools.com/jquery/event_submit.asp
notice that the action part is left blank, because you do not wish to send a request to another document.

How to link bootstrap button to php code?

I have like a contact us form, and basically what I want is for the user to click the submit button and then for this data to be stored on a remote database on a server. Problem is I don't know how to link the javascript and php stuff to the button.
This is my code:
<html>
<head>
<title>Contact Us</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
function verify(){
var forename = document.getElementById("forename").value;
var surname = document.getElementById("surname").value;
var comments = document.getElementById("comments").value;
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
else if(surname == null || surname == ""){
alert("Surname is empty");
return false;
}
else if(comments == null || comments == ""){
alert("Comments is empty");
return false;
}
document.register.submit();
}
</script>
<div class="container">
<h1>Contact Us</h1>
</div>
<form>
<div class="container center_div">
<div class="panel panel-default">
<div class="row">
<fieldset class="form-group">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
</fieldset>
<fieldset class="form-group">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</fieldset>
<fieldset class="form-group">
<label for="Contact Us">Contact Us</label>
<input type="text" class="form-control" id="comments" placeholder="Comments">
</fieldset>
<div class="row">
<div class"col-md-2">
<button type="button" action="contactus.php" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
You have action on the wrong tag. Remove it from here:
<button type="button" action="contactus.php" class="btn btn-success">Submit</button>
Put it here:
<form action="contactus.php">
Also, change your button from type "button" to "submit"
<button type="submit" class="btn btn-success">Submit</button>
And this is just semantics, but perhaps an important distinction: the button is not a bootstrap button. It's an HTML button. You're styling it using bootstrap css.
Update: OP has asked how to get the "JavaScript stuff" working. Here's one way:
I like id's, so add an id to your form tag. I also like to be explicit about the form submit method, so add that to your form tag, too:
<form id="myForm" action="contactus.php" method="post">
Magical JavaScript Stuff
var form = document.forms.myForm
form.onsubmit = function() {
var forename = document.getElementById("forename").value;
var surname = document.getElementById("surname").value;
var comments = document.getElementById("comments").value;
if (forename == null || forename == "") {
alert("Forename is empty");
return false;
} else if (surname == null || surname == "") {
alert("Surname is empty");
return false;
} else if (comments == null || comments == "") {
alert("Comments is empty");
return false;
}
document.register.submit();
}
Here is a Fiddle Demo. Note: I removed the action from the form tag in the demo because it doesn't know what "contactus.php" is.
One other note: If you're only intention with the JavaScript function is to verify that the form fields have been filled out, you may be better off using the HTML input attribute required.
For example:
<input type="text" class="form-control" id="forename" placeholder="Forename" required>
Here's a Fiddle Demo showing how it works.
use method in your form POST or GET and add action with the name of php file which handles the submit.
Sample code
<form action="example.php" method="post" >
<input type="text" name="user_name" placeholder="Name">
<input type="text" name="user_surname" placeholder="Surname">
<input type="email" name="user_email" placeholder="Email">
<input type="password" name="user_pass" placeholder="Password">
<input type="submit" name="submit">
</form>
more about post and get function here
and html submit here
As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime.
Since you are using bootstrap, you already have the jQuery library loaded (or you are supposed to have it -- your code was missing it). Press Ctrl+U to see page code in linked example. Anyway, since it's included on the page, you might as well use it.
Your sample code, fixed:
jsFiddle Demo
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$('#btnSubmit').click(function(){
var forename = $("#forename").val();
var surname = $("#surname").val();
var comments = $("#comments").val();
if(forename == null || forename == ""){
alert("Forename is empty");
return false;
}
else if(surname == null || surname == ""){
alert("Surname is empty");
return false;
}
else if(comments == null || comments == ""){
alert("Comments is empty");
return false;
}
$('#frmContact').submit();
});
}); //END document.ready
</script>
</head>
<body>
<div class="container">
<h1>Contact Us</h1>
</div>
<div class="container center_div">
<form id="frmContact" action="contactus.php" method="post">
<div class="row">
<fieldset class="form-group">
<label for="Forename">Forename</label>
<input type="text" class="form-control" id="forename" placeholder="Forename">
</fieldset>
</div><!-- .row -->
<div class="row">
<fieldset class="form-group">
<label for="Surname">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname">
</fieldset>
</div><!-- .row -->
<div class="row">
<fieldset class="form-group">
<label for="Contact Us">Contact Us</label>
<input type="text" class="form-control" id="comments" placeholder="Comments">
</fieldset>
</div><!-- .row -->
<div class="row">
<div class="col-xs-8"> </div>
<div class="col-xs-4">
<button id="btnSubmit" type="button" class="btn btn-success">Submit</button>
</div>
</div><!-- .row -->
</form>
</div><!-- .container -->
</body>
</html>
Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)

Categories