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
Related
help me, for the same result in textboxt result when i added value on textbox nilai 1 from popup,
I am confused what event should I use in java script for my case.
I tried using onChange event but it didn't work
here is my code
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method='post' action='' name='myF'>
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onchange="sameresult()">
<a href="javascript:void(0);" NAME="My Window Name" title=" My title here "
onClick='javascript:window.open("pop_up.html","Ratting",
"width=550,height=170,left=150,top=200,toolbar=1,status=1,");'> Cari</a>
<br>
<br>
Result :<input type=text name='result' id='result' size='20'>
</form>
<script langauge="javascript">
function sameresult(){
var a = document.getElementById('nilai1');
var result = document.getElementById('result');
result.value = a.value;
}
</script>
</body>
</html>
pop_up.html
<html>
<head>
<script langauge="javascript">
function post_value(s){
opener.document.getElementById('nilai1').value = s;
self.close();
}
</script>
<title>Popup</title>
</head>
<body>
<table border='1'>
<tr>
<td>No</td>
<td>Value</td>
<td>Action</td>
</tr>
<tr>
<td>1</td>
<td>200</td>
<td>Select</td>
</tr>
<tr>
<td>2</td>
<td>300</td>
<td>Select</td>
</tr>
</form>
</body>
</html>
you can use onkeypress event like
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onkeypress="sameresult()">
I have created a table with a search bar which will allow me to filter the data based on what I type in the search bar. The problem I have is with the reset button I created. What I want is for the search bar to be cleared and the table to return back to its original state showing all the data (NOT the filtered data)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/RichStyle.css">
<!-- Custom Made CSS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/toggle.js"></script>
<script src="js/jquery%201.4.4.min.js"></script>
<!-- JS -->
<!-- Slide Toggle -->
<script type="text/javascript">
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
</script>
<!-- Search Bar -->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#search').keyup(function() {
searchTable($(this).val());
});
});
function searchTable(inputVal) {
var table = $('#searchTable');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}
});
if (found == true)
$(row).show();
else
$(row).hide();
}
});
}
</script>
<title>Report Page</title>
</head>
<body>
<div>
<p>
<form>
<label for="search"></label>
<input type="text" id="search" placeholder="Enter Search Term" />
<input type="reset" value="Reset" />
</form>
</p>
<table id="searchTable">
<thead>
<tr>
<th>User ID</th>
<th>Website</th>
<th>Hours Spent</th>
<th>Data Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>Luke</h2></td>
<td><h3 id="Luke">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Luke").innerHTML = website.length;
</script></h3><p>Facebook</p><p>Youtube</p></td>
<td><h3>2.5h</h3><p>2h</p><p>0.5h</p></td>
<td><h3>1.3gb</h3><p>3mb</p><p>1gb</p></td>
</tr>
<tr>
<td><h2>John</h2></td>
<td><h3 id="John">
<script>
var website = ["Youtube"];
document.getElementById("John").innerHTML = website.length;
</script></h3><p>Youtube</p></td>
<td><h3>3h</h3><p>3h</p></td>
<td><h3>1gb</h3><p>1gb</p></td>
</tr>
<tr>
<td><h2>Peter</h2></td>
<td><h3 id="Peter">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Peter").innerHTML = website.length;
</script></h3><p>Facebook</p><p>Youtube</p></td>
<td><h3>1.75h</h3><p>1.5h</p><p>0.25h</p></td>
<td><h3>1.3gb</h3><p>3mb</p><p>1gb</p></td>
</tr>
</tbody>
</table>
</div>
<button onclick="window.print()">Print Report</button>
<!-- Javascript Coding - No Colours Displayed On Print Preview-->
<button>Save Report</button>
<!-- Save Button Does Not Work, Fix Needed-->
</body>
</html>
IF you want to use the <input type="reset" /> tag, the elements you can reset must be editable, i.e. you can type whatever you want into it, so
input type="text"
input type="password"
input type="email"
etc. . .
The above are editable.
So if what you want is that, you have no more data in your table you can use JQuery, here's an example using input reset
$(function(){ // this is === to document.ready
$("#the-table .ins").val("some value here ");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- the tags that you can enter text into can be reset if they resied within the same form that contains the reset button -->
<form action="some url" method="post">
First name: <input type="text" name="firstname" /> <br />
Surname: <input type="text" name="surname" /><br />
<input type="reset" value="Clear form" />
<input type="submit" value="Submit now" />
</form>
<hr />
With a table:
<!-- so when the page loads, we use JQuery to insert so value to your table -->
<form action="some url" method="post">
<table id="the-table">
<tr><td><input class="ins" type="text" /></td>
<td><input class="ins" type="text" /></td>
</tr>
</table>
<input type="reset" value="Clear form" />
</form>
and here's an example using jquery to clear the table data
$(function(){
$('#reset-btn').click(function(){
$('table tr').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>click on the table to remove data </h2>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<button id="reset-btn">reset data</button>
#esteban rincon is right, <input type="reset" value="Reset" /> can reset your form input but won't clear any other HTML content.
You need to clear by your self.
For example you can add id attribute in your reset button and add onClick event to clear your searchTable like $('#searchTable').empty();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/RichStyle.css">
<!-- Custom Made CSS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/toggle.js"></script>
<script src="js/jquery%201.4.4.min.js"></script>
<!-- JS -->
<!-- Slide Toggle -->
<script type="text/javascript">
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function() {
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
</script>
<!-- Search Bar -->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#search').keyup(function() {
searchTable($(this).val());
});
//Add this for reset click reset your search record
$('#resetAll').click(function() {
$('#searchTable tbody').empty();
});
});
function searchTable(inputVal) {
var table = $('#searchTable');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}
});
if (found == true)
$(row).show();
else
$(row).hide();
}
});
}
</script>
<title>Report Page</title>
</head>
<body>
<div>
<p>
<form>
<label for="search"></label>
<input type="text" id="search" placeholder="Enter Search Term" />
<!-- add id resetAll -->
<input id="resetAll" type="reset" value="Reset" />
</form>
</p>
<table id="searchTable">
<thead>
<tr>
<th>User ID</th>
<th>Website</th>
<th>Hours Spent</th>
<th>Data Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>Luke</h2>
</td>
<td>
<h3 id="Luke">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Luke").innerHTML = website.length;
</script></h3>
<p>Facebook</p>
<p>Youtube</p>
</td>
<td>
<h3>2.5h</h3>
<p>2h</p>
<p>0.5h</p>
</td>
<td>
<h3>1.3gb</h3>
<p>3mb</p>
<p>1gb</p>
</td>
</tr>
<tr>
<td>
<h2>John</h2>
</td>
<td>
<h3 id="John">
<script>
var website = ["Youtube"];
document.getElementById("John").innerHTML = website.length;
</script></h3>
<p>Youtube</p>
</td>
<td>
<h3>3h</h3>
<p>3h</p>
</td>
<td>
<h3>1gb</h3>
<p>1gb</p>
</td>
</tr>
<tr>
<td>
<h2>Peter</h2>
</td>
<td>
<h3 id="Peter">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Peter").innerHTML = website.length;
</script></h3>
<p>Facebook</p>
<p>Youtube</p>
</td>
<td>
<h3>1.75h</h3>
<p>1.5h</p>
<p>0.25h</p>
</td>
<td>
<h3>1.3gb</h3>
<p>3mb</p>
<p>1gb</p>
</td>
</tr>
</tbody>
</table>
</div>
<button onclick="window.print()">Print Report</button>
<!-- Javascript Coding - No Colours Displayed On Print Preview-->
<button>Save Report</button>
<!-- Save Button Does Not Work, Fix Needed-->
</body>
</html>
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
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;
}