This is my code so far:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<p>
<br />
<input onclick="addtext();" type="button" value="Strip HTML Formatting" />
</p>
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</tbody>
</table>
</form>
Now I want to add a button that clears the two textareas.
Where should I be putting the JavaScript for that, and what should it say?
You can use the reset type attribute:
<input type="reset" value="Reset" />
Code snippet:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Reset" />
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
HTML:
<input onclick="emptyText()" type="button" value="Clear fields" />
JS:
function emptyText() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
Demo on Fiddle
HTML:
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<textarea name="inputtext"></textarea>
</td>
<td>
<p>
<br />
<input type="button" value="Strip HTML Formatting" />
</p>
</td>
<td>
<textarea name="inputtext" readonly></textarea>
</td>
</tr>
<tr>
<td>
<button>Empty</button>
</td>
</tr>
</tbody>
</table>
JavaScript:
var removeBtn = document.getElementsByTagName('button')[0];
var copyBtn = document.querySelector('input[type="button"]');
copyBtn.onclick = function () {
var inpt = document.getElementsByTagName('textarea')[0].value;
document.getElementsByTagName('textarea')[1].value = inpt;
}
removeBtn.onclick = function () {
document.getElementsByTagName('textarea')[0].value = "";
document.getElementsByTagName('textarea')[1].value = "";
}
OPTION 1:
Use a reset type input-button:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
OPTION 2:
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
function clearFields() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input onclick="clearFields()" type="button" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This literally sets the values of the two textareas to 'empty'.
Related
I tried to store my input values in cookies. but it is not stored. what is wrong with my code? please help.
Thanks in advance.
<html>
<head></head>
<body>
<table border="1">
<tr>
<td>
Name
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" id="txtEmail" />
</td>
</tr>
<tr>
<td>
Gender
</td>
<td>
<input type="text" id="txtGender" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Set Cookie" onclick="setCookie()" />
<input type="button" value="Get Cookie" onclick="getCookie()" />
<input type="button" value="Clear" onclick="clearTextBoxes()" />
</td>
</tr>
</table>
<script type="text/javascript">
function setCookie()
{
var customObject = {};
customObject.name = document.getElementById("txtName").value;
customObject.email = document.getElementById("txtEmail").value;
customObject.gender = document.getElementById("txtGender").value;
var jsonString = JSON.stringify(customObject);
document.cookie = "cookieObject=" + jsonString;
}
function getCookie()
{
var nameValueArray = document.cookie.split("=");
var customObject = JSON.parse(nameValueArray[1]);
document.getElementById("txtName").value = customObject.name;
document.getElementById("txtEmail").value = customObject.email;
document.getElementById("txtGender").value = customObject.gender;
}
function clearTextBoxes()
{
document.getElementById("txtName").value = "";
document.getElementById("txtEmail").value = "";
document.getElementById("txtGender").value = "";
}
</script>
</body>
</html>
the idea is i have 2 buttons and 2 forms with content in them; i made the buttons to each hide/show a form, like button1 will show and hide form1 when clicked, and so button2 and form2, and it worked, but the thing is when i click on button1 and button2 the forms both show up, and i want something like if form2 was already showed, and after that when i click on button1 to show form1, the form2 will automatically hide, and if i click on buton2 afterwards i want form2 to show and form1 to hide.
HTML CODE
<hr id="hr1" hidden><!-- HR -->
<input type="submit" id="mngashow1" value="Show 'Add chapter'" onclick="chapterform()">
<div id="formm1" style="display: none;">
<form id="form2" name="form2" method="post" action="a.php"" enctype="multipart/form-data">
<table id="tble" width="80%" border="0" cellpadding="3" cellspacing="3">
<tr>
<td>ID</td>
<td><input type="text" name="id" placeholder="type id" id="id"></td>
</tr>
<tr>
<td>First row</td>
<td><input type="text" name="manganame" placeholder="add a name for the manga" id="manganame"></td>
</tr>
<tr>
<td>Third row</td>
<td><input type="text" name="chapternumber" placeholder="Add the chapter number" id="chapternumber"></td>
</tr>
<tr>
<td>Second row</td>
<td><input type="text" name="chaptername" placeholder="Add a name for the chapter" id="chaptername"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit2" placeholder="" id="Submit2" value="Save Table">
</td>
</tr>
</table>
</form>
</div>
<hr id="hr2" hidden><!-- HR -->
<input type="submit" id="mngashow2" value="Show 'Add chapter'" onclick="chapterform1()">
<div id="formm2" style="display: none;">
<form id="form3" name="form2" method="post" action="a.php"" enctype="multipart/form-data">
<table id="tble" width="80%" border="0" cellpadding="3" cellspacing="3">
<tr>
<td>ID</td>
<td><input type="text" name="id" placeholder="type id" id="id"></td>
</tr>
<tr>
<td>First row</td>
<td><input type="text" name="manganame" placeholder="add a name for the manga" id="manganame"></td>
</tr>
<tr>
<td>Third row</td>
<td><input type="text" name="chapternumber" placeholder="Add the chapter number" id="chapternumber"></td>
</tr>
<tr>
<td>Second row</td>
<td><input type="text" name="chaptername" placeholder="Add a name for the chapter" id="chaptername"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit23" placeholder="" id="Submit3" value="Save Table">
</td>
</tr>
</table>
</form>
</div>
JAVASCRIPT CODE
function chapterform() {
var x = document.getElementById("formm1");
var z = document.getElementById("mngashow1");
var y = document.getElementById("hr1");
if (x.style.display === "none") {
x.style.display = "block";
z.value = "Hide 'Add Chapter'";
y.hidden = 0;
} else {
x.style.display = "none";
z.value = "Show 'Add Chapter'";
y.hidden = 1;
}
}
function chapterform1() {
var x = document.getElementById("formm2");
var z = document.getElementById("mngashow2");
var y = document.getElementById("hr2");
if (x.style.display === "none") {
x.style.display = "block";
z.value = "Hide 'Add Chapter'";
y.hidden = 0;
} else {
x.style.display = "none";
z.value = "Show 'Add Chapter'";
y.hidden = 1;
}
}
<button data-frm="2" class="btnChap">Add Chapter</button>
<form id="form2" class="frms" name="form2" method="post" action="a.php" enctype="multipart/form-data">
</form>
<button data-frm="1" class="btnChap">Add Chapter</button>
<form id="form1" class="frms" name="form1" method="post" action="b.php" enctype="multipart/form-data">
</form>
<script type="text/javascript">
$(".btnChap").click(function(){
/*hids all the forms*/
$(".frms").hide();
var frm = $(this).attr('data-frm');
/*show your current form*/
$("#form"+frm).show();
})
</script>
1. Add Class 'frms' to each form
2. use button instead fs submit input
3. each button has its own id
4. each button has its own property to which form this button is associated
5. use jquery
6. hide all forms by class selector
7. show your desired form by button property
Hope this Helps and welcome to the community :)
my problem is that when I click my add row button that is in the table it adds a new row only in the first cell instead of in the new cell. Any ways to correct this?
<html>
<body>
<input name="button2" type="button" onClick="addRow('dataTable')" value="Add Row" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="84">
1
</td>
<td>
<input type="text" />
</td>
<td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" />
<table id="dataTable1" width="150px" border="1">
<tr>
<td height="27"> 1 </td>
<td> <input name="text" type="text" /> </td>
<td> <input name="text" type="text" /> </td>
<td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" />
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var contents = document.getElementById('dataTable').outerHTML;
var contents = document.getElementById('dataTable1').outerHTML;
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.setAttribute('colspan', 3);
var newCont = contents.replace(' 1 ', rowCount + 1);
firstCell.innerHTML = newCont;
}
</script>
I am developing a code, which takes a value as input and the form when submitted, displays the result and the code is as follows:
<script>
function submitme()
{
document.forms["myform"].submit();
}
</script>
<body onload="submitme()">
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value="<?php echo $_GET['x']; ?>"></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
</body>
The problem is, when the page is loaded completely, the form should be submitted , but the form cannot be submitted. What is the problem , Help me!! Thanks in advance
Try this pure javascript,
<body>
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value=""></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit_button" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
<script>
window.onload = function(){
document.getElementById('myform').submit();
};
</script>
To access this document.getElementById('myform').submit(), you should change <INPUT type="submit" name="submit" value="Submit"> to <INPUT type="submit" name="submit_button" value="Submit">. Don't use other element with name of submit or id.
And also the better one is,
<script>
window.ready = function(){
document.getElementById('myform').submit();
};
</script>
It should help:
$(document).ready(function () {
$('#myform').trigger('submit'); });
Still I don't get what is the point of submitting the form after page loads.
try
<script>
function submitme()
{
document.forms["performance"].submit();
}
</script>
or
<script>
function submitme()
{
document.forms[0].submit();
}
</script>
All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>
$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.