My code is shown below:
document.getElementById('Login').onClick=LogIn;
function LogIn(){
document.getElementById('UserName').value='test';
document.getElementById('Password').value='test2';
}
When i click button i got exception
Uncaught TypeError: Cannot set property 'onClick' of null
My html code is shown below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="doktormdcore.js"></script>
<title>Test</title>
</head>
<body>
<table>
<tr>
<td> UserName:</td>
<td>
<input type="text" id="UserName" size="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" id="Password" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Enter" id="Login" /></td>
</tr>
</table>
</body>
</html>
What i must supposed to do. I dont want to use jquery.
You need to change onClick to onclick. JavaScript is case-sensitive.
Edit
I am still not sure if your code is an extension or not but here is how you could ensure that the page is fully loaded if you attach your code to the onload event.
function LogIn(){
document.getElementById('UserName').value='test';
document.getElementById('Password').value='test2';
}
window.onload = function(){
document.getElementById('Login').onclick=LogIn;
}
Related
<form id="form2" method="get" action="#">
<table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button id="button2" onclick="myFunction();">Login</button>
<script type="text/javascript">
function myFunction() {
var email2 = document.getElementById("email2").value;
alert(email2);
if (email2.toString() == 'illyam#gmail.com'){
location.replace("admin.html");
}else{
alert("Incorrect password or email");
}
}
</script></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Do not have an account?<a href="sign_up.html"
style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
</tr>
</table>
</form>
This function is supposed to get a value from the textbox with id email2 and if it is equal to a certain value then it redirects to another page.
When you click Login button it should redirect to another page but you need to use event.preventDefault() in your myFunction.
Try out the Code Below--
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello, world!</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="form2" method="get" action="#">
<table
style="
width: 800px;
border: 0;
padding: 16px;
padding-left: 120px;
vertical-align: central;
"
>
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24" /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<button id="button2" onclick="myFunction(event)">Login</button>
<script type="text/javascript">
function myFunction(event) {
event.preventDefault();
var email2 = document.getElementById("email2").value;
alert(email2);
if (email2.toString() == "illyam#gmail.com") {
location.replace("admin.html");
} else {
alert("Incorrect password or email");
}
}
</script>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
Do not have an account?<a
href="sign_up.html"
style="background-color: #e6e6e6; color: #ce171c"
>Sign Up</a
>
</td>
</tr>
</table>
</form>
</body>
</html>
can pass values to JavaScript functions like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function myFunction(email) {
if (email == 'illyam#gmail.com'){
location.replace("https://admin.html")
alert('redirecting to admin page')
}else{
alert("Incorrect password or email");
}
}
</script>
</head>
<body>
<form id="form2" method="get" action="#">
<table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button id="button2" onclick="myFunction(document.getElementById('email2').value);">Login</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Do not have an account?<a href="sign_up.html"
style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
</tr>
</table>
</form>
</body>
</html>
I think what you want is to set the values inside the textbox and then get them as variables using JS.
You can have your HTML looking like this...
<td><button id="button2" onclick="myFunction(event);">Login</button></td>
And then have your JS script tag placed below your closing form tag like this...
<script type="text/javascript">
function myFunction(event) {
event.preventDefault();
var email2 = document.getElementById("email2").value;
if(email2.toString() == 'illyam#gmail.com'){
location.replace("admin.html");
}else{
alert("Incorrect password or email");
}
}
</script>
Your HTML onclick function now passes 'event' as an argument, this event object will be used in your script to cancel the normal form submission operation while you get your email values and evaluate them.
This is achieved with the help of event.preventdefault() function which stops the default qoperation of a form which is to submit information.
Side Note: I'd recommend that you use PHP and database for login purposes, having your login credentials in your script like this is dangerous as someone can easily go through your code and see them.
Good luck on your project.
I currently have a problem with a "onsubmit" call on my form.
The goal is to use a iframe in an overlay to update another iframe behind that overlay.
Whenever I try to update the "background" iframe using a button ("onclick") and this code:
parent.document.getElementById('frame_login').src=parent.document.getElementById('frame_login').src;
It works everytime.
But if I try to do it on the form "onsubmit":
It does not work the first time (the "background" iframe is not updated) but it does work the second time, although, the refresh will give the result it was supposed to on the first time. Here is an example:
I open the overlay and I login, the overlay displays that I am logged in but the "background" iframe does not change.
I click logout on the overlay, the overlay displays that I am logged out, the "background" iframe shows that I am logged in.
I login again using the overlay, the overlay will say that I am logged in, but the "background" iframe will now say that I am logged out.
I am aware that the "onsubmit" code is not exactly executed the same way that an "onclick" is, but I was unable to find a solution thus far, is there any way to fix this behavior please? Perhaps a different approach?
Here is the code of the "background" iframe:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td><iframe src="user.php" width="100%" height="70px" frameborder="0" id="frame_login" name="frame_login"></iframe>
</td>
</tr>
</table>
Here is the code of the overlay iframe:
<?
include('config.php')
?>
<script>
function myFunction() {
parent.document.getElementById('frame_login').src=parent.document.getElementById('frame_login').src;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?
if($user->data['is_registered'])
{
//User is already logged in to phpBB
?>
<form method="post" action="phpBB_logout.php" onSubmit="return myFunction()"/>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0" style="height:25px;"/>
<tr>
<td align="center">Welcome</td>
<td align="center"><? echo $user->data['username'] ?></td>
<td align="center"><input type="submit" value="Logout"/></td>
</tr>
</table>
</form>
<?
}
else
{
?>
<form method="post" action="phpBB_login.php" onSubmit="return myFunction()"/>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="height:25px;">
<tr>
<td align="center">Username:
<input type="text" size="20" name="username" /></td>
<td align="center">Password:
<input type="password" size="20" name="password" /></td>
<td align="center"><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
<?
}
?>
<input type="button" size="30" name="button" onClick="myFunction()" value="Button"/>
</body>
</html>
Please note that "onclick" on the form does the same behavior as the "onsubmit" (I tried to set the "onclick" on the submit input on the form: <input type="submit" value="Submit" onClick="myFunction()"/>.
Thank you for your time and help, it's greatly appreciated.
i have written a simple jquery to enable textboxes on the click of button but the when i click , for a second the textbox enables and then goes to disabled state again
code is :
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Profile Page</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//malsup.github.com/jquery.form.js"></script>
<script>
$(function(){
$("#edit").click(function () {
$('*').prop('disabled',false);
});
});
</script>
</head>
<body>
<center><h1>User Profile</h1></center><br><br>
<form action="" method="post">
<table>
<tr>
<td> User ID </td> <td> <input type="text" name="uid" disabled>
</td>
</tr>
<tr>
<td>First Name </td> <td><input type="text" name="fname" disabled> </td>
</tr>
<tr>
<td> Last Name </td> <td><input type="text" name="lname" disabled> </td>
</tr>
<tr>
<td> Email </td> <td><input type="text" name="email" disabled> </td>
</tr>
<tr>
<td> Country </td> <td><input type="text" name="country" disabled> </td>
</tr>
<tr>
<td> <input type="Submit" value="Edit" id="edit"> </td>
<td> <input type="Submit" value="Update" onclick="update()"> </td>
</tr>
</table>
</form>
</body>
</html>
i have also added the json jar in the libraries
Your click handler doesn't cancel the default behaviour of the button, which is to submit the form. The form's action is blank, so a submit basically reloads the page.
You could change the button so that it isn't a submit button (and thus has no default behaviour):
<input type="button" value="Edit" id="edit">
Or you could change your JS to cancel the default behaviour:
$("#edit").click(function (e) {
e.preventDefault(); // <-- add this, and add the 'e' argument to the function
$('*').prop('disabled',false);
});
It's becuase you're using <input type='submit'...
please use <input type='button'.... you will be able to enable all input boxes.
With type=submit the form gets submitted and the page reloaded again, so the input box's property "disabled" is applied again.
Hope this helps!
i have 2 files testjquery.php and abcd.php
on form submit calling ajax call and submitting it with ajax method. first times it prevents the forms defaultevent using event.preventdefault and loads response data from the other page into the div .
But when again i try to submit it, the event.preventdefault doesnt work on the form.
Please help. Thanks in advance.
// testjquery.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="abc">
<form action="abcd.php" method="post" accept-charset="utf-8" name="cartform">
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th>QTY</th>
<th>Item Description</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<input type="hidden" name="cartrowid[1]" value="d68b70f3503216b22484eef9c786124a" />
<tr>
<td><input type="text" name="cartrowqty[1]" value="1" maxlength="3" size="5" /></td>
<td> micromax_A12112
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">123.00</td>
<td style="text-align:right">$123.00</td>
</tr>
<input type="hidden" name="cartrowid[2]" value="e376db925db6430cf3e82c3854b4f5e2" />
<tr>
<td><input type="text" name="cartrowqty[2]" value="1" maxlength="3" size="5" /></td>
<td> Indian_Saree
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">2,555.00</td>
<td style="text-align:right">$2,555.00</td>
</tr>
</table>
<p>
<input type="submit" name="add_item_via_ajax_form" value="Update your Cart" class="add_item_via_ajax_form" />
</p>
</form>
Go to W3Schools.com
<p>The preventDefault() method will prevent the link above from following the URL.</p>
</div>
</body>
</html>
<script>
$(function()
{
// Example of adding a item to the cart via a link.
$('.add_item_via_ajax_form').click(function(event)
{
alert(1);
event.preventDefault();
// Get the parent form.
var parent_form = $(this).closest('form');
// Get the url the ajax form data to be submitted to.
var submit_url = parent_form.attr('action');
// Get the form data.
var $form_inputs = parent_form.find(':input');
var form_data = {};
$form_inputs.each(function()
{
form_data[this.name] = $(this).val();
});
$.ajax(
{
url: submit_url,
type: 'POST',
data: form_data,
success:function(data)
{
//alert(data);
event.preventDefault();
ajax_update_mini_cart(data);
}
});
});
// A function to display updated ajax cart data from the mini cart menu.
function ajax_update_mini_cart(data)
{
$('#abc').html(data);
$('#mini_cart_status').show();
// Set the new height of the menu for animation purposes.
var min_cart_height = $('#mini_cart ul:first').height();
$('#mini_cart').attr('data-menu-height', min_cart_height);
$('#mini_cart').attr('class', 'js_nav_dropmenu');
// Scroll to the top of the page.
$('body').animate({'scrollTop':0}, 250, function()
{
// Notify the user that the cart has been updated by showing the mini cart.
$('#mini_cart ul:first').stop().animate({'height':min_cart_height}, 400).delay(3000).animate({'height':'0'}, 400, function()
{
$('#mini_cart_status').hide();
});
});
}
});
</script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
</script>
//abcd.php
<form action="abcd.php" method="post" accept-charset="utf-8" name="cartform">
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th>QTY</th>
<th>Item Description</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<input type="hidden" name="cartrowid[1]" value="d68b70f3503216b22484eef9c786124a" />
<tr>
<td><input type="text" name="cartrowqty[1]" value="1" maxlength="3" size="5" /></td>
<td> micromax_A12112
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">123.00</td>
<td style="text-align:right">$123.00</td>
</tr>
<input type="hidden" name="cartrowid[2]" value="e376db925db6430cf3e82c3854b4f5e2" />
<tr>
<td><input type="text" name="cartrowqty[2]" value="1" maxlength="3" size="5" /></td>
<td> Indian_Saree
<p> <strong>Size:</strong> L<br />
<strong>Color:</strong> Red<br />
</p></td>
<td style="text-align:right">2,555.00</td>
<td style="text-align:right">$2,555.00</td>
</tr>
</table>
<p>
<input type="submit" name="add_item_via_ajax_form" value="Update your Cart" class="add_item_via_ajax_form" />
</p>
</form>
Go to W3Schools.com
<p>The preventDefault() method will prevent the link above from following the URL.</p>
The line
$('#abc').html(data);
replaces all content of the div id="abc" with the new html code from the ajax request.
This new content does not have any event handler attached and the form is submitted the 'normal' way. To fix it, you must add a new
$('.add_item_via_ajax_form').click(function(event) {}
in your
function ajax_update_mini_cart(data) {}
after
$('#abc').html(data);
This will add the handler and the form will be submitted via ajax every time.
You should delegate event, e.g:
$('#abc').on('click', '.add_item_via_ajax_form', function(event){
//...
});
See #my question's comment regarding FORM submit instead
I am having a List in html page, which should get Updated on the Click of Button.
I am also having a textfield and Button. value entered in textfield should display in listbox on click of Button.
This is my Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function addsoap(form1)
{
if(document.form1.datafile.value=="")
{
alert("Select a File First");
}
else
{
var soap=document.getElementById("right1");
var newsoap=document.createElement('option');
newsoap.text=document.form1.datafile.value;
newsoap.value=document.form1.datafile.value;
soap.add(newsoap);
}
}
</script>
</head>
<body>
<table align='center'>
<form name="form1">
<tr>
<td>Please specify a file, or a set of files:<br>
<input type="file" name="datafile" size="40">
</td>
</tr>
<tr>
<td><input type=button value="ADD" onclick="addsoap(form1)" ></td>
</tr>
<tr>
<td align="right"><select id="right1" size="10" multiple>
<option>AAAAAAAAAAAAAAAAAAAAAAAAA</option>
</select></td>
</tr>
</form>
</table>
</body>
</html>
instead of .add method use .appendChild Method