Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 How to create a Registration form in Django using Ajax With JavaScript?


Create Models.py


class Reg(models.Model):

uname= models.CharField(max_length=20)

pwd=models.CharField(max_length=10)

email=models.CharField(max_length=20)

mobile = models.CharField(max_length=12)

def __str__(self):

return "uname is "+str(self.uname)+ " password is "+self.pwd + " emailid is "+self.email+ "mobile no  is "+str(self.mobile)




Create Urls.py with two different view methods?

path('reg',views.reg,name='reg'),
path('regcode',views.regcode,name='regcode')


Create views.py

def reg(request):
return render(request,"dbapp/reg.html")

def regcode(request):
print("data is ",request.GET["uid"])
r=Reg(uname=request.GET["uid"],pwd=request.GET["upass"],email=request.GET["email"],mobile=request.GET["mobile"])
r.save()
return HttpResponse("data inserted successfully")




Crate HTML page under templates

<!DOCTYPE html>
<html>
<head>
<title></title>
   <script type="text/javascript">
   

     function submitdata()
     {
            var uid = document.getElementById("txtuser").value;
            var upass = document.getElementById("txtpass").value;
            var email = document.getElementById("txtemail").value;
            var mobile = document.getElementById("txtmobile").value;
            alert(uid);
            console.log(upass);
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange=function()
            {
           
            document.getElementById("result1").innerHTML = xmlhttp.responseText;
           
            }

            xmlhttp.open("GET","regcode?uid="+uid+"&upass="+upass+"&email="+email+"&mobile="+mobile,true);
            xmlhttp.send();

     }

   </script>

</head>
<body>

<input type="text" name="txtuser" id="txtuser" placeholder="Enter username" onblur="checkusername(this.value)" /> <span id="result"></span>
<br><br>
<input type="password" name="txtpass" id="txtpass" placeholder="Enter password" />
<br><br>
<input type="text" name="txtemail" id="txtemail" placeholder="Enter email" />
<br><br>
<input type="text" name="txtmobile" id="txtmobile" placeholder="Enter mobile" />
<br><br>
<input type="button" name="btnsubmit" value="Reg" onclick="submitdata()" />

<div id="result1"></div>
</body>
</html>









HTML file for Jquery?

    <!DOCTYPE html>
<html>
<head>
<title></title>

   <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
   <script type="text/javascript">
   
    

    $(document).ready(function(){

       $("#btnsubmit").click(function(){

            var uid = $("#txtuser").val();
            var upass = $("txtpass").val();
            var email = $("txtemail").val();
            var mobile = $("txtmobile").val();
            alert(uid);
            console.log(upass);
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange=function()
            {
           
            $("#result1").html(xmlhttp.responseText);
           
            }

            xmlhttp.open("GET","regcode?uid="+uid+"&upass="+upass+"&email="+email+"&mobile="+mobile,true);
            xmlhttp.send();


       })



    });
   



   </script>

</head>
<body>

<input type="text" name="txtuser" id="txtuser" placeholder="Enter username" onblur="checkusername(this.value)" /> <span id="result"></span>
<br><br>
<input type="password" name="txtpass" id="txtpass" placeholder="Enter password" />
<br><br>
<input type="text" name="txtemail" id="txtemail" placeholder="Enter email" />
<br><br>
<input type="text" name="txtmobile" id="txtmobile" placeholder="Enter mobile" />
<br><br>
<input type="button" name="btnsubmit" id="btnsubmit" value="Reg" />

<div id="result1"></div>
</body>
</html>






Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post