jump to another page when I click on a button - javascript

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");}

Related

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 validating multiple fields

I want to validate multiple fields in my form. For that i don't want to write separate condition for all the fields. So i have assigned the error messages like a key and value pair.
If i leave all the fields without typing any value then it should populate error message.
This is my html code.
<head>
<title></title>
<script src="Scripts/validate_register.js"></script>
</head>
<body>
<table class="valid">
<tr>
<td>id:</td>
<td><input type="text" id="id1" placeHolder="Enter your name"/></td></tr>
<tr><td>email:</td>
<td><input type="text" id="id2" placeHolder="Enter your email"/></td></tr>
<tr><td>password:</td>
<td><input type="text" id="id3" placeHolder="Enter your password"/></td></tr>
<tr><td>address:</td>
<td><input type="text" id="id4" placeHolder="Enter your address"/></td></tr>
<tr><td>contact no:</td>
<td><input type="text" id="id5" placeHolder="Enter your contact no"/></td>
</tr>
<tr><td><input type="submit" onclick="validate()" value="submit"> </td></tr></table>
</body>
This is my javascript code.
function validate () {
var error={
id1:'name Cannot be empty',
id2:'email cannot be empty',
id3:'password cannot be empty',
id4:'address Cannot be empty',
id5:'contactno cannot be empty'
}
var elements=document.querySelectorAll('input');
for(var i=0;i<elements.length;i++){
if(elements[i]['value']=="")
{
var id=elements[i]['id'];
document.querySelector("."+id).innerHTML=error[id];
}
}
}
This shows an error on the document.querySelector("."+id).innerHTML=error[id]; line about something being null.
document.querySelector("."+id).innerHTML=error[id];
That expects you to have an element with a class corresponding to the input's id (e.g.,
class="id2" and such). You haven't shown any of those in your question. querySelector returns null if it can't find a matching element.
If you add a series of things like this in appropriate locations:
<span class="id1"></span>
...then that element will get the error message for your <input id="id1">. Or of course, as these elements are unique, you could use ids like error_id1, error_id2, and such.
Here's a complete example using classes: Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<table class="valid">
<tr>
<td>id:</td>
<td><input type="text" id="id1" placeHolder="Enter your name"/><span class="id1"></span></td></tr>
<tr><td>email:</td>
<td><input type="text" id="id2" placeHolder="Enter your email"/><span class="id2"></span></td></tr>
<tr><td>password:</td>
<td><input type="text" id="id3" placeHolder="Enter your password"/><span class="id3"></span></td></tr>
<tr><td>address:</td>
<td><input type="text" id="id4" placeHolder="Enter your address"/><span class="id4"></span></td></tr>
<tr><td>contact no:</td>
<td><input type="text" id="id5" placeHolder="Enter your contact no"/><span class="id5"></span></td>
</tr>
<tr><td><input type="button" onclick="validate()" value="submit"> </td></tr></table>
</body>
<script>
"use strict";
function validate () {
var error={
id1:'name Cannot be empty',
id2:'email cannot be empty',
id3:'password cannot be empty',
id4:'address Cannot be empty',
id5:'contactno cannot be empty'
}
var elements=document.querySelectorAll('input');
for(var i=0;i<elements.length;i++){
var id=elements[i]['id'];
document.querySelector("."+id).innerHTML=elements[i].value ? "" : error[id];
}
}
</script>
</body>
</html>
In the above, I've also cleared the errors when the field had a value, so that the second time it runs, the error disappears. (I also changed the submit button to just a button, but that's only so the form doesn't get submitted nowhere in the example.)
Side note: I'd move validate to an onsubmit on the form, and have it return false if there are any errors.
. is for classes. If you want to detect ids, you need to use #. Moreover, you need to use value, not innerHTML. So, correct
document.querySelector("."+id).innerHTML=error[id];
to
document.querySelector("#"+id).value=error[id];

How to force enter to active next input field in form

Mobile web application contains order entry form.
Rows contain product code and quantity.
Mobile barcode scanner sends enter after barcode and this causes form to submit.
How to prevent form submit on enter: enter should behave like tab, it must:
activate next input field.
submit should done using submit button only.
jQuery, jQuery-mobile, ASP.NET MVC4 are used. Application is running in Motorola MC2180 computer using its WebKit based browser. This is modern browser and supports html5.
data entry page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="/Scripts/jquery-mobile/jquery.mobile-1.3.2.css" rel="stylesheet"/>
<script src="/Scripts/jquery/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-mobile/jquery.mobile-1.3.2.js"></script>
<script src="/Scripts/applibrary.js"></script>
</head>
<body>
<div>
<form id='inputform' method="post"
action ="/Detail/SaveFullDocument">
<input type="hidden" name="_rows" />
<table id="tableId">
<tr>
<th>Code</th>
<th>Quantity</th>
<td>
<input type="button" value="+" onclick="addRow('tableId')" /></td>
</tr>
<tr>
<td>
<input type="text" name="Product" /></td>
<td>
<input type="number" name="Quantity" /></td>
<td>
<input type="button" value="-" onclick="deleteRow(this)" /></td>
</tr>
<tr>
<td>
<input type="text" name="Product" /></td>
<td>
<input type="number" name="Quantity" /></td>
<td>
<input type="button" value="-" onclick="deleteRow(this)" /></td>
</tr>
....
</table>
<input type="button" value="+" onclick="addRow('tableId')" />
<input type="submit" value='Save' />
</form>
</div>
</body>
</html>
$('#inputform').on('keydown', 'input', function (event) {
if (event.which == 13) {
console.log($(this));
$(this).next('input').focus();
event.preventDefault();
}
});
if all you need to focus next element upon enter, then no need to loop over all inputs as $(this) will be the target element.
DEMO
First, catch the enter, as the previous answer explained, then identify the next input field and call the .focus() method on it.
$(form).on('keyup', 'input',
function(event)
{
if(event.which() == 13)
{
event.preventDefault(); //this prevents the default, as was previouslynoted
$.each($('input'),
function(index, input)
{
if(input == this)
{
$('input')[index+1].focus();
}
});
}
});
You can prevent it with jQuery as follows:
$(document).on('keyup', 'input', function(event){
if(event.which()===13){ // 13 is the keyCode of enter Key
event.preventDefault();
}
});

Homework help, what am I doing wrong here? [Javascript, validation]

Trying to get this form to validate email using the function the professor said to use. We cannot use jquery or any other way to handle this. He's very...specific...on how he wants things done. Anyway, last week of a web design course and introduces javascript without much explanation.
The function is simply validating email but I have no frickin clue on how to call the function properly (verify_email). I've found countless examples of how to do this other ways but I'm pretty sure he will take off points for not doing it his way. Frantically trying to format this on an edit... it was fine when I submitted.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Feedback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function verify_email ()
{
var email_val=document.getElementById("email").value;
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( email_val.search( regex ) == -1)
{
alert("Email is not valid");
return false;
}
else
{
return true;
}
}
</script>
</head>
<body class="sdd">
<nav>
Home
Resume
Class List
Miscellaneous
Feedback
</nav>
<header>
<h1 class="sd">Feedback Page</h1>
</header>
<div id="wrapper">
<div id="leftcolumn2">
</div>
<div id="rightcolumn2">
<section>
<br><br>
Feedback Form:
<form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
<table class="comtab">
<tr>
<td>*First Name: <input type="text" name="fname" id="fname"></td>
<td>*Last Name: <input type="text" name="lname" id="flname"></td>
</tr>
<tr>
<td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
</tr>
<tr>
<td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
</tr>
</table>
</form>
</section>
<footer class="footbot">
© 2010
</footer>
</div>
</div>
try this
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Feedback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="media/css/webpageCSS.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function verify_email ()
{
var email_val=document.getElementById("email").value;
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( email_val.search( regex ) == -1)
{
alert("Email is not valid");
return false;
}
else
{
return true;
}
}
</script>
</head>
<body class="sdd">
<nav>
Home
Resume
Class List
Miscellaneous
Feedback
</nav>
<header>
<h1 class="sd">Feedback Page</h1>
</header>
<div id="wrapper">
<div id="leftcolumn2">
</div>
<div id="rightcolumn2">
<section>
<br><br>
Feedback Form:
<form name="comform" method="post" action="http://webdevfoundations.net/scripts/formdemo.asp" onsubmit="return verify_email();">
<table class="comtab">
<tr>
<td>*First Name: <input type="text" name="fname" id="fname"></td>
<td>*Last Name: <input type="text" name="lname" id="flname"></td>
</tr>
<tr>
<td id="com" colspan="2"><textarea cols="60" rows=5 name="comments" id="comments">Enter your feedback here</textarea></td>
</tr>
<tr>
<td class="alignl" colspan="2">Email (optional): <input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class="alignl" colspan="2"><input type="submit" value="Submit Comment" ></td>
</tr>
</table>
</form>
</section>
<footer class="footbot">
© 2010
</footer>
</div>
</div>
</body>
</html>
Try using
<script type="text/javascript">
function verify_email (email_val)
{
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if( email_val.search( regex ) == -1)
{
alert("Email is not valid");
return false;
}else{
return true;
}
}
</script>
In the body of your page you need to register the function with the input for the email.
<input type="text" name="email" onchange="verify_email()" />
Are you wanting to pass the string "email" to the email validation function? Or do you want to actually check whatever is in the email input? If you're just passing "email" to test, it needs to be in quotes (') for it to be passed correctly.
This might be the problem:
function verify_email(email_val)
{
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (email_val.search(regex) == -1)
{
alert("Email is not valid");
return false;
}
return true;
}
It will always return true. Also, search doesn't handle Regex. You need to run the string onto the regex. This code might work:
function verify_email(email_val)
{
var regex = /^[A-Z0-9_%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (regex.exec(email_val) == -1)
{
alert("Email is not valid");
return false;
} else {
return true;
}
}
Also, see the comment Matt Phillips posted: Homework help, what am I doing wrong here? [Javascript, validation].
Also, verify_email(email) is not defined. You should use verify_email(document.getElementById('email').value).
The javascript variable email is not defined anywhere so you are passing an undefined variable to the javascript function. call the function like
<input type="submit" value="Submit Comment" onclick="verify_email(document.getElementById('email').value);">

Problem in form validation with JavaScript

The editvalidate() function is not getting called at all:
Please suggest why. What's the remedy?
<script type="text/javascript">
function editvalidate() {
var emailExp = /^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
var numericExpression = /^[0-9]+$/;
if(document.editprofile.userid.value == '' || document.editprofile.password.value == ''||document.editprofile.name.value == ''||document.editprofile.age.value == ''||document.editprofile.collegeid.value == ''||document.editprofile.mobile.value == ''||document.editprofile.address.value == ''||document.editprofile.department.value == ''||document.editprofile.email.value == ''||document.editprofile.sec_ques.value == ''||document.editprofile.answer.value == ''){
alert("Hey! you can't left a field blank!");
return false;
}
else if(!document.editprofile.email.value.match(emailExp)){
alert("You need to enter a valid email address to get proper notifications!");
return false;
} else if(!document.editprofile.mobile.value.match(numericExpression)){
alert("Mobile numbers are all numeric digits i think!");
return false;
} else if(document.editprofile.mobile.value.length < 10){
alert("Mobile number must be 10 digit long!");
return false;
}
else{
return true;
}
}
</script>
the form is given below and its used to fetch data from database and itself getfilled with the values.the editable entries are corrected and the form is submitted.its working fine just not getting validated cz the editvalidate() is not getting called at all.why?
<form name="editprofile" action="editprofile.jsp" method="post" onsubmit="return editvalidate();">
<table align="center">
<%
for(int i = 0; i < list.length ; i++){
%>
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="35" style="width: 219px" value="<%=list[i].getName() %>" maxlength="25"></td>
</tr>
<input type="hidden" name="userid" size="20" style="width: 220px"
value="<%=list[i].getUserid() %>" maxlength="10">
<tr>
<td>Address:</td>
<td><input type="text" name="address" size="46"
style="width: 221px" value="<%=list[i].getAddress() %>"
maxlength="50"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email" size="20"
style="width: 220px" value="<%=list[i].getEmail() %>" maxlength="40"></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" name="age" size="20" style="width: 219px"
value="<%=list[i].getAge() %>" maxlength="2"></td>
</tr>
<tr>
<td>College ID:</td>
<td><input type="text" name="collegeid" size="20"
style="width: 219px" value="<%=list[i].getCollegeid() %>"
maxlength="10"></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input type="text" name="mobile" size="20"
style="width: 218px" value="<%=list[i].getMobile() %>" maxlength="10"></td>
</tr>
<tr>
<td>Department:</td>
<td><input type="text" name="department" size="20"
style="width: 218px" value="<%=list[i].getDepartment() %>"
maxlength="10"></td>
</tr>
<tr>
<td>Security Question:</td>
<td><input type="text" name="sec_ques" size="20"
style="width: 218px" value="<%=list[i].getSec_ques() %>"
maxlength="50"></td>
</tr>
<tr>
<td>Answer:</td>
<td><input type="text" name="answer" size="20"
style="width: 218px" value="<%=list[i].getAnswer() %>" maxlength="50"></td>
</tr>
<tr>
<td><input type="submit" name="operation" value="editprofile"
style="width: 118px"></td>
<td><input type="reset" value="Reset" name="B2"></td>
</tr>
<%
}
%>
i checked it the way u suggested and found that the function is getting called.but why the rest alerts r nt visible? isnt thatdue to the value attribute in input tags
With the as far given little information, all I can answer is: Just run a Javascript debugger. I can recommend you Firebug for this.
That said, in the future please come up with an SSCCE instead of cutouts of code with unnecessary clutter. This avoids crawling long in the code searching for lines of relevance and at first glance obvious questions as "Are they in the same file?", "Did you add alert('blah') as 1st line of function to see if it actually is invoked?", "Did the browser have JS enables?", "Are you sure that you didn't typo'ed the function name?", "Isn't there more into the code which may have disturbed it?", etcetera.
Here's a basic example of such an SSCCE:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2063598</title>
<script>
function validate(form) {
alert('Validate method invoked!');
return false;
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<input type="text" name="foo" class="required">
<input type="submit">
</form>
</body>
</html>
That said, I see that you're still using the legacy scriptlets in your JSP. If you can, I strongly recommend to stop using it and switch to taglibs/EL before it's too late. Raw Java code belongs in Java classes, not in JSP files.
Basic example with JSTL's (just drop jstl-1.2.jar in /WEB-INF) c:forEach:
<table>
<c:forEach items="${users}" var="user">
<tr>
<td><input type="text" name="address" value="${user.address}"></td>
<td><input type="text" name="email" value="${user.email}"></td>
<td><input type="text" name="college" value="${user.college}"></td>
</tr>
</c:forEach>
</table>
And also keep CSS in its own CSS file to separate style from content and to increase webapp performance and maintainability.
you don't call it anywhere from your html, you should probably call it <form onsubmit="return editvalidate();">
Ok now I see he formatted it properly, I don't mind the down votes I give them sometimes as well.
#Robin Agrahari
you probably have somewhere typo in the javascript no one is going to go trought it but you, try to test one by one if by using alert as you do. But don't do it on sumbit, create a mock button that will call(on click) this function editvalidate(); and check your function thoroughly and you will get to the problem eventually
How can you tell it's not being called? I'd put an alert right at the top of the method and see if it hits that. It's possible you're hitting some kind of error somewhere. If an alert at the top of editvalidate doesn't occur, try changing the obsubmit to:
onsubmit="alert('hello!'); return editvalidate();"
then you should at least see "Hello!" when you click the submit button.
looking at the code it should be called
Or Try
onsubmit="editvalidate(); return false;"
Or check where it is not misplaced, I mean the javascript should be in <head> </head>
actually i used a password checking parameter in the first if block document.editprofile.password.value == ''
and i never used an attribute like password in the form.that was my mistake and so it was not working.i found it using the firebug tool.thanks for the help.

Categories