我正在设计html和css中的基本注册表单,点击提交按钮,数据将通过post方法n添加到服务器数据库中,因此响应将显示在与json对象相同的注册页面上。为此目的,我使用的是javascript和ajax,但它无法正常工作。
HTML
<div class="column1" style="background-color:lightgrey;">
<div class="form">
<div class="formdetail">
<h3>Individual Registration</h3>
<label for="fname"> Name</label><br>
<input type="text" size="40" id="name" name="name" placeholder="Enter your
name.." required><br><br>
<label for="phonenumber">Mobile Number</label>
<br/>
<input type="text" id="mobileno" name="mobileno" maxlength="13"
size="40" placeholder="Enter your mobile number..." class =
"numeric" /><br>
<span class="error" style="color: red; display: none">Input digits (0 -
9)</span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
$(function () {
$(".numeric").bind("keypress", function (e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) ||
specialKeys.indexOf(keyCode) != -1);
$(".error").css("display", ret ? "none" : "inline");
return ret;
});
$(".numeric").bind("paste", function (e) {
return false;
});
$(".numeric").bind("drop", function (e) {
return false;
});
});
</script>
<br>
<label for="email">Email</label><br>
<input type="text" size="40" id="email" name="email" pattern="[^
@]*@[^ @]*" name="email" placeholder="Enter your email-id..."
required><br><br>
<label for="Name">Password</label>
<br/>
<input type="password" id="password" name="password" size="40" placeholder="Enter your password" id="username" required>
<br/>
<br/>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="dob" name="dob" onclick="mydate();" hidden />
<input type="button" Value="Date of Birth" onclick="mydate();" />
<script>
function mydate()
{
//alert("");
document.getElementById("dt").hidden=false;
document.getElementById("dob").hidden=true;
}
function mydate1()
{
d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("dob").value=dt+"/"+mn+"/"+yy
document.getElementById("dob").hidden=false;
document.getElementById("dt").hidden=true;
}
</script>
<br><br>
<label for="address">Address</label><br>
<input type="text" id="address" size="40" name="address"
placeholder="Enter your address..." required><br><br>
<label for="country">Country</label><br>
<input type="text" id="country" size="40" name="country"
placeholder="Enter your country name....." required><br><br>
<label for="State">State</label><br>
<input type="text" id="state" size="40" name="state"
placeholder="Enter your state name....." required><br><br>
<label for="city">City</label><br>
<input type="text" id="city" size="40" name="city"
placeholder="Enter your city name....." required><br><br>
<input type="hidden" id="category" name="category"
value="Individual">
<input type="button" id="submit"
onclick="myFunction();" value="Submit" ><br>
的javascript
<script>
function myFunction(){
var name=document.getElementById("name").value;
var mobileno=document.getElementById("mobileno").value;
var email=document.getElementById("email").value;
var password=document.getElementById("password").value;
var dob=document.getElementById("dob").value;
var address=document.getElementById("address").value;
var country=document.getElementById("country").value;
var state=document.getElementById("state").value;
var city=document.getElementById("city").value;
var country=document.getElementById("country").value;
var dataString ='name='+ name + '&mobileno=' + mobileno + '&email=' +
email + '&password=' + password + '&dob=' + dob + '&address=' + address +
'&country=' + country + '&state=' + state + '&city=' + city + '&country=';
if(name == '' || mobileno == '' || email == '' || password == '' || dob == '' || address == '' || country == '' || state == '' || city == '' || country == '') {
alert("Please Fill All Fields");
}
else
{
$.ajax({
type:"POST",
url:"https://smilestechno.000webhostapp.com/Register.php",
data: dataString,
cache: false,
success: function(html){
alert(html);
}
});
}
return false;
}