点击注册按钮生成一个随机数
Generate a random number upon clicking registration button
当用户单击注册按钮时，我使用JavaScript尝试生成一个15位的随机数，并将其显示在div元素中。我尝试了很多方法，但都无法奏效。
HTML
<form id="form" action="form_profile.html" method="POST" name="register" class="wizard-big">
<!--<h1>Account</h1>-->
<fieldset>
<!--<h2>Account Information</h2>-->
<div class="row">
<div class="col-lg-12">
<div class="col-sm-12 form-group">
<select type="text" class="form-control required" name="salutation">
<option value="">Salutation</option>
<option value="1">Mr</option>
<option value="2">Ms</option>
</select>
</div>
<div class="col-sm-4 form-group">
<!--<label>First Name *</label>-->
<input type="text" placeholder="First Name" class="form-control required" id="fname" name="fname">
</div>
<div class="col-sm-4 form-group">
<!--<label>Middle Name </label>-->
<input type="text" class="form-control" placeholder="Middle Name" id="mname" name="mname">
</div>
<div class="col-sm-4 form-group">
<!--<label>Last Name *</label>-->
<input type="text" class="form-control required" placeholder="Last Name" id="lname" name="lname">
</div>
<div class="col-sm-6 form-group">
<input type="text" placeholder="Place of Birth" class="form-control required" id="pob" name="pob">
</div>
<div class="col-sm-6 form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon "><i class="fa fa-calendar"></i></span><input type="text" class="form-control required" placeholder="Date of Birth" id="dob" name="dob">
</div>
</div>
<div class="col-sm-12 form-group">
<input type="text" class="form-control required" placeholder="Qualification" id="qualification" name="qualification">
</div>
<div class="col-sm-6 form-group">
<input type="text" class="form-control" placeholder="Post Graduation" id="pg" name="pg">
</div>
<div class="col-sm-6 form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon "><i class="fa fa-calendar"></i></span><input type="text" class="form-control" placeholder="Post graduation Year" id="pgy" name="pgy">
</div>
</div>
<div class="col-sm-6 form-group">
<!--<label>Graduation *</label>-->
<input type="text" class="form-control" placeholder="Graduation" id="graduation" name="graduation">
</div>
<div class="col-sm-6 form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon "><i class="fa fa-calendar"></i></span><input type="text" class="form-control" placeholder="Graduation Year" id="gy" name="gy">
</div>
</div>
<div class="col-sm-6 form-group">
<!--<label>Schooling *</label>-->
<input type="text" class="form-control" placeholder="Schooling" id="schooling" name="schooling">
</div>
<div class="col-sm-6 form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon "><i class="fa fa-calendar"></i></span><input type="text" class="form-control" placeholder="Schooling Year" id="sy" name="sy">
</div>
</div>
<div class="col-sm-4 form-group">
<!--<label>Religion *</label>-->
<input type="text" class="form-control" placeholder="Religion" id="religion" name="religion">
</div>
<div class="col-sm-4 form-group">
<!--<label>Caste *</label>-->
<input type="text" class="form-control" placeholder="Caste" id="caste" name="caste">
</div>
<div class="col-sm-4 form-group">
<!--<label>Subcaste *</label>-->
<input type="text" class="form-control" placeholder="Subcaste" id="subcaste" name="subcaste">
</div>
<div class="col-sm-4 form-group">
<!--<label>Family Name *</label>-->
<input type="text" class="form-control" placeholder="Family Name" id="familyname" name="familyname">
</div>
<div class="col-sm-4 form-group">
<!--<label>Father Name *</label>-->
<input type="text" class="form-control" placeholder="Father Name" id="fathername" name="fathername">
</div>
<div class="col-sm-4 form-group">
<!--<label>Mother Name *</label>-->
<input type="text" class="form-control" placeholder="Mother Name" id="mothername" name="mothername">
</div>
<div class="col-sm-6 form-group">
<!--<label>Brothers *</label>-->
<input type="text" class="form-control" placeholder="Brothers" id="brothers" name="brothers">
</div>
<div class="col-sm-6 form-group">
<!--<label>Sisters *</label>-->
<input type="text" class="form-control" placeholder="Sisters" id="sisters" name="sisters">
</div>
<!--<div class="col-sm-12 form-group" id="recaptcha_widget">
<div class="required">
<div class="g-recaptcha" data-sitekey="6Lc4vP4SAAAAABjhRjyoMguw66mNSBgdpBF398AG"></div>
</div>
<?php //include("js/captcha.php");?>
</div> -->
<div class="col-sm-offset-4 col-sm-4 form-group">
<br><button style="width:100%" type="submit" id="insertncontinue" class="btn btn-success">Save and Generate Vault No</button>
</div><!--==== End col-sm-4 form-group==-->
<div id="demo"></div>
<!--<div class="col-sm-4 form-group">
<button style="width:100%" type="submit" class="btn btn-success">Save and Continue</button>
</div>--><!--==== End col-sm-4 form-group==-->
<!--<div class="col-sm-4 form-group">
<a href="#"><button style="width:100%" type="button" class="btn btn-success">Edit</button></a>
</div>--><!--==== End col-sm-4 form-group==-->
</div>
<div class="col-lg-4">
<div class="text-center">
<div style="margin-top: 20px">
<i class="" style="font-size: 180px;color: #e5e5e5 "></i>
</div>
</div>
</div>
</div>
</fieldset>
</form>
JavaScript
$(document).ready(function(){
//execute's the function on click
$("#insertncontinue").click(function(e){
var status = $('form')[0].checkValidity();
if(status){
/*jquery to call the url requested
and parse the data in json*/
$.ajax({
url: "form_profile.php",
type: "POST",
data: $("#form").serialize(),
async: false,
dataType: "JSON",
/*Give out the alert box
to display the results*/
success: function (json){
if(json.error){
alert(json.error_msg);
e.preventDefault();
}else{
$("#insertncontinue").click(function(e){
document.getElementById("#demo").innerHTML = Math.floor(Math.random()*1E16);
}
alert("DATA ADDED SCCCESSFULLY!");
$('#form').submit();
}
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
}
});
});
action="form_profile.html"，因为您使用ajax提交表单，改变type="submit"作为type="button"
<script>
$(function () {
$("#insertncontinue").click(function () {
var randomnumber = Math.random().toString().slice(-15);
$("#generatenumber").html(randomnumber );
// this is ur randomnumber see at console or you can alert it.
console.log(randomnumber);
// all remaining code as it is...
});
});
</script>
在表单<div id="generatenumber"></div> 中添加htmldiv
试试看。
相关文章：
- 试图在点击按钮时获得一个随机数
- 一个随机数自动附加到一个js文件中
- 需要用户输入一个随机数，然后提醒用户数字 ibnputted
- 从一个函数中发送一个随机数，供另一个函数使用
- 每n秒生成一个随机数js
- 点击注册按钮生成一个随机数
- 如何生成一个随机数来从数组中获取随机对象
- 猜测一个随机数与机会
- 在JavaScript中创建一个随机数生成器游戏，无法使While循环保持循环
- 我如何重写这个，使它不是一个随机数搜索
- 运行一个随机数生成器在按钮按下
- 生成一个随机数组在Javascript/jquery的数独谜题
- 如何取一个现有的数字，并在此基础上生成一个随机数?[javascript]
- 如何在javascript中返回一个随机数，它总是大于前一个数字
- 从一个随机数添加一个类
- 在Angular 1.5中使用组件生成一个随机数
- 如何阻止一个随机数出现两次
- 每24小时添加一个随机数
- 为什么我不能使用 _.map(new Array(n）， Math.random） 创建一个随机数组
- 为什么在登录setInterval时给出一个随机数
