javascript - 点击注册按钮后生成一个随机数

Question

我正在使用 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);
                }
            });
        }

    });

}); 

Answer 1

HTML 代码的更改 删除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>中添加html div

尝试一下。