I want to prevent my form from being cleared on a post request in flask.
Here is my code:
predictor.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/perfect-scrollbar/perfect-scrollbar.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/css/util.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
</head>
<body>
<form method="POST" id="Formid">
<div class="form-group" onsubmit="return false">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Sepal length">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Sepal Width">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Petal length">
<input type="text" class="form-control input-sm" id="input" name="data_input" style="width:100%" maxlength="500"placeholder="Petal Width">
<button type="submit" class="btn btn-success" value="Submit" method="get"><i class="fa fa-search" aria-hidden="true"></i></button>
{{predictions}}
</div>
</form>
</body>
</html>
This is the sample on submitting the form i get the output but the form values get cleared
If I get you right, you need to preserve the values of other input fields in the form, if the form is unable to be processed due to one or more input(s) being invalid.
After the post request, store the values of the valid input fields in variables and pass them in the value attribute in the input tags so that the inputs of the form are prefilled on next reload.
Like this <input type="text" value="{{ some_variable }}" />
You can set these variables as empty strings initially for first-time input from users.
Related
I am new in the development of this map web application, and I want to implement a form with a map which can get the longitude and latitude through the search bar and put it in the database. I am using the Leaflet-Search plugin. I tried following the instructions, but I still can't understand how to implement it properly.
For reference, here is the form picture and code:
Picture: Form picture
Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HelpThePoor</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href={{url('css/main.css')}}>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
Kembali
<br>
<div class="container">
<form action="/createdonor" method = "post">
#csrf
<div class="form-row">
<div class="col">
<label>Nama:</label> <!--for getting the name-->
<input type="text" class="form-control" name="name" placeholder="Nama">
</div>
<div class="col"> <!--for getting the details of help-->
<label>Bantuan apa yang anda tawarkan?:</label>
<input type="text" class="form-control" name="help_offered" placeholder="Ceritakan secara lanjut bantuan anda">
</div>
<div class="col">
<label>Nombor Telefon:</label> <!--for getting the phone number-->
<input type="text" class="form-control" name="tel_number" placeholder="No. telefon anda">
</div>
<div class="col">
<div id="formmap"> <!--the supposedly searcheable map-->
</div>
</div>
<div class="col">
<label>Jenis bantuan:</label> <!--help type-->
<input type="text" class="form-control" name="help_type" placeholder="Sila pilih jenis bantuan anda">
</div>
<div class="col">
<label>Maklumat tambahan:</label> <!--additional details-->
<input type="text" class="form-control" name="add_info" placeholder="Maklumat tambahan">
</div>
</div>
<br>
<button type="submit" class="btn btn-success">Daftar Bantuan Saya!</button>
</form>
</div>
<script> <!--the JS for the searcheable map-->
const formmap = L.map('formmap').setView([1.465036, 830.428012], 13);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(formmap);
const search = new GeoSearch.GeoSearchControl({
//provider: new GeoSearch.OpenStreetMapProvider(),
});
formmap.addControl(search);
function searchEventHandler(result) {
console.log(result.location);
}
formmap.on('geosearch/showlocation', searchEventHandler);
</script>
</body>
</html>
And here's the database: Database picture
I am new in this type of web application, and I quite slow on getting the basics of JS currently.
I have recently starting playing around with html and css, and I am stuck with time selector.
Basically, I am creating a form for my website which includes selecting time and date. My date selector works fine (it diplays the calender), however my time selector drop-down does not do anything at all. I have tried many solution but none has worked yest. When i pasted my code to snippet i got following error;
$()... time-picker is not a function
I have tried many solutions, including adding bootstrap.min.js and jquery-1.11.1.min.js as suggested in This but no luck.
Many Thanks,
Hassam
$(function() {
$( "#datepicker1" ).datepicker();
});
$( "#timepicker" ).timepicker();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Javascript</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="styleshee" type="text/css" href="jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/hero-slider.css">
<link rel="stylesheet" href="css/tooplate-style.css">
<link rel="stylesheet" type = "text/css" href="new.css">
<link rel="stylesheet" href="hr-timePicker.min.css">
<script type="text/javascript" src ="script.js"></script>
</head>
<body>
<div class = "bgImage">
<form>
<div class="formWrap">
<p class = "text">Please Enter Your details</p>
<input type="text" name="firstname" placeholder="firstname*" required autofocus />
<input type="text" name="lastname" placeholder="lastname*" required />
<input type="email" name="email" placeholder="email*" required />
<input type="text" class="js--datePicker" id="datepicker1" value="Date*">
<input id="timepicker" class = "timepicker" name="datetime" type="text" required>
<input type="submit" id="submit" class="submit" value="Submit" />
</body>
</html>
enter code here
I updated your code to use absolute reference to timepicker js code in a cdn using:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
and added the following before your </body> tag:
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
Here is the working snippet:
$(function() {
$("#datepicker1").datepicker();
});
$(function() {
$('#timepicker').timepicker();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Javascript</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="styleshee" type="text/css" href="jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fontAwesome.css">
<link rel="stylesheet" href="css/hero-slider.css">
<link rel="stylesheet" href="css/tooplate-style.css">
<link rel="stylesheet" type="text/css" href="new.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="bgImage">
<form>
<div class="formWrap">
<p class="text">Please Enter Your details</p>
<input type="text" name="firstname" placeholder="firstname*" required autofocus />
<input type="text" name="lastname" placeholder="lastname*" required />
<input type="email" name="email" placeholder="email*" required />
<input type="text" class="js--datePicker" id="datepicker1" value="Date*">
<input id="timepicker" class="timepicker" name="datetime" type="text" required>
<input type="submit" id="submit" class="submit" value="Submit" />
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</body>
</html>
So I'm a bit new to web programming, and I'm trying to include a jQuery widget (pop-up calender when you click on the textbox) on my website. When I open the html script in chrome locally the widget works fine, but on my website it doesn't work at all.
When I visit my website as a regular user, Chrome says "Not Secure" before the https://________ . Maybe this has something to do with it?
Sorry for the big block of code but I don't know where the mistake in my script is.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- END -->
</body>
</html>
It is not working, because you placed JS/jquery multiple times. This version should work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<!-- END -->
</body>
</html>
There are some resources with http:// url are included in your source code, So that is why it's showing "Not Secure".
I would suggest to include all your Javascript libraries related to your functionality at the bottom of your html.
I have one html page "organization.html" and I want to get Java Object value into this html page.
My Java Object
public class User_Objects {
public String firstName;
public String lastName;
}
My organization.html page code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Organization</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
var reqfirstName = '${reqObj.firstName}';
alert("reqfirstName>>>>>>>"+reqfirstName);
var reqlastName = '${reqObj.lastName}';
alert("reqlastName>>>>>>>"+reqlastName);
});
</script>
</head>
<body>
<form name="orgname" action="org_name" method="post">
<div class="container-fluid orgdiv">
<div class=" text-center topbgimage">
<img src="images/bg.jpg" class="" style="max-width: 100%;">
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 heading text-center" style="text-align: center;">
<h1 class="">Hello <label id="lblfullname"></label> </h1>
<p>Enter your organization Name to determine if there is a current terms of service agreement with app.</p>
<label><span class="starred">*</span>Oraganisation:</label>
<input type="text" id="txtOrgName" name="txtOrgName"
class=" form-group" placeholder="enter your organisation"
style="float: none; margin-left: 8px;" />
</div>
</div>
</div>
<div class="col-md-12 text-center footerdiv"
style="text-align: center;">
<input type="submit" name="btnOrgName" id="btnOrgName" class="bg-primary btn"
value="Validate" onclick="return validateOrg();" />
<input type="hidden" name="myJObject" id="myJObject" value='${reqJSONObj}' />
</div>
</div>
</form>
</body>
My Java code is given below
JSONObject jObj = new JSONObject(fillObj);
request.setAttribute("reqJSONObj", jObj);
request.setAttribute("reqObj", fillObj);
forward = "/organization.html";
RequestDispatcher view = request.getRequestDispatcher(forward);
view.forward(request, response);
But When my organization.html page is loaded, I am getting reqfirstName>>>>>>>${reqObj.firstName} alert.
I am getting ${reqObj.firstName} not value of firstName of reqObj Object.
I am using Java with Eclipse Mars1.
I'm trying to send my form data of php file to js file but I can't sure that php file is called by js file.
<!DOCTYPE html>
<html class="hide-sidebar ls-bottom-footer" 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="">
<meta name="author" content="">
<title>Learning</title>
<link href="css/vendor.min.css" rel="stylesheet">
<script type ="text/javascript" src="api/serve.js"></script>
<link href="css/theme-core.min.css" rel="stylesheet">
<link href="css/module-essentials.min.css" rel="stylesheet" />
<link href="css/module-material.min.css" rel="stylesheet" />
<link href="css/module-layout.min.css" rel="stylesheet" />
<link href="css/module-sidebar.min.css" rel="stylesheet" />
<link href="css/module-sidebar-skins.min.css" rel="stylesheet" />
<link href="css/module-navbar.min.css" rel="stylesheet" />
<link href="css/module-messages.min.css" rel="stylesheet" />
<link href="css/module-carousel-slick.min.css" rel="stylesheet" />
<link href="css/module-charts.min.css" rel="stylesheet" />
<link href="css/module-maps.min.css" rel="stylesheet" />
<link href="css/module-colors-alerts.min.css" rel="stylesheet" />
<link href="css/module-colors-background.min.css" rel="stylesheet" />
<link href="css/module-colors-buttons.min.css" rel="stylesheet" />
<link href="css/module-colors-text.min.css" rel="stylesheet" />
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body class="login">
<div id="content">
<div class="container-fluid">
<div class="lock-container">
<div class="panel panel-default text-center paper-shadow" data-z="0.5">
<h1 class="text-display-1">Create account</h1>
<div class="panel-body">
<!-- Signup -->
<form id="signup" action="" method="POST">
<div class="form-group">
<div class="form-control-material">
<input id="firstName" type="text" class="form-control" name="firstname" value="">
<label for="firstName">First name</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="lastName" type="text" class="form-control" name="lastName" value="">
<label for="lastName">Last name</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="email" type="email" class="form-control" name="email" value="">
<label for="email">Email address</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="password" type="password" class="form-control" name="password" value="">
<label for="password">Password</label>
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input id="passwordConfirmation" type="password" class="form-control" placeholder="Password Confirmation">
<label for="passwordConfirmation">Re-type password</label>
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<input type="checkbox" id="agree" />
<label for="agree">* I Agree with Terms & Conditions!</label>
</div>
</div>
<div class="text-center">
<button id="submit" class="btn btn-primary" type="submit" >Create an Account</button>
</div>
</form>
<!-- //Signup -->
</div>
</div>
</div>
</div>
</div>
<script>
var colors = {
"danger-color": "#e74c3c",
"success-color": "#81b53e",
"warning-color": "#f0ad4e",
"inverse-color": "#2c3e50",
"info-color": "#2d7cb5",
"default-color": "#6e7882",
"default-light-color": "#cfd9db",
"purple-color": "#9D8AC7",
"mustard-color": "#d4d171",
"lightred-color": "#e15258",
"body-bg": "#f6f6f6"
};
var config = {
theme: "html",
skins: {
"default": {
"primary-color": "#42a5f5"
}
}
};
</script>
<!-- Separate Vendor Script Bundles -->
<script src="js/vendor-core.min.js"></script>
<script src="js/vendor-countdown.min.js"></script>
<script src="js/vendor-tables.min.js"></script>
<script src="js/vendor-forms.min.js"></script>
<script src="js/vendor-carousel-slick.min.js"></script>
<script src="js/vendor-player.min.js"></script>
<script src="js/vendor-charts-flot.min.js"></script>
<script src="js/vendor-nestable.min.js"></script>
<script src="js/module-essentials.min.js"></script>
<script src="js/module-material.min.js"></script>
<script src="js/module-layout.min.js"></script>
<script src="js/module-sidebar.min.js"></script>
<script src="js/module-carousel-slick.min.js"></script>
<script src="js/module-player.min.js"></script>
<script src="js/module-messages.min.js"></script>
<script src="js/module-maps-google.min.js"></script>
<script src="js/module-charts-flot.min.js"></script>
<script src="js/theme-core.min.js"></script>
</body>
</html>\
And my js file is as follws.
serve.js
$(document).ready(function(){
$("form").click( function(e){
e.preventDefault();
// get values from textboxs
var name = $('#firstName').val();
var lname = $('#lastName').val();
var mail = $('#email').val();
var password = $('#password').val();
var confpass = $('#passwordConfirmation');
$.ajax({
url: "api/learnapi.php",
type: "post",
dataType: "json",
data: {type: "signup", Name: name, Lname: lname, Pass: password, Email: mail,Pass1:confpass },
//type: should be same in server code, otherwise code will not run
ContentType: "application/json",
success: function (response) {
alert(JSON.stringify(response));
},
error: function (err) {
alert(JSON.stringify(err));
}
});
});
});
I'm not sure that these my two files are linked together.
How do is link them
In your server.js file replace $('form') with $('form #submit')
Right now you are calling click event on the form instead of button.
Check view source to see if your file is actually included in dom.