Javascript - JSP page won't run .js file - javascript

I have javascript code in a .js file which validates the text fields but it won't work when it's an external file. I mean when the code is separated from the JSP.
<script type="text/javascript">
function checkForm(form)
{
if(form.username.value == "")
{
alert("Error: Username cannot be blank!");
form.username.focus(); return false;
}
}
</script>
JSP
<HEAD><script type="text/javascript" src="check.js"></script></HEAD>
<form name="register" method="post" action="registerUser.jsp" onsubmit="return (checkForm(this) && false);">
<table summary="Register Form" cellspacing="15">
<tr>
<td align="right"> Username: </td> <td><input name="username" size=20 type="text"/></td> <td>*Min: 4 chars.</td>
</tr>
</table>
<div id="Buttons">
<p><input type="submit" value="Register">
<input type="reset" value="Reset Fields"></p>
</div>
</form>

You need to remove the tags
<script type="text/javascript">
</script>
from the external file.

The js file should only contains javascript code. The <script type="text/javascript"> line and the </script> line contain HTML code, not JavaScript. Remove them from the .js file.

It works ok for me. I know it sounds dumb, but did you removed the tags from the check.js file?

Related

required and button click javascript validation function not work?

I m applying two validation but both are not work
required validatation not work on input attribute
function validatation() not work
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="signup.js"></script>
<script type="text/javascript">
function validatation() {
debugger
if (document.PersonalInform.txtfname.value == "") {
debugger
alert("Please provide your first name!");
document.PersonalInform.Name.focus();
return false;
}
}
</script>
</head>
<body>
<form id="txtPersonalInformation" name="PersonalInform" onsubmit="return (validatation());">
<h1>Personal Information</h1>
First Name:<input id="txtfname" name="txtfname" type="text" /><br/>
Middle Name:<input id="txtmname" name="txtmname" type="text" /><br/>
Last Name:<input id="txtlname" name="txtlname" type="text" /><br/>
<input id="btnnext" type="button" value="Next" />
</form>
</body>
</html>
OR
Below Validation Also Not Work
First Name:<input id="txtfname" name="txtfname" type="text" required /><br/>
signup.js
$(document).ready(function () {
$('#btnnext').click(function (event) {
$("#txtPersonalInformation").load("ContactInformation.html");
});
});
I add this line in web.config file
web.config
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
</appSettings>
I want to perform this javascript function validation but not work?
function validatation()
Here's what you want. You weren't submitting you form, as noted by Mendrika.
HTML Form:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> type="text/javascript"></script>
<form id="some-form" action="some-url" onsubmit="return validate()">
<label for="first-name">First Name:</label>
<input id="first-name" name="first-name" type="text"><br>
<label for="last-name">Last Name:</label>
<input id="last-name" name="last-name" type="text"><br>
<input id="btn-submit" type="submit" value="Submit">
</form>
JS Sample Validate function
function validate() {
if ($("#first-name").val() === "") {
alert("Provide a first name");
$("#first-name").focus();
return false;
}
if ($("#last-name").val() === "") {
alert("Provide a last name");
$("#last-name").focus();
return false;
}
return true;
}
https://codepen.io/el-sa-mu-el/pen/QWjVGvb
Note, this is not good code, but it works. You should read more about basics of JS and form validation.
Some other observations:
Your form is missing the action=" " tag which actually POSTs the data to some URL. Where is your data going?
You are mixing vanilla Java Script and JQuery. Use JQuery for DOM access if you already included it, with the $ symbol.
You have a signup.js function but also include a Javascript function in the <script> tags. You can move the validate() function into the signup.js
Better form validation with JQuery:
https://www.sitepoint.com/basic-jquery-form-validation-tutorial/
The reason nothing works is because your form is never submitted.
You just need to change the next button type to submit.
<input id="btnnext" type="submit" value="Next"/>

jump to another page when I click on a button

I am trying that, when I click on a button it shows a alert message and go to another page
function password_change_function() {
var x = document.getElementById("password_change").value;
alert("Password is changed");
window.location.assign("viewprofile.php");
}
<form>
<table>
<tr>
<td><strong>Current Password</strong></td>
<td><strong>:</strong></td>
<td><input type="password" name="currentpassword" value="ratul#aiub" /></td>
</tr>
<tr>
<td><strong>New Password</strong></td>
<td><strong>:</strong></td>
<td><input type="password" name="newpassword" value="kumar#ai" /></td>
</tr>
<tr>
<td><strong>Retype New Password</strong></td>
<td><strong>:</strong></td>
<td><input type="password" name="retypepassword" value="kumar#ai" /></td>
</tr>
</table>
<p align="center"><input id="password_change" type="submit" value="Submit" onclick="password_change_function()" /></p>
</form>
the main problem is ,it shows the alert message but page not changed
you might want to try switching the last two statements around like this
window.location.assign("viewprofile.php");
alert("Password is changed");} // End of function scope
try this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript">
function password_change_function(){
var x= document.getElementById("password_change").value;
alert("Password is changed");
window.location = "http://example.com/foo.php";
}
</script>
<input id="password_change" type="submit" value="Submit" onclick="password_change_function()"/>
</body>
</html>
You can achieve your goal by swapping the two lines of code:
From this:
alert("Password is changed");
window.location.assign("viewprofile.php");}
To this:
window.location.assign("viewprofile.php");
alert("Password is changed");}

I cannot get 2 usually simple javascript functions to work with my PHP files

I am setting up a simple php form to collect entries and insert/show them to a myphpmyAdmin db, this works fine. The little problem I'm having is when i try to put in a small bit of js to clear text and also give a popup alert, neither will work, can somebody help me please.
Here is my Javascript file:
function clear(){
document.getElementById("in1", "in2", "in3", "in4", "in5",).value= "";
}
function saved() {
alert("Well done yourself, you have saved an entry to the database.");
}
And here is my php file:
<html>
<head>
<meta charset="utf-8">
<title>CS230 Assignment 3</title>
<link rel="stylesheet" href="style1.css" type="text/css" media="all" />
<script src="myjs.js" type="text/javascript"></script>
</head>
<body>
<h3>Diary:</h3>
<form action="insert.php" method="post">
<div id="table">
<table>
<tr>
<th>When/Where</th>
<th>Event</th>
<th>Emotion</th>
<th>Automatic Thoughts</th>
<th>Rational Response</th>
</tr>
<tr>
<td><input type="text" style="height:500px;" name="in1" id="in1"></td>
<td><input type="text" style="height:500px;" name="in2" id="in2"></td>
<td><input type="text" style="height:500px;" name="in3" id="in3"></td>
<td><input type="text" style="height:500px;" name="in4" id="in4"></td>
<td><input type="text" style="height:500px;" name="in5" id="in5"></td>
</tr>
</table>
</div>
<div id="buttons">
<input type="submit" name="save" id="save" value="Save Entry" onclick="saved()">
</div>
</form>
<div id="clearButton">
<button id="clear" onClick="clear();">clear</button>
</div>
<form action="show.php" method="post">
<input type="submit" name="show" id="show" value="Show Diary">
</form>
</body>
</html>
The document.getElementById() function takes one argument. If you want to fetch a list of elements, you can use .querySelectorAll():
var elements = document.querySelectorAll("#in1, #in2, #in3, #in4, #in5");
That returns a node list, so you'll have to iterate to perform an operation on each one:
function clear(){
var elements = document.querySelectorAll("#in1, #in2, #in3, #in4, #in5");
for (var i = 0; i < elements.length; ++i)
elements[i].value = "";
}
edit — you'll probably want to use a name other than "clear" as "clear" is likely to collide with something; in-line event handlers are highly susceptible to that sort of issue. Alternatively you could explicitly reference window.clear():
<button id="clear" onClick="window.clear();">clear</button>

javascript validation empty field with error messages

Can any one please tell me the wrong of this code, I just want to j=give an error message when the first_name is empty.
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name==="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
HTML
<form name="myForm" action="../controller/users.php" method="POST"
enctype="multipart/form-data" >
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
First of all i need to know whether you downloaded jquery file from ,if not do it first.. else jquery wont work.. follow this link http://code.jquery.com/jquery-1.11.1.min.js, save this file in the folder where is your code is...name of the file i used is 'jquery-1.11.1.min.js'
then there was some more mistakes in your code. you need to give a submit button first with the id 'submit', which you used in your script's 3rd line, then need to close form tag..
correct code is..
<html><script src="jquery-1.11.1.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name=="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
<body>
<form name="myForm" action="../controller/users.php" method="POST" enctype="multipart/form-data">
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>
try to learn basics first.. Accept my answer if it helps.. :)

Forms inside td html

My html code is:
<table><tr><td onclick="submit_form_patient();")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="27" />27</form>
</td></tr>
<tr><td onclick="submit_form_patient();")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="49" />49</form></td></tr>
My Java script is:
<script>
function submit_form_patient()
{
document.forms["select_patient"].submit();
}
</script>
My form gets submitted but if I use $_POST to retrieve the values I get 27 all the time namely the first value I never get the other values.
Yours forms have same name. You need to name them differently.
And modify js code:
<script>
function submit_form_patient(formName)
{
document.forms[formName].submit();
}
</script>
And html code need to be like this
<table>
<tr>
<td onclick="submit_form_patient('select_patient');")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="27" />27</form>
</td>
</tr>
<tr>
<td onclick="submit_form_patient('select_patient2');")>
<form name="select_patient2" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="49" />49</form>
</td>
</tr>
The name of the forms is the same. I don't know whether the standard handles this, but browsers pick the first matching item. So it's always going to be the first.
Create only one form, and based on the click POST the right value.
When you use document.forms["select_patient"].submit();, JS will find first form/element with that name.
Try this:
<script>
function submit_form_patient()
{
document.getElementsByName("select_patient")[0].submit();
document.getElementsByName("select_patient")[1].submit();
}
</script>
you can also create a for block to be more consistent.

Categories