hi i want to trim the left space through java script when the value came from database i have used jsp tag for getting the value and loded these value in input field . i m facing problem when some space occur in starting of value then not even single value get printed in all input field
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function getValue() {
<jsp:useBean id="ProjectBO"
class="com.nousinfo.tutorial.employee.service.model.bo.EmployeeProjectBO"
scope="request" />
document.getElementById("empNumber").value = '<jsp:getProperty property="employeeNumber" name="ProjectBO"/>';
document.getElementById("projectCode").value = '<jsp:getProperty property="projectCode" name="ProjectBO"/>';
document.getElementById("startDate").value = '<jsp:getProperty property="startDate" name="ProjectBO"/>';
document.getElementById("endDate").value = '<jsp:getProperty property="endDate" name="ProjectBO"/>';
document.getElementById("role").value = '<jsp:getProperty property="role" name="ProjectBO"/>';
}
</script>
</head>
<body onload="getValue()">
<form id="employee" action="ProjectUpdateServlet" method="post">
<table width="1254" height="74" border="0" align="center">
<tr>
<td width="970" height="68" align="center" bgcolor="#99CCFF"><h2>
<span class="style1">Project Detail</span>
</h2></td>
<td width="274" height="68" align="center" bgcolor="#FFFFFF"><img
src="/image/Emp.jpg" width="190" height="92" /></td>
</tr>
</table>
<p>
<br />
</p>
<hr size="1" width="786">
<table width="786" border="0" align="center">
<tr>
<td><input type="hidden" name="updateStatusProject" value="M" /></td>
</tr>
<tr>
<td width="298">Employee Number:</td>
<td><input type="text" id="empNumber" name="employeeNumber" readonly="readonly" />
</td>
<tr>
<td>Project_Code:</td>
<td><input type="text" name="projectCode" id="projectCode" readonly="readonly"/>
</td>
</tr>
<tr>
<td>Start_date</td>
<td><input type="text" name="startDate" id="startDate" /></td>
</tr>
<tr>
<td>End_date</td>
<td><input type="text" name="endDate" id="endDate" /></td>
</tr>
<tr>
<td>Role</td>
<td><input type="text" name="role" id="role" /></td>
</tr>
</table>
<p> </p>
<br />
<table width="200" border="0" align="center">
<tr>
<td><center>
<input type="submit" name="submit" value="Save" onclick="self.close()"/>
</center></td>
<td><center>
<input type="button" name="cancle" value="Cancel"
onclick="self.close()">
</center></td>
</tr>
</table>
<hr size="1" width="786">
<p> </p>
</form>
</body>
</html>
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
return this.replace(/\s+$/,"");
}
// example of using trim, ltrim, and rtrim
var myString = " hello my name is ";
alert("*"+myString.trim()+"*");
alert("*"+myString.ltrim()+"*");
alert("*"+myString.rtrim()+"*");
JavaScript has replace which can accept a regular expression for the search term, so if you want to remove leading spaces:
str = str.replace(/^\s+/, '');
The ^ means "start of input", the \s means "any whitespace character", and the + means "one or more of the previous thing". So in total, the regex means "Whitespace characters at the beginning of the input". And we replace them with ''.
If you wanted to remove trailing spaces, instead of ^ at the beginning you'd have $ at the end ($ = "end of input"):
str = str.replace(/\s+$/, '');
Related
I have 5 dynamic divisions. Each division holds some text boxes, among which every division has one set of particular text fields, where, if user put any data into the first text box within those set of textboxes then it should appear in a previous readonly text box which is not a part of those divisions. again if user put any data into the second text box within those set of textboxes, then their addition will be shown in the previous readonly text box.
Here I am going to attach the whole code which I have tried till now. But I couldn't get the desired result.
<%#page import="beans.*"%>
<%#page import="java.util.*" %>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>div data entry</title>
</head>
<body>
<br>
<div class="transbox">
<form action="dataentryservletclass" method="post">
<center>
<table><tr><td>Class Name</td> <td><input type="text" name="c_cname"></td>
<td>Class ID</td> <td><input type="text" name="c_cid" placeholder="Enter a Text"></td></tr>
<tr><td>Class Start Date</td> <td><input type="date" name="c_csdate"></td>
<td>Total Marks</td> <td><input type="text" name="c_tmarks" id="txttotal" readonly></td>
</tr></table>
No. of Students <select class="selectbtn" name="c_nos" onchange="myFunction(this)">
<option>Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="myDIV1" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<div id="myDIV2" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname2"></td>
<td><input type="text" name="c_sroll2"></td>
<td><input type="text" id="txt2" name="c_marks2" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<div id="myDIV3" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname2"></td>
<td><input type="text" name="c_sroll2"></td>
<td><input type="text" id="txt2" name="c_marks2" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname3"></td>
<td><input type="text" name="c_sroll3"></td>
<td><input type="text" id="txt3" name="c_marks3" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<script>
function myFunction(objDrop) {
var a = document.getElementById("myDIV1");
var b = document.getElementById("myDIV2");
var c = document.getElementById("myDIV3");
if(objDrop.value=="1"){
if (a.style.display === "none") {
a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
}
else {
a.style.display = "none";
}
}
else if(objDrop.value=="2"){
if (b.style.display === "none") {
a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
}
else {
b.style.display = "none";
}
}
else if(objDrop.value=="3"){
if (c.style.display === "none") {
a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
}
else {
c.style.display = "none";
}
}
}
function sum(){
var x=document.getElementById('txt1').value;
var y=document.getElementById('txt2').value;
var z=document.getElementById('txt3').value;
if(x==""){
x=0;
}
if(y==""){
y=0;
}
if(z==""){
z=0;
}
var result=parseInt(x)+parseInt(y)+parseInt(z);
if(!isNaN(result)){
document.getElementById('txttotal').value=result;
}
}
</script>
</center>
<hr><hr>
<button type="submit" value="Submit" class="submitbtn" style="float:right">Submit</button>
</form>
</div>
</body>
</html>
I made a mockup of what you described, using the onkeyup event to trigger the javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
<script type="text/javascript">
function display(){
var resultBox = document.getElementById("resultbox");
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var result = input1.value + input2.value;
resultBox.value = result;
}
</script>
</head>
<body>
<input id="resultbox" type="text" readonly />
<form>
<input type="text" id="input1" onkeyup="display();" onchange="display();" />
<input type="text" id="input2" onkeyup="display();" onchange="display();" />
</form>
</body>
</html>
Let me know if this is what you are trying to accomplish.
Use: "onchange" event for textbox
You could use the keyup and keypress events as well.
Eg: <input type="text" id="input1" onchange="yourFunction()" />
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
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
im completly new to js , i made this form for a project we got # university but js doesnt seem to work at all. I dont get any errors, it is just doesnt work ! I got my Javascript enabled , and i full disabled No script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'];?>"/>
<script type="text/javascript">
function validate_f() {
var result=true;
var username=document.getElemenetById('username').value;
var illegalChars = /\W/;
var x=document.getElemenetById('email').value;
var pwd=document.getElemenetById('password').value;
if (illegalChars.test(username) || username.length>25) {
result=false;
alert("Username must be latin chars and not more than 25 characters");
}
if (x==null || x=="" || username == null || username=="" || pwd == null || pwd == "" || afm == null || afm == "" ) {
result=false;
alert("you have to fill up all the Boxes dude");
}
return result;
}
<div id="main">
<div id="formcontainer">
<form id="data" name="data" action="connection.php" method="POST" on submit="return validate_f()">
<table width="100%" cellpadding="3" cellspacing="2">
<tr>
<td width="25%"> </td>
</tr>
<tr>
<td class="right" width="20%"> <strong> Username </strong> </td>
<td>
<input type="text" name="username" id="username" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Password</strong> </td>
<td>
<input type="password" name="password" id="password" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Email</strong> </td>
<td>
<input type="text" name="email" id="email"/>
</td>
</tr>
<?php
/*
<tr>
<td class="right"> <strong> Security Code: </strong> </td>
<td>
<img src="CaptchaSecurityImages.php" alt="" />
<input id="security_code" name="security_code" type="text" />
</td>
</tr>
*/
?>
<tr>
<td>
<input name="reset" type="reset" id="reset" value="Reset" />
<input name="submit" type="submit" id="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</div>
</div>
There is no space between onsubmit event
<form id="data" name="data" action="connection.php" method="POST" onsubmit="return validate_f()">
There's a spelling mistake -
document.getElemenetById('password').value
var username=document.getElemenetById('username').value;
Should be
document.getElementById('password').value
var username=document.getElementById('username').value;
Ref: https://developer.mozilla.org/en/DOM/document.getElementById
there is a space between on & submit. Try this line of form tag...
<form id="data" name="data" action="connection.php" method="POST" onsubmit="return validate_f()">
and also
Your div's should inside the <form> tag.
Close the </script> tag, before the start of <form>.
Close the </head> tag before start the <form> tag.
Close the </html> tag at the end of the html page.
Try this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'];?>"/>
<script type="text/javascript">
function validate_f() {
var result = true;
var username = document.getElemenetById('username').value;
var illegalChars = /\W/;
var x = document.getElemenetById('email').value;
var pwd = document.getElemenetById('password').value;
if (illegalChars.test(username) || username.length > 25) {
result = false;
alert("Username must be latin chars and not more than 25 characters");
}
if (x == null || x == "" || username == null || username == "" || pwd == null || pwd == "" || afm == null || afm == "") {
result = false;
alert("you have to fill up all the Boxes dude");
}
return result;
}
</script>
</head>
<body><div id="main">
<div id="formcontainer">
<form id="data" name="data" action="connection.php" method="POST" on submit="return validate_f()">
<table width="100%" cellpadding="3" cellspacing="2">
<tr>
<td width="25%"> </td>
</tr>
<tr>
<td class="right" width="20%"> <strong> Username </strong> </td>
<td>
<input type="text" name="username" id="username" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Password</strong> </td>
<td>
<input type="password" name="password" id="password" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Email</strong> </td>
<td>
<input type="text" name="email" id="email"/>
</td>
</tr>
<?php
<tr>
<td class="right"> <strong> Security Code: </strong> </td>
<td>
<img src="CaptchaSecurityImages.php" alt="" />
<input id="security_code" name="security_code" type="text" />
</td>
</tr>
<tr>
<td>
<input name="reset" type="reset" id="reset" value="Reset" />
<input name="submit" type="submit" id="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
I'm trying to run a javascript menthod on an input="image" in html. My code in my html looks like this:
onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); "
and in my javascript the method is like this:
function manageHandlers(parameter){
alert("It's working: "+parameter);
}
Is there something I'm doing wrong? I could sware this worked yesterday but today it's just not doing anything.
Thanks for looking at this!
full html code:
<%--
Document : pathologist
Created on : 16 Nov 2011, 09:53:58 AM
Author : dean.grobler
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%# taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%# taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%# page import="javax.portlet.*"%>
<%# page import="co.za.lancet.medelogget.*" %>
<%# page import="java.util.ArrayList" %>
<%# page import="com.liferay.portal.kernel.servlet.*" %>
<%#page import="com.liferay.portal.kernel.util.Validator" %>
<portlet:defineObjects />
<%
String editable = request.getParameter("editable");
String selectedValue = request.getParameter("selectedValue");
int selectedIndex = 0;
if (selectedValue != null) {
selectedIndex = Integer.parseInt(selectedValue);
}
ArrayList<String> data = tableData.getTableData(selectedIndex, "consumers", "code");
String AvailableJavaScript = tableData.consumersAvailableHandlers(data.get(0));
String AssignedJavaScript = tableData.consumersAssignedHandlers(data.get(0)); //data.get(0) is the whereclause
%>
<!-- -------------------------Interface Starts here------------------------- -->
<aui:layout>
<form name="consumerDetails" action="<portlet:actionURL ><portlet:param name="consumers" value="consumers"/></portlet:actionURL>" method="post">
<input type="hidden" value="consumers" name="formType" />
<input type="hidden" value="<%=selectedValue%>" name="selectedValue" />
<input type="hidden" value="" id="button" name='button' />
<aui:column columnWidth="50">
<h3>
<%if (editable.equals("")) {%>
Edit Consumer
<%} else {%>
Consumer Details
<%}%>
<%%>
</h3>
<div class="horizontalRules"><hr class></div>
<div id="successAndErrorMessages"></div>
<table width="100%">
<tr height="35px"><td width="25%">Code:</td><td><input type="text" value="<%=data.get(0)%>" name="code" class="textBoxes" <%=editable%>></td></tr>
<tr height="35px"><td width="25%">Description:</td><td><input type="text" value="<%=data.get(1)%>" name="description" class="textBoxes" <%=editable%>></td></tr>
</table>
</aui:column>
</form>
</aui:layout>
<!-- --------------------Handler rules section---------------------- -->
<%if (editable.equals("")) {%>
<aui:layout>
<aui:column columnWidth="100">
<h3>Manage Handler Rules</h3>
<div class="horizontalRules"><hr class></div>
</aui:column>
</aui:layout>
<aui:layout>
<form name="manageHandlers" id="formType" action="<portlet:actionURL ><portlet:param name="manageHandlers" value="manageHandlers"/></portlet:actionURL>" method="post">
<!-- index selected in handlers tables -->
<input type="hidden" name="selectedHandler" id="selectedHandler" />
<input type="hidden" value="" id="handlerButton" name='handlerButton' />
<input type="hidden" value="" id="button" name='button' />
<input type="hidden" value="" id="tableType" name='tableType' />
<input type="hidden" value="manageHandlers" name="formType" />
<table width="100%">
<tr><td width="35%"><table width="100%">
<tr>
<td><h4 style="margin-bottom: 10px;">Available Rules</h4></td>
</tr>
<tr>
<td><div class="availableTable" id='available_div'></div></td>
</tr>
</table></td>
<td width="15%"><div class="manageHandlersButtons1">
<table width="100%">
<tr>
<td><h4>Fatal Error:</h4></td>
</tr>
<tr>
<td><input type="checkbox" id="fatal" name="fatal" class="manageHandlersCheckbox" value="1" /></td>
</tr>
<tr>
<td><input type="image" id="button" value="Assign" src="<%=renderRequest.getContextPath()%>/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="if(manageHandlers('Assign')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
</tr>
<tr>
<td><input type="image" id="button" value="Unassign" src="<%=renderRequest.getContextPath()%>/Images/leftarrow.png" alt="Unassign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); " /></td>
</tr>
</table>
</div></td>
<td width="35%"><table width="100%">
<tr>
<td><h4 style="margin-bottom: 10px;">Assigned Rules</h4></td>
</tr>
<tr>
<td><div class="assignedTable" id='assigned_div'></div></td>
</tr>
</table></td>
<td width="15%"><div class="manageHandlersButtons2">
<table width="100%">
<tr>
<td><input type="button" id="button" name="MoveUp" value="MoveUp" style="width: 85px;" class="manageHandlersMvUp" onclick="if(manageHandlers('Move up')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
</tr>
<tr>
<td><input type="button" id="button" name="MoveDown" value="MoveDown" style="width: 85px;" class="manageHandlersMvDwn" onclick="if(manageHandlers('Move down')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
</tr>
</table></div>
</td></tr>
</table>
</form>
</aui:layout>
<div class="horizontalRules2"><hr class></div>
<%}%>
<table width="100%">
<tr>
<td width="25%"><input type="button" value="Back" style="width: 80px;" class="leftButtons" onClick="document.getElementById('button').value='Back'; document.getElementsByName('consumerDetails')[0].submit()" /></td>
<!-- if not editable, don't display this button -->
<% if (editable.equals("")) {%>
<td><input type="button" value="Save" style="width: 80px;" class="rightButtons" onClick="if (addEntryValidator('Save','consumers','edit')) {document.getElementsByName('consumerDetails')[0].submit()}" /></td>
<% }%>
</tr>
</table>
<!-- JavaScript Tables -->
<script type="text/javascript"><%= AssignedJavaScript%></script>
<script type="text/javascript"><%= AvailableJavaScript%></script>
This is just wrong:
onclick="manageHandlers('Unassign');
document.getElementsByName('manageHandlers')[0].submit();"
I have never seen anything like that before..or if it is indeed possible and I do miss something, then I bet it's rarely done because it's a bad practice to not separate your js codes from content layer (HTML).
Anyway, onclick is an event handler. You normally assign a function that gets executed when clicking happens.
If I were you I would not probably do inline javascript. But if you really want to keep it inline, then you could try this:
function manageHandlers(parameter){
alert('blabla' + parameter);
document.getElementsByName('manageHandlers')[0].submit();
}
and onclick, you can do just onclick="manageHandlers('Unassign');" hope that helps..
I'm trying create a form where when the "+" button is pressed, a new row of four input blank boxes is created. Now, when "+" is pressed, it copies the row (and anything typed in it) identically.
How can I create a blank row? How can I have only one "+" button rather than a new one on each new column?
Heres the page: http://myvirtualltciguy.com/Client_Intake_Meds.html
You can try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Meds - Test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="My Virtual LTCI Guy">
<meta name="keywords" content="My Virtual LTCI Guy">
<meta name="author" content="My Virtual LTCI Guy">
<link rel="stylesheet" href="http://myvirtualltciguy.com/css/ltci_style.css" type="text/css" media="screen" charset="utf-8">
<script type="text/JavaScript">
function addOneRow(){
//table
var table = document.getElementById('mytable');
//body of the table
var tabBody = table.getElementsByTagName("TBODY").item(0);
var numberRow = table.rows.length;
//***********Row
var row = table.insertRow(-1); // appends to the end
//columns
var column = row.insertCell(-1);
column.id = 'column_' + numberRow;
column.innerHTML = '<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_a" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_b" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_c" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_d" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<select name="select" style="visibility:hidden;"></select>';
tabBody.appendChild(row);
numberRow--;
var previousButton = document.getElementById('column_'+numberRow);
previousButton.innerHTML = "";
}
</script>
</head>
<body>
<div id="contain">
<div style="padding:20px 0px 10px 40px;">
<b>Medications:</b>
</div>
<div style="padding:0px 0px 0px 35px;">
<form action="" method="get">
<table id="mytable" width="604" cellpadding="5px">
<thead>
<tr>
<td width="35">
</td>
<td width="109">
Name:
</td>
<td width="106">
Dose:
</td>
<td width="112">
Frequency:
</td>
<td width="153">
Reason Prescribed:
</td>
<td width="13">
</td>
</tr>
</thead>
<tbody>
<tr>
<td id="column_1" width="24">
<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">
</td>
<td width="105">
<input type="text" name="textfield_a" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_b" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_c" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_d" style="width:105px;">
</td>
<td width="56">
<select name="select" style="visibility:hidden;">
</select>
</td>
</tr>
</tbody>
</table>
</form>
</div><img src="http://myvirtualltciguy.com/img/ltci_line.png" style="padding:20px 0px 20px 40px;">
<div class="submit2">
<input type="submit" value="Submit" style="height:30px;">
</div>
</div>
</body>
</html>
Adding a new row with jQuery (doing DOM manipulation like this by hand is painfully tedious):
<table id="data">
<tr>
<td>
<label>
Foo
<input name="foo[]" />
</label>
</td>
<td>
<label>
Bar
<input name="bar[]" />
</label>
</td>
<td>
<label>
Baz
<input name="baz[]" />
</label>
</td>
<td>
<label>
Qux
<input name="qux[]" />
</label>
<button id="add">+</button>
</td>
</tr>
</table>
$(function() { // will run after the DOM tree loaded
$('#add').click(function() {
$('#add').detach();
$('#data tr:last').clone().val(null).insertAfter($('#data tr:last'));
$('#add').append('#data td:last');
});
});
Using input names like foo[] works nicely with PHP, which will return all the inputs in that column in an array named foo. If you don't want that, you have to change field names in the new row manually. Also, if you want an accessible site, you should have a non-javascript fallback for adding new rows... things get complicated from there.