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!
Related
I have a jsp page where i am displaying value from data base .
Now i need to edit the table value in click of that particular row and that selected row value should get set into respective input text .
My java script function is getting called but clicked value is not getting displayed into respective input type .
The java script function name is onRowClick
I am adding code for that .
Please suggest .
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
function onRowClick(){
var table = document.getElementById("hoteltable"),rIndex;
for(var i = 0; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
document.getElementByName("hId").value = this.cells[0].innerHTML;
document.getElementByName("hName").value = this.cells[1].innerHTML;
document.getElementByName("hArea").value = this.cells[2].innerHTML;
document.getElementByName("hNumOfRooms").value = this.cells[3].innerHTML;
document.getElementByName("hImgUrl").value = this.cells[4].innerHTML;
hideButton();
showDelete();
showEdit();
};
}
}
</script>
</head>
<body>
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form:form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td><form:input name="hId" path="hotelId"></form:input></td>
<td><form:errors path="hotelId" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelName:</td>
<td><form:input name="hName" path="hotelName"></form:input></td>
<td><form:errors path="hotelName" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelArea:</td>
<td><form:select name="hArea" path="hotelArea">
<form:option value="Marthalli">Marathalli</form:option>
<form:option value="SilkBoard">SilkBoard</form:option>
</form:select></td>
<td><form:errors path="hotelArea" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td><form:input name="hNumOfRooms" path="hotelNumOfRooms"></form:input></td>
<td><form:errors path="hotelNumOfRooms" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td><form:input name="hImgUrl" path="hotelImgUrl"></form:input></td>
<td><form:errors path="hotelImgUrl" cssClass="error"></form:errors></td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"></input> <br> <br>
<input type="submit"value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"></input><br> <br>
<input type="reset"value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form:form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td><h4>hotelId</h4></td>
<td><h4>hotelName</h4></td>
<td><h4>hotelArea</h4></td>
<td><h4>hotelNumOfRooms</h4></td>
<td><h4>hotelImageUrl</h4></td>
</tr>
<c:forEach var="hotels" items="${hotelList}">
<tr onclick="onRowClick()">
<td >${hotels.hotelId}</td>
<td>${hotels.hotelName}</td>
<td>${hotels.hotelArea}</td>
<td>${hotels.hotelNumOfRooms}</td>
<td>${hotels.hotelImgUrl}</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
If you look in the web console, you'll find an error message. There is no document.getElementByName function in the DOM. There's getElementsByName (plural), but not a singular, and that one wouldn't really help you since it would give you a collection of all of the elements with that name, anywhere on the page. (Although if the only ones with those names are the ones you want, you could use it and then use [0] to get the only entry in the resulting collection.)
There's a different problem, though: Your click="onRowClick()" doesn't pass on any information about which row was clicked, and the function itself just hooks up event handlers on the rows rather than actually doing what you want done on click.
Instead, hook click on the table, and check to see if the click passed throug a row; if it did, fill in the information in the first table. See comments:
// Hook click on the table, rather than individual rows
document.getElementById("hoteltable").addEventListener("click", function(e) {
// Make sure the click passed through a row in this table
var row = e.target.closest("tr");
if (!row || !this.contains(row)) {
return;
}
// Get the form we're filling in
var form = document.querySelector("form[action=hotelaction]");
// Fill in the various inputs
// Note: I'd recommend giving each cell a data-name attribute or something
// and using those rather than using `row.cells[0]` and such. That way
// when (not if ;-) ) you change the source table, the cell references
// aren't messed up
form.querySelector("[name=hId]").value = row.cells[0].innerHTML;
form.querySelector("[name=hName]").value = row.cells[1].innerHTML;
form.querySelector("[name=hArea]").value = row.cells[2].innerHTML;
form.querySelector("[name=hNumOfRooms]").value = row.cells[3].innerHTML;
form.querySelector("[name=hImgUrl]").value = row.cells[4].innerHTML;
/*
hideButton();
showDelete();
showEdit();
*/
});
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td>
<input name="hId" path="hotelId">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelName:</td>
<td>
<input name="hName" path="hotelName">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelArea:</td>
<td>
<select name="hArea" path="hotelArea">
<option value="Marthalli">Marathalli</option>
<option value="SilkBoard">SilkBoard</option>
</select>
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td>
<input name="hNumOfRooms" path="hotelNumOfRooms">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td>
<input name="hImgUrl" path="hotelImgUrl">
</td>
<td>
<span class="error"></span>
</td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"><br> <br>
<input type="submit" value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"><br> <br>
<input type="reset" value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td>
<h4>hotelId</h4>
</td>
<td>
<h4>hotelName</h4>
</td>
<td>
<h4>hotelArea</h4>
</td>
<td>
<h4>hotelNumOfRooms</h4>
</td>
<td>
<h4>hotelImageUrl</h4>
</td>
</tr>
<tr>
<td>1</td>
<td>Savoy</td>
<td>Marthalli</td>
<td>300</td>
<td>https://via.placeholder.com/150?text=Savoy</td>
</tr>
<tr>
<td>2</td>
<td>Marriott</td>
<td>SilkBoard</td>
<td>450</td>
<td>https://via.placeholder.com/150?text=Marriott</td>
</tr>
<tr>
<td>3</td>
<td>Premier Inn</td>
<td>Marthalli</td>
<td>150</td>
<td>https://via.placeholder.com/150?text=Premier+Inn</td>
</tr>
</table>
</div>
Note that I removed from JSP- or template-isms from the HTML in that, so it used standard form inputs. I assume what gets delivered to the browser uses standard form elements.
I want to to add class to input field the button it click. I search a lot but I did not found a satisfactory result. All I want to is to add class red to my input field when the submit button is click.
<style>
.red{background-color:red;}
</style>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="formController">
<form action='#' method="POST" formvalidation novalidate>
<table>
<tr>
<td>Name</td>
<td><input name="name" type="text" id="name" ng-model="person.Name" required></td>
</tr>
<tr>
<td>age</td>
<td><input name="age" id="age" type="number" ng-model="person.age" required min="10" max="20"></td>
</tr>
<tr>
<td>
<input id="submit" type="submit" value="submit" />
</td>
</tr>
</table>
</form>
</div>
I tried to create a directive on form element and define a custom directive
but its not working and fix-bug did not show any error is code.
var myapp=angular.module("myapp",[]);
myapp.controller('formController',function($scope){
});
myapp.directive("formvalidation",function(){
var directive={}
directive=function(scope,element,attrs)
{
var test=angular.element().find('#name');
var button=angular.element().find("#submit");
$(button).on('click',function(){
$(test).addClass('red');
});
}
return {
restrict: 'E',
link: directive
};
});
This is my html code for form
<form action="add.php" method="post">
<table style="border: 1px solid black;padding:20px;" cellspacing="1px">
</br>
</br>
<tr>
<td>Issue No:</td>
<td>
<input name="issueno" type="text" id="issueno" />
</td>
<td>Issue Date:</td>
<td>
<input name="issuedate" type="date" id="issuedate" />
</td>
</tr>
</br>
</br>
<tr></tr>
<tr>
<td>Item Code:</td>
<td>
<input name="itemcode" type="text" id="itemcode" />
</td>
<td>Description:</td>
<td>
<input name="des" type="text" style="width:250px; height:23px" id="desc" />
</td>
<td>Bal Quantity:</td>
<td>
<input name="bal" type="text" id="bal" />
</td>
</tr>
</br>
<tr>
<td>Issue Quantity:</td>
<td>
<input name="issuequ" type="text" id="issuequ" />
</td>
</tr>
</br>
<tr></tr>
<tr>
<td>Remark:</td>
<td>
<input name="remark" type="text" style="width:250px; height:23px" id="remark" />
</td>
</tr>
</br>
<tr>
<td colspan="6">
<center>
<input type="submit" value="submit">
</center>
</td>
</tr>
</table>
</form>
So I want to disable submit button if issue quantity is more than bal quantity and remain enable if issue quantity is less than bal quantity. And I am getting bal quantity on change of item code from ajax call. So how Do I do it??
<script>
/**
* the submit handler...
*/
function checkBeforeSubmit() {
// build your own condition ... :)
if(CONDITION == false) {
alert("You can not submit...");
}else {
// all is good ? so we submit the form ....
document.myForm.submit();
}
}
</script>
<form name="myForm" action="add.php" method="post">
...
<!-- i have changed the type from submit to button and add a handler to execute basic JavaScript function-->
<input type="button" value="submit" onClick="checkBeforeSubmit();">
</form>
Why not you try yo Add/remove disabled attribute to the submit button on qtty change.
This is my working code...
$('#issuequ').blur(function(){
var issueqty = $(this).val();
var bal = $('#bal').val();
if(issueqty > bal){
$('input[type="submit"]').attr('disabled','disabled');
} else if (issueqty < bal){
$('input[type="submit"]').removeAttr('disabled');
}
});
I am here disabling submit on change of issuequ otherwise remain active.
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 new to html, javascript, and css.
I do not know why, but my cancel button is not working at all.
<!DOCTYPE html>
<html>
<head>
<!-- set the page title and link with java script and css files -->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="hw4.css">
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</table>
</section>
</body>
</html>
when I run this code, everything works well, but the cancel button is not working.
I think I did something wrong, because it worked like 30 mins ago, but
now it is not working at all and I cannot figure out what is wrong...!!
You have no form tag. A reset-button clears values inside a form.
2 Solutions:
Wrap your input-elements inside a <form><!-- elements here --></form>
Write a piece of script to clear the elements you want to clear when you click on the clear-button.
Try This:
Reset button only working for form tag. So please add form tag in your code as I shown in demo.
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<form>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</form>
</table>
</section>
</body>
</html>
Enjoy :)