for some reason, i cannot set data to firebase realtime database.
the function works as intended, values are stored in the vars, and no error is presented...the data just won't upload to the firebase realtime database.
the js code:
$(document).ready(function(){
document.getElementById('submitEmplyee').onclick = function()
{
idNumberVal = document.getElementById('IDNum').value;
nameVal = document.getElementById('Name').value;
addressVal = document.getElementById('Address').value;
telephoneVal = document.getElementById('telephone').value;
//Ready();
firebase.database().ref('employe/' + nameVal).set({
EmplyeeID: idNumberVal,
NameOfEmp: nameVal,
AddressOfEmp: addressVal,
TelephoneOfEmp: telephoneVal
});
//alert("New HighScore !!!");
}
the sources:
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="logic.js"></script>
full HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>David Frucht CRUD app</title>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h1>Emplyee Information</h1>
<button id="newEmployeBtn" class="btn btn-primary btn-block">New Emplyee</button><br /><br />
<form id="newForm">
<div class="form-group row">
<label for="IDNum" class="col-sm-2 col-form-label">ID Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="IDNum" placeholder="ID Number">
</div>
</div>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="Address" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="telephone" class="col-sm-2 col-form-label">Telephone Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="telephone" placeholder="Telephone Number">
</div>
</div>
<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
</form>
<table id="emplyesTable" class="table table-bordered table-hover">
<thead>
<th>Emplyee ID</th>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<!-- <th>DB ID</th>
<th>Controls</th>-->
</thead>
<tbody id="employeBody"></tbody>
</table>
</div>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="logic.js"></script>
</body>
I didn't test your code, but the cause of your problem is most probably the fact that your form is submitted before the Firebase set() method is triggered.
As a matter of fact, you declare your button as follows:
<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
As detailed in the W3 specification on button types, "the missing value default is the Submit Button state" and "if the type attribute is in the Submit Button state, the element is specifically a submit button".
So, if you add a button type to your button, as follows, it should solve your problem.
<button id="submitEmplyee" type="button" class="btn btn-primary">Add to DB</button>
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I have a "save page as PDF" button on my page. This button only saves according to the page's code structure. So, the values which users have provided after the page's loading doesn't count.
Form fields contain input areas: (1) Values brought from previous calculation page with cookies (read-only) (2) Values those users can add / change
When user clicks on the "SAVE (pdf)" button, I want the page to be refreshed with the new structure; value sections of the inputs are changed, according to the new values standing in the input fields, then firing the "SAVE AS PDF" button.
How this can be technically possible. I couldn't figure it out. I appreciate your help very much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Renal Dose</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="manifest" href="../img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<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">
<!-- JQuery-->
<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>
</head>
<body>
<form class="border border-light p-5 print" name="saveList" action="/en/print" onsubmit="submit();">
<div class="form-row justify-content-lg-center">
<div class="col-12 col-lg-8 mt-3" id="timey">Calculation Time:<br>
<input class="form-control" id="time" type="text" autocomplete="off">
</div>
<div class="col-12 col-lg-8 mt-3" id="namey">Patient Name:<br>
<input class="form-control" id="name" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="wardy">Ward Name:<br>
<input class="form-control" id="ward" type="text" name="ward">
</div>
<div class="col-12 col-lg-8 mt-3" id="docty">Doctor Name:<br>
<input class="form-control" id="doctor" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="crCly">Creatinine Clearance (ml/min):<br>
<input class="form-control" id="crCl" type="number" autocomplete="off" value="" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="diay">State of Hemodialysis:<br>
<input class="form-control" id="dia" type="text" autocomplete="off" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="acty">Active Substance:<br>
<input class="form-control" id="actSubs" type="text" autocomplete="off" required="" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="producty">Brand Name:<br>
<input class="form-control" id="productName" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="suggesty">Suggested Dose:<br>
<input class="form-control" id="suggest" type="text" autocomplete="off" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="operaty">Operator:<br>
<input class="form-control" id="operator" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="noty">Notes:<br>
<input class="form-control" id="notes" type="text" autocomplete="off">
</div>
</div>
<div class="row text-justify justify-content-center mt-5">
<div class="col-12 col-lg-8">
<p><strong>Note: </strong>All the information above is advisory for the full authorized health professionals who has enough capability for determination of patient's treatment. And they can never be a substitute for the information and applications
of physicians, pharmacists or other health professionals those will provide optimum benefit for the patient.</p>
</div>
</div>
</form>
<div class="row text-center justify-content-center my-5">
<p class="text-center mt-5">
Save as PDF
</p>
</div>
https://jsfiddle.net/mulgey/t6dmvr4s/8/
I am trying to send values from HTML form to javascript file but I saw that the values for email subject and message were sent as undefined in alert window or console, while the name was correctly fetched from input and transferred to js,I am quite new to javascript so this question might be very silly but I am unable to figure out the reason why undefined is sent and also I don't understand that when in what order the javascript and HTML code is executed, I Sometimes see the javascript is being executed first before the button is clicked
heres my html form stored in temp.html
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" id="email" placeholder="Email">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" id="subject" placeholder="Subject">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
file.js located in js folder
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
output image that I get
https://ibb.co/dfjBUU
ID in html are unice you can't use id="name" for 3 inputs.
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3">
<input type="text" placeholder="Email" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3">
<input type="text" class="form-control mb-3" id="subject" placeholder="Subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message" placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto">
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;">Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</body>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
and js its ok
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
Need to give the attribute id to the input element not for the div
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" + Email + " subject:"+ subject);
}
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" placeholder="Email">
<input type="text" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" placeholder="Subject">
<input type="text" class="form-control mb-3" id="subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
Im trying to get extension from intlTelInput plugin on submit, but for some reason it returns empty. Here is an example: https://jsfiddle.net/msfk6top/
And the code:
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/bootstrap/dist/css/bootstrap.min.css?7">
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/intlTelInput.css?37">
<form id="my_form">
<input name="phone" type="tel" id="phone" class="form-control">
<input type="submit">
</form>
<!-- use old jquery so demo works in IE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://intl-tel-input.com/node_modules/intl-tel-input/build/js/intlTelInput.js?60"></script>
<script>
$("#phone").intlTelInput();
$("#my_form").submit(function () {
alert($("#phone").intlTelInput("getExtension"));
});
</script>
Any idea why its not returning the chosen extension?
You need to specify the utilsScript option when initializing the plugin in order for getExtension to work.
In your plunker, do:
$("#phone").intlTelInput({utilsScript:'https://intl-tel-input.com/node_modules/intl-tel-input/build/js/utils.js'});
utilsScript should be the path to the utils.js script that is included with the intl-tel-input plugin.
Try with this working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ENVIAR SMS GRATIS CON BACHECUBANO">
<title>ENVIAR SMS GRATIS CON BACHECUBANO</title>
<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">
<link rel="stylesheet" href="css/intlTelInput.min.css">
<style>
body {
background-color: #fafafa;
}
.intl-tel-input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="card" style="margin-top:50px;">
<!-- <img class="card-img-top" src="..." alt="SMS GRATIS de Bachecubano"> -->
<div class="card-body">
<form class="" action="send.php" method="POST" id="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="card-title text-center">ENVIAR SMS GRATIS CON BACHECUBANO</h3>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="tel" id="phone" name="phone">
<input type="hidden" id="phone2" name="phone2" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<textarea class="form-control input-sm borderRadius" type="textarea" id="message" name="message" placeholder="Su mensaje 👍 SMS GRATIS bit.ly/elBache" maxlength="130" rows="5"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<span class="help-block">
<p id="characterLeft" class="help-block"></p>
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 text-right">
<button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="submit">Enviar SMS GRATIS</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/intlTelInput-jquery.min.js"></script>
<script>
$("#phone").intlTelInput({
utilsScript: 'js/utils.js'
});
$("#form").submit(function() {
//alert($("#phone").intlTelInput("getNumber"));
$("#phone2").val($("#phone").intlTelInput("getNumber"));
});
</script>
<script>
$(document).ready(function() {
$('#characterLeft').text('130 caracteres restantes');
$('#message').keyup(function() {
var max = 130;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('0 caracteres disponibles');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
} else {
var ch = max - len;
$('#characterLeft').text(ch + ' caracteres restantes');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
</script>
</body>
</html>
I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?