For example: This is my code
<script>
function changeMe()
{
document.myform.mytable.mybutton.value = "Changed!";
}
</script>
<body>
<form id = "myform" name = "myform">
<table id = "mytable" name = "mytable">
<tr>
<td>
<input type="button" id = "mybutton" name = "mybutton" value="OK!" onclick="changeMe();"/>
</td>
</tr>
</table>
</form>
</body>
But it doesn't work. But when I change:
document.myform.mytable.mybutton.value = "Changed!";
into
document.getElementById('mybutton').value = "Changed!";
It works perfectly. Please tell me what wrong with my first code!
<!DOCTYPE html>
<html>
<body>
<form id = "myform" name = "myform">
<table id = "mytable" name = "mytable">
<tr>
<td>
<input type="button" id = "mybutton" name = "mybutton" value="OK!" onclick="changeMe(this.id);"/>
</td>
</tr>
</table>
</form>
<script>
function changeMe(elementId)
{
document.getElementById(elementId).value = "Changed!";
}
</script>
</body>
</html>
Related
<html>
<head>
<title>Student form</title>
</head>
<body>
<div id="data">
Form : having 4 fields and 1 button to add data to table.
<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData()">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>
Script : AddData() function submits data from form to the table and is invoked when button is clicked.
<script>
function AddData()
{
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td>
<td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>
</body>
</html>
Consider without jQuery. Change the "Add" button to type button (it's submit by default) so it doesn't submit the form. Then use DOM features to get the elements and their values, and to build the new row.
Be careful though, as a return in any of the inputs will submit the form so you may want to add a submit listener and prevent that, or use inputs without a form.
function addData(el) {
var table = document.getElementById('list');
var tr = table.insertRow();
el.form.querySelectorAll('input').forEach(function(el) {
var cell = tr.appendChild(document.createElement('td'));
cell.textContent = el.value;
});
}
<form align="center">
<h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
<button type="button" onclick="addData(this)">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1">
<thead>
<tr>
<td>Name<td>Branch<td>Address<td>Contact
</tr>
</thead>
</table>
The only "modern" feature above is the use of forEach with a NodeList, and that can be replaced fairly easily with a for loop or [].forEach.call(...) to get compatibility back to IE 8.
Try this .
Add the query library link appentTo() its a jquery Object
Change the button type with submit
You need return the onsubmit for prevent the page refresh otherwise page was reloaded on every time submit
function AddData() {
var rows = "";
var name = document.getElementById("Name").value;
var branch = document.getElementById("branch").value;
var address = document.getElementById("address").value;
var contact = document.getElementById("contact").value;
rows += "<tr><td>" + name + "</td><td>" + branch + "</td><td>" + address + "</td><td> " + contact + "</td></tr> ";
$(rows).appendTo("#list tbody");
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">
<form align="center" onsubmit="return AddData()">
<h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
<button type="submit">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1">
<thead>
<tr>
<td>Name</td>
<td>Branch</td>
<td>Address</td>
<td>Contact</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
you can pass event to AddDate(e) and use e.preventDefault().
<html>
<head>
<title>Student form</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">
<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData(event)">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>
<script>
function AddData(e)
{
e.preventDefault();
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td><td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>
</body>
</html>
Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?
Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>
Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.
Created textbox in javascript, need those value to pass in arrays to add them ?
how do I do that ?
I just want my code to be short and simple
I'm stuck!
Code:
<html>
<head>
<title> 2 NUM ADD VIA ARRAY </title>
</head>
<body bgcolor= "red" </body>
<script type = "text/javascript">
function sum()
{
var sum = [],i=0;
sum[i]= document.getElementById('i+1').value;
alert("sum =" + sum);
}
</script>
<table border=2>
<TR>
<TD>
<input type="text" id="1" /input>
</TD>
<TD>
<input type="text" id="2" /input>
</TD>
</TR>
</table>
<button name="btHello" onclick="sum();">sum</button>
</html>
Usage of Array in this case is not required according to me.I suggest you to do this even without using arrays. This makes your code simple and short
<html>
<head>
<title> 2 NUM ADD VIA ARRAY </title>
</head>
<body bgcolor= "red" </body>
<script type = "text/javascript">
function sum()
{
var sum= 0;
$('.textbox').each(function() {
sum += Number($(this).val());
});
alert(sum);
}
</script>
<form>
<table border=2>
<TR>
<TD>
Text 1 :<input type="text" class="textbox" id="1" />
</TD>
<TD>
Text 2 :<input type="text" class="textbox" id="2" />
</TD>
</TR>
</table>
Submit : <input type = "submit" name="btHello" onclick="sum();">
</form>
</html>
Hope my example helps. I suggest using jQuery. It makes it much easier.
function foo() {
var s = [];
$(".foo").each(function() {
s.push( $(this).val() );
});
s = s.join(" ");
alert("sum = " + s);
}
$("#btHello").on("click", function() { foo(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=2>
<tr>
<td>
<input type="text" class="foo" /input>
</td>
<td>
<input type="text" class="foo" /input>
</td>
</tr>
</table>
<button id="btHello">sum</button>
I´m to totally sure what result you want, but this should help you on your way. If its not totally what you are after, please try to explain your goal a bit more. :)
Happy codin'
function sum()
{
var sum = [];
sum.push(document.getElementById('1').value);
sum.push(document.getElementById('2').value);
// sum of all values
totalSum = 0;
for (var i = 0; i < sum.length; i++) {
totalSum += parseInt(sum[i]);
}
alert("sum = " + totalSum);
}
<html>
<head>
<title> 2 NUM ADD VIA ARRAY </title>
</head>
<body bgcolor= "red" </body>
<table border=2>
<TR>
<TD>
<input type="text" id="1" /input>
</TD>
<TD>
<input type="text" id="2" /input>
</TD>
</TR>
</table>
<button name="btHello" onclick="sum();">sum</button>
</html>
I'am new to javascript so any help is welcome. Basically, I need the code to do is that when the button is pressed a new table is created.
<script>
function table() {
var td, tx;
var fo = document.getElementById("fo");
var tbl = document.getElementById("tbl");
var tr = document.createElement("tr");
for(var x=0; x<1; x++ ) {
td = document.createElement("td");
tx = document.createTextNode("new table with form here");
td.appendChild( tx );
tr.appendChild( td );
}
tbl.appendChild( tr );
}
</script>
</head>
<body>
<input type="button" name="button" id="button" value="New table" onClick="table();">
<form name="Arvuti" id="fo">
<table border=4 id="tbl">
<tr>
<td>
<input type="text" name="Vastus" size="16" readonly="readonly"></br>
<input type="button" name="uks" value=" 1 " onclick="Arvuti.Vastus">
</td>
</tr>
</table>
</form>
try to use jQuery.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){
$("#new_field").click(function(){
$(this).closest("table").append("<tr><td><input type='text' value='New field'></td></tr>");
});
});
</script>
<table>
<tr><td><button id="new_field">Add field</button></td></tr>
</table>
<html dir = rtl>
<head>
<title> </title>
<meta HTTP-EQUIV="Content-language" CONTENT="ar">
<script type="javascript">
function d()
{
document.getElementById("sName").innerHTML ='Name submitted';
}
</script>
</head>
<body>
<form name = "Info" method = "set" action = "">
<table border = "0" width = "40%" align = "center">
<tr>
<td> الاســــــــــــــــم: </td>
<td> <input type="text" name = "CurName" size = "31"> </td>
<td> <p id = "sName"> </p> </td>
</tr>
<tr>
<td> العــــــــــــــــمر :</td>
<td> <input type = "text" name = "CurAddress" size = "10"></td>
<td> <p id = "sAddress"> </p> </td>
</tr>
<tr>
<td> العنـــــــــــــوان :</td>
<td> <input type = "text" name = "CurAddress" size = "45"></td>
<td> <p id = "sAddress"> </p> </td>
</tr>
<tr>
<td> الحالــــــــــــــــة :</td>
<td> <input type = "radio" name = "Mar" > متزوج<input type = "radio" name = "Sin" > أعزب</td>
<td> <p id = "SitName"> </p> </td>
</tr>
<tr>
<td colspan = 2 align = center> <button type = "submit" onClick = "d(); return false;">ارسال </button> <button type = "reset">مسح</button> </td>
</tr>
</table>
</form>
</body>
</html>
When I press the submit button I expected that some words beside the first textbox will disappear, but nothing happened. Can some one explain to me where the problem is?
You have not properly defined your script tag. Proper value will be text/javascript.
<script type="text/javascript">
instead of
<script type="javascript">
Your js code is correct but you have to change that
<script type="javascript"> as <script type="text/javascript">
See your code here its working perfectly in jsfiddle
http://jsfiddle.net/WxtJ3/
<script type="text/javascript">
and change
<button type = "submit" onClick = "d();">
to
<button type = "button" onClick = "d();">
or else your page gonna be reloading