as soon as I started doing a site. I did what I did before I got to js.
I have a form and I want to validate it all, I wrote the code for a validation but it does not display my validation, there is no error in js console. So.
Here's the code for form;
<body>
<div class ="container">
<div class="card mx-auto" style="width: 30rem;">
<div class="card-header">Register</div>
<div class="card-body">
<form name="form_register" onsubmit="return false" autocomplate="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Enter username">
<small id="user_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="email_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password1" placeholder="Password">
<small id="pass_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleInputPassword2">Re-enter Password</label>
<input type="password" class="form-control" id="password2" placeholder="Re-enter Password">
<small id="pass1_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleFormgender">Gender</label>
<select class="form-control" id="gender">
<option>Male</option>
<option>Female</option>
</select>
<small id="gender_error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleFormgrade">Grade</label>
<select class="form-control" id="grade">
<option>Admin</option>
<option>User</option>
</select>
<small id="grade_error" class="form-text text-muted"></small>
</div>
<br/>
<button type="submit" name="submit" id="submit" class="btn btn-primary"><i class="fa fa-user"> </i>Register</button>
<span>Login</span>
</form>
</div>
</div>
</div>
<br/>
</body>
and here is the js code.
$(document).ready(function(){
$("#form_register").on("submit",function(){
var status = false;
var name = $("#username");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var genderx= $("#gender");
var type = $("#grade");
// var n_patt = new RegExp(/^[A-Za-z]+$/);
var e_patt = new RegExp(/^[a-z_-0-9_-]+(\.[a-z0-9_-]+)*#[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$/);
if (name.val() == "" || name.val().length < 2){
name.addClass("border-danger");
$("user_error").html("<span class='text-danger'>Please enter the name</span>");
status = false;
}else{
name.removeClass("border-danger");
$("user_error").html("");
status = true;
}
})
})
I can not see where the problem is, I do not know. Maybe it's not good the HTML code written or js. I really do not know, I tried .. I still wrote and rewritten .. and nothing.
Also, in the head, I put the location for js (main.js) and links for bootstrap, ajax, jquery.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Register</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"src="./js/main.js"></script>
</head>
In Jquery, when you use $("#form_register") it looks for the element on your HTML with the id "form_register" because you placed a #, it doesn't matter that your form has that name, it should also have an id with that name if you want to use like that.
<form id="form_register" onsubmit="return false" autocomplate="off">
Also your Regex has a mistake, you can test it in some webistes like regex101. I currently fixed the error on your Regex, but I don't know if it works as you expect it.
Here's the Regex:
^[a-z_0-9_-]+(\.[a-z0-9_-]+)*#[a-z0-9_-]+(\.[a-z0-9_-]+)*(\.[a-z]{2,4})$
Related
For example on input like this:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-group my-2">
<input class="form-control mx-2" type="text" placeholder="Customer Name">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="email" placeholder="Customer Email">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="text" placeholder="Customer pin">
</div>
<div class="form-group mb-2">
<textarea class="form-control mx-2" rows="4">
Hi, {customer Name here}
Your Email is: {customer Email here}
Your Pin is: {customer pin here}
</textarea>
</div>
</div>
</body>
When the Customer Name input is entered: John Doe
When the Customer Email input is entered: johndoe#mail.com
When the Customer pin input is entered: 123
Then the textarea value should become
Hi, John Doe
Your Email is: johndoe#mail.com
Your Pin is: 123
How would I autofill the textarea with the data that the user inputted?
You need to use JavaScript. It will build your complete textarea content from the inputted values whenever they are updated. Like this:
// Input elements
var customerName = document.getElementById("customer-name");
var customerEmail = document.getElementById("customer-email");
var customerPin = document.getElementById("customer-pin");
// Output textarea
var customerInfo = document.getElementById("customer-info");
function updateTextareaContent(){
customerInfo.value=`Hi, ${customerName.value||"(enter name)"}
Your Email is: ${customerEmail.value||"(enter email)"}
Your Pin is: ${customerPin.value||"(enter pin)"}`;
}
customerName.addEventListener("keydown", updateTextareaContent);
customerEmail.addEventListener("keydown", updateTextareaContent);
customerPin.addEventListener("keydown", updateTextareaContent);
customerName.addEventListener("keyup", updateTextareaContent);
customerEmail.addEventListener("keyup", updateTextareaContent);
customerPin.addEventListener("keyup", updateTextareaContent);
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-group my-2">
<input class="form-control mx-2" type="text" placeholder="Customer Name" id="customer-name">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="email" placeholder="Customer Email" id="customer-email">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="text" placeholder="Customer pin" id="customer-pin">
</div>
<div class="form-group mb-2">
<textarea class="form-control mx-2" rows="4" id="customer-info">
Hi, (enter name)
Your Email is: (enter email)
Your Pin is: (enter pin)
</textarea>
</div>
</div>
</body>
</html>
(The snippet is a bit large so it is collapsed, click the arrow to open it)
This watches for changes in the text, and when those changes happen, it updates the textarea.
Here's some further reading in order to more better understand the code snippet:
Event Listeners on w3schools
keydown and keyup events on MDN
Template Literals on MDN
Hi i am a beginner starting to trying out bootstrap now i am trying to do form validation, i tried to follow the guide
on https://getbootstrap.com/docs/5.0/forms/validation/ and when i run the exact form validation code, it seem bootstrap doesn't load in my chrome and not vaildating.
I had included the bootstrap css and js cdn link in my code.
Any helps will be greatly appreciated.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
</head>
<body>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Add the script tag just above closing </body> tag. It seems you got the script tag on between the <head/> tag which is causing the problem
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
I have to make a registration page in a project that uses Django as the backend framework.. In the registration page, I have to input the names, email, password and mobile... During registration, I need to validate email if its a valid format, check if the mobile number is of 10 digits and check if the password is a strong one.. I want to do it using javascript... I have written the code for the form and also the javascript function... But while running on the server I am unable to get the desired validation checks and alerts... Please help what should i do?
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'signup1.css'%}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<!--Javascript form validator-->
<link rel="stylesheet" href="{% static './register.js' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="text-center">
<h1>Signup</h1>
<h6>Register yourself</h6>
</div>
<form style="text-align: top;" name="myForm" method="POST" action="" onsubmit="validate()" >
{% csrf_token %}
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>First Name</b></label>
<input type="text" name="first_name"placeholder="First Name" class="form-control" id="name" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Last Name</b></label>
<input type="text" name="last_name"placeholder="Last Name" class="form-control" id="name" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Mobile Number</b></label>
<input type="tel" name="mobile" class="form-control" id="number" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Email address</b></label>
<input type="email" name="email" placeholder="Enter Email Id" class="form-control" id="email" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"><b>Password</b></label>
<input type="password" name="password" placeholder="Enter Password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"><b>Your Choice</b></label><br>
<input type="radio" id="user" name="user_type" value="user">
<label for="html">User</label><br>
<input type="radio" id="admin" name="user_type" value="admin">
<label for="css">Admin</label><br>
</div>
<button type="submit" class="btn btn-primary" onclick="validate()">Submit</button>
</form>
<a style="color: aqua; margin-top: 10px;" href="http://localhost:8000/"><small>Already Registered? Click to login</small></a>
</div>
</div>
</div>
</div>
</body>
</html>
register.js (In static folder of the project)
function validate()
{
var abc=document.forms["myForm"]["first_name"].value;
if(abc=="")
{
alert("Please enter the first name");
return false;
}
var def=document.forms["myForm"]["last_name"].value;
if(def=="")
{
alert("Please enter the last name");
return false;
}
var email = document.forms["myForm"]["email"].value;
var re = "/^[a-z0-9+_.-]+#[a-z0-9.-]+$"
var x=re.test(email);
if(x)
{}
else
{
alert("Email id not in correct format");
return false;
}
var mobile = document.forms["myForm"]["mobile"].value;
var check="^(\+91[\-\s]?)?[0]?(91)?[789]\d{9}$"
var a=check.test(mobile);
if(a)
{}
else
{
alert("Invalid mobile number");
return false;
}
var pass=document.forms["myForm"]["password"].value;
var checks="^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[#$!%?&])[A-Za-z\d#$!%?&]{8,}$"
var res=checks.test(pass);
if(res)
{}
else
{
alert("Password must contain atleast 1 small, 1 capital, 1 numeric, 1 special character and must be atleast 8 characters long");
return false;
}
}
Your regular expressions are formatted as strings, not regular expressions.
For example...
// re is string
var re = "/^[a-z0-9+_.-]+#[a-z0-9.-]+$"
var x=re.test(email);
// re is regex
var re = /^[a-z0-9+_.-]+#[a-z0-9.-]+$/
var x=re.test(email);
I tried to give validation to the give form in the HTML file using JAVASCRIPT and also check the email is available or not in the database table using AJAX.Also imported sha256 from hashlib.But I got an error like this. I did not understand why this error happens.Can anyone suggests a solution for this problem.
Internal Server Error: /User/Registration/
Traceback (most recent call last):
File "C:\PYTHON\lib\site-packages\django\core\handlers\exception.py", line 47, in inner
response = get_response(request)
File "C:\PYTHON\lib\site-packages\django\core\handlers\base.py", line 179, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "D:\Project\salon\user\views.py", line 214, in userregister
epassword = sha256(upassword.encode()).hexdigest()
AttributeError: 'NoneType' object has no attribute 'encode'
HTML file:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<title>User Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="{% static 'styles/style.css' %}" rel="stylesheet"/>
<script type="text/javascript" language="javascript">
function getsid(str)
{ print(str)
if(window.XMLHttpRequest)
{
xmlhttp= new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readystate==4 && xmlhttp.status==200)
{
document.getElementById("lemail").innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open("GET","{% url 'checkemail' %}?id="+str,true);
xmlhttp.send(null);
}
</script>
</head>
<body>
<section class="sreg" id="sreg">
<div class="container-fluid">
<div class="htop">
<h4>User <span>Register Form</span></h4>
</div>
<div class="row">
<div class="col-12">
<form method="POST" name="contact" action="{% url 'userregister' %}">
{%csrf_token%}
<div class="form-row">
<div class="form-group col-md-6">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" name="fname" placeholder="First Name">
<span id="lfname"></span>
</div>
<div class="form-group col-md-6">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name">
<span id="llname"></span>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" onchange="getsid(this.value)">
<span id="lemail"></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="pass" placeholder="Password">
<span id="lpass"></span>
</div>
<div class="form-group">
<label for="cpassword">Confirm Password</label>
<input type="password" class="form-control" id="cpassword" name="cpass" placeholder="Confirm Password">
<span id="lcpass"></span>
</div>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile">
<span id="lmob"></span>
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" id="address" name="address" rows="3" placeholder="Address"></textarea>
<span id="laddress"></span>
</div>
<center>
<button type="submit" class="btn btn-success" onclick="return userregister()">Submit</button>
</center>
</form>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{% static 'js/scriptfunction.js' %}"></script>
</body>
</html>
views.py
def userregister(request):
if request.method == 'POST':
ufname = request.POST.get('fname')
ulname = request.POST.get('lname')
uemail = request.POST.get('email')
upassword = request.POST.get('password')
ucpassword=request.POST.get('cpassword')
epassword = sha256(upassword.encode()).hexdigest()
umobile = request.POST.get('mobile')
uaddress = request.POST.get('address')
if (clientreg.objects.filter(Email=uemail).exists()):
messages.info(request, "Email ID Already Taken")
return redirect('userregister')
elif (upassword!=ucpassword):
messages.info(request, "Password Doesn't Match")
return redirect('userregister')
elif (clientreg.objects.filter(Mobile=umobile).exists()):
messages.info(request, "Mobile Number Already Taken")
return redirect('userregister')
else:
cloginobj = clientlogin()
cloginobj.Username = uemail
cloginobj.Password = epassword
cloginobj.save()
cuserreg = clientreg()
cuserreg.Login_id = cloginobj
cuserreg.First_name = ufname
cuserreg.Last_name = ulname
cuserreg.Email = uemail
cuserreg.Password = epassword
cuserreg.Mobile = umobile
cuserreg.Address = uaddress
cuserreg.save()
userdetails = clientlogin.objects.get(Username=uemail, Password=epassword)
cid = userdetails.id
request.session['cid'] = cid
return redirect("userhome")
else:
return render(request, "userregister.html")
def checkemail(request):
useremail = request.GET["id"]
count=clientlogin.objects.filter(Username=useremail).count()
if count==0:
return HttpResponse("Email Id is available")
else:
return HttpResponse("Email Id already exist")
urls.py
from django.urls import path,re_path
from . import views
urlpatterns=[
path('User/Registration/', views.userregister, name="userregister"),
path('User/Registration/CheckEmail', views.checkemail, name="checkemail"),
]
The value of upassword it seems to be None.
upassword = request.POST.get('password')
It seems post data does not have a password. You can check if that value if being passed from POST request.
Once of the way to handle is:
try:
upassword = request.POST['password']
except KeyError:
// password value not passed in POST request
// return HTTPResponse with 400 code
Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.
You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you
<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.