Below code is not working in IE. What is solution for it ? how can i submit form into IE browser ?
function submitForm(url){
document.forms[0].action= url;
document.forms[0].submit();
}
Below is dome code from JSP Page.
<html:form action="xxxxx">
<tr>
<td> </td>
<td> </td>
</tr>
....
<tr bgcolor="#ffffff">
<td class="wtspace" height="5" colspan="1"> </td>
<td>
<html:submit styleId="deleteButton" onclick="doSubmit();">Delete</html:submit>
</td>
</tr>
</html:form>
Related
I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>
You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I've been digging around to try and get a list of comma separated values from a set of checkboxes. There have been lots of useful answers here, but I can't work out a final kink. My code is behaving oddly depending on whether or not the first checkbox is checked and I can't work out why (this is my first ever attempt at javascript!)
<script type="text/javascript">
function updateTextArea() {
var allVals = $('input.gift:checked').map(
function() {return this.value;}).get().join();
$('#txtValue').val(allVals)
}
$(function () {
$('#gift input').click(updateTextArea);
updateTextArea();
});
</script>
And here's the html that accompanies it.
<fieldset id="gift">
<input type='checkbox' name='lFreeProductid' value='8840'
id="lFreeProductid1" class="gift">
</td>
<td class="style42">64 SSG</td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='420' id="lFreeProductid1" class="gift"></td>
<td class="style41">Perfect D</td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='460' id="lFreeProductid1" class="gift"></td>
<td class="style41">Soccer Attack</td>
<td> </td>
</tr>
</fieldset>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
<textarea id="txtValue"></textarea>
I know this is the sort of question that's been asked a thousand times, but I can't seem to find a solution to this specific issue. Any help would be greatly appreciated.
I think your code is working fine !
Check this demo once : https://jsbin.com/vigixi/46/edit?html,js,output
And if this is not the desired output you want. Then let us know what exactly you want.
I advice you to correct all the HTML syntax errors
<fieldset id="gift">
<table>
<tr id="tr1">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='8840' id="lFreeProductid1" class="gift"></td>
<td class="style42"><label for="lFreeProductid1">64 SSG</label></td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='420' id="lFreeProductid2" class="gift"></td>
<td class="style41"><label for="lFreeProductid2">Perfect D</label></td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='460' id="lFreeProductid3" class="gift"></td>
<td class="style41"><label for="lFreeProductid3">Soccer Attack</label></td>
<td> </td>
</tr>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
</fieldset>
<textarea id="txtValue"></textarea>
Your issue could be due to a certain browser or/and doctype
So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work
<table style="visibility:hidden;" id="viewevade">
<tr>
<td class="form"width="25%">Period</td>
<td class="form"width="75%"> PeriodA </td>
</tr>
<tr>
<td class="form">Inbound Call Date</td>
<td class="form">Date</td>
</tr>
<tr>
<td class="form">Input Date</td>
<td class="form"> DateA</td>
</tr>
<tr>
<td class="form">Reviewer</td>
<td class="form">username</td>
</tr>
<tr>
<td class="form">Topic</td>
<td class="form">Topic A</td>
</tr>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
and I make a function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
to use it in
<button width="100%" onclick="ViewEva();">View Evaluation</button></td>
It doesnt work. Any help? Thanks b4
I created this as a codepen here:
http://codepen.io/anon/pen/pjZMrO
Using your function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?
EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.
<form action ="" method="post" onsubmit="">
I can think of two things.
You are not including your script
Your HTML is wrong and your browser goes bananas
Here you have a plunker working example
Note both the <script src='./script.js'></script> and the
<tr>
<td>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
</td>
</tr>
Your table cannot be direct child of the row, you have to put it in a column, and close the inner table
All inputs pass properly in IE9, and I print them to screen. The inputs for "order" and "progress" are passed correctly in firefox/chrome, but not the "date1" or "date2" fields. They use the jsdatepick library to determine the date - and the date is filled into the form as so: "10-01-2012" . On the next page I pick up the request data and print to screen. Any hints?
<script type="text/javascript" src="jsDatePick.full.1.3.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"date1",
});
new JsDatePick({
useMode:2,
target:"date2",
});
};
</script>
<Form action="ai_school_stats_return.asp" method="POST" name="stats">
<input type="hidden" id="order" name="order" value="order">
<tr>
<td width="40" align="right">From date:</td>
<td align="left"><input type="bundatetext" name="date1" id="date1" maxlength="10" value=<%=Session("date1")%>></td>
</tr>
<tr>
<td width="40" align="right">To date:</td>
<td width="60"><input type="bundatetext" name="date2" id="date2" maxlength="10" value=<%=Session("date2")%>></td>
</tr>
<tr>
<td width="40" align="right">Lesson Progressed Past</td>
<td width="60"><input type="text" name="progress" id="progress" maxlength="10" value=<%=Session("progress")%>></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td width="183"> </td>
<td width="133"> </td>
<td width="184"> </td>
</tr>
<tr>
<td colspan="3">
<div align="center"><input type="image" value="submit" src="../images/submit_up.gif" width="132" height="30"></div>
</td>
</tr>
</table>
</Form>
Turned out to be something extremely simple. I had a table declared outside of the form. So firefox saw the table containing the inputs outside the form while figuring out what data to pass- which when combined with the .js fn it ended up passing data not involved in the fn. Lesson: You know something is really wrong with your code when IE works but firefox doesn't.
I have a JSP file with struts tags.
<html:form action="showcart">
<table width="100%" border="1">
<tr>
<td width="46" align="center" valign="middle"></td>
<td width="110"></td>
<td width="31"> </td>
<td width="171" class="cart_contents"><span class="heading">Product</span></td>
<td width="157" class="cart_contents"><span class="heading">Quantity</span></td>
<td width="181" align="center" valign="middle" class="cart_contents"><span class="heading">Unit Price</span></td>
<td width="157" class="cart_contents"><span class="heading">Total Price</span></td>
<td width="222" align="center" valign="middle"></td>
</tr>
<%!
java.util.Map cartList = null;
%>
<%
cartList = (java.util.Map)request.getAttribute("cartList");
if (null != cartList) {
for(Object p : cartList.values()) {
com.pojo.Product product = (com.pojo.Product)p;
%>
<tr>
<td width="46" align="center" valign="middle"><input type="checkbox" name="checkbox" value="<%=product.getProductid()%>" /></td>
<td width="110"><img src="images/01.jpg" width="110" height="78" /></td>
<td width="31"> </td>
<td width="171"><span class="heading"><%=product.getProductname()%></span><br /><span class="contents">Serial number:<%=product.getProductid()%></span></td>
<td width="157" align="center" valign="middle" class="contents">
<label>
<input name="textfield2" type="text" value="3" size="5" align="center" onchange="submitForm()" />
</label>
<br /></td>
<td width="181" align="center" valign="middle" class="contents"><span class="price"><%=product.getUnitprice()%></span> </td>
<td width="157" class="cart_contents"><span class="heading">Total Price</span></td>
<td width="222" align="center" valign="middle"><span class="blue_contents">Remove</span></td>
</tr>
<%
}
}
%>
</table>
<html:submit/>
</html:form>
Whenever the user changes the quantity textfield, a the JS function, submitForm() is invoked. I am using an inline script as follows.
<script type="text/javascript">
function submitForm()
{
document.forms[0].action = "showcart.do?method=updateCart&pcount=2&product=2345";
document.forms[0].submit();
}
</script>
But, I am getting a JS error saying the form is undefined. Could you tell me where I am wrong?
Waiting for solutions!
Thanks in advance!
Your code worked perfectly fine for me. Make sure that the javascript code comes after the form. Also make sure there are no javascript errors in your brower's error console. If there are an code after the error will fail to run.