Create table by clicking buttons - javascript

Here's what I want to do. Hopefully it's not too hard.
I need to create a table with a div inside each td which is created by clicking buttons... for example
Please select the number of rows in the table
Please select the number of columns in the table..
Result:
So if you clicked on 4 and 4 it would create a table 4 X 4. If you clicked 3 X 1, you would create a table 3 X 1, etc...
Any help would be greatly appreciated!!
Here's a jfiddle of something I'm trying to get working. I'm still looking over all your comments!
http://jsfiddle.net/irocmon/7WD8v/
I know I need to add in the Javascript how to get the element by id.

I would use 2 forms, 1 for the top row of numbers and one for the second row of numbers, where each number is a predefined value of the user input.
Assign the submit button to each of the numbers using javascript for each form and from there grab the results with javascript and perform the code/script that is required to complete the task in mind.
I would recommend using jquery for this.
Have fun...

you should be able to achieve this with some pretty simple if statements or a switch
if you have 2 variables rows & columns
//loop for number of rows
for "x" number of rows{
document.write("<tr>");
if(columns > 0)
{
switch statement to output column
1: document.write("<td></td>");
2: document.write("<td></td><td></td>");
}
document.write("</tr>");
}
the syntax is very very psuedo here, this code wont work but it might get you started, what are you actually wanting to do with the table once you have it?

Using javascript, have 2 local variables: width and height. Within each DIV, have an onclick function that assigns that value to the proper variable, then checks to see if both variables have been assigned (this way they can click on either height or width first). If both are, use these variables within a for loop to generate HTML code within javascript:
var HTML = '<table>';
for(var i = 0; i < height; i++)
{ HTML += '<tr>';
for(var j = 0; j < width; j++)
{ HTML += '<td>...</td>';}
HTML += '</tr>';}
document.getElementById('where_you_want_the_table').innerHTML = HTML;

This is tested and work of note it doesn't handle if they keep trying to build the tables over and over it will keep adding cols and rows but I will let you handle that. :)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var Rows = 0;
var ColString = "";
var TableBuilder;
$(document).ready(function () {
$("#Rows input").click(function () { Rows = $(this).val(); });
$("#Cols input").click(buildCols);
$("#Submit").click(CreateTable);
});
function buildCols() {
for (i = 0; i < $(this).val(); i++) {
ColString = ColString + "<td></td>";
}
return ColString;
}
function CreateTable() {
if (Rows == 0 || ColString == "") {
$("#PleaseSelect").removeClass("displayNone");
}
else {
for (i = 0; i < Rows; i++) {
TableBuilder = TableBuilder + "<tr>" + ColString + "</tr>";
}
$("#table tbody").html(TableBuilder);
}
}
</script>
<style type="text/css">
.displayNone { display: none; }
</style>
</head>
<body>
<table id="table" border="1">
<tbody>
</tbody>
</table>
<br><br>
How many Rows?
<div id="Rows">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
<br />
How Many Columns?
<div id="Cols">
<input type="button" value="1" >
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
<br />
<div id="PleaseSelect" class="displayNone">Please select both a column number and a row number.</div>
<input type="button" id="Submit" value="Build Table" />
</body>
</html>

Related

Show any number of text and checkbox in HTML

I have a checkbox and a label side by side in an html
<div class ="followupSteps">
<input type="checkbox" id="checkboxFollowup">
<label for="checkboxFollowup" id="labelFollowup"></label>
</div>
Depending on the number of output returned from server side, there can be any number of checkbox and label. For example, if 5 outputs are returned from the server, there will be 5 rows (each row is 1 checkbox and 1 label). How do I do that?
In jQuery, I have $("#labelFollowup").text(somevar);but it will not create a new row. Rather it will keep replacing the content of the only one label defined in the html.
$(function(){
let div = '<div class ="followupSteps">'+
'<input type="checkbox" id="checkboxFollowup">'+
'<label for="checkboxFollowup" id="labelFollowup">label</label>'+
'</div>';
for(var index=0; index<5; index++)
{
$('table').append('<tr> <td>'+div+' </td> </tr>')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
</tr>
</table>
try this one.
var $followupDiv = $('.followupSteps');
var $inputClone = $('input', $followupDiv).clone().removeAttr('id');
var $labelClone = $('label', $followupDiv).clone().removeAttr('id');
var serverResponse = 5;
for (i = 1; i <= serverResponse; i++) {
$inputClone.clone().attr('id', 'checkboxFollowup' + i).appendTo($followupDiv);
$labelClone.clone().attr('id', 'labelFollowup' + i).appendTo($followupDiv);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="followupSteps">
<input type="checkbox" id="checkboxFollowup">
<label for="checkboxFollowup" id="labelFollowup"></label>
</div>
Since you doesn't provide much information, I will just post how you can achieve it using a javascript "for" loop of 10 times and following your markup:
for(i=0;i<10;i++) {
$('#checkboxFollowup').eq(0).clone().prop('id', 'clone'+i).appendTo('.followupSteps');
$('#labelFollowup').eq(0).clone().prop('id', 'clone'+i).appendTo('.followupSteps');
}
Using the following jQuery methods:
https://api.jquery.com/eq/
https://api.jquery.com/clone/
http://api.jquery.com/appendto/
http://api.jquery.com/prop/

add and remove boxes using javascript

I have two text boxes and two buttons named add and remove. The requirement is to add more boxes along with the current boxes. i somehow managed to add boxes but the requirement of removing the boxes is not working. Please help to why this code is not working and if possible suggest a working solution.
function addFunction(){
var element = document.createElement("input");
var parent = document.getElementById("form1");
parent.appendChild(element);
}
function removeFunction(){
var child = document.getElementsByTagName("input");
var parent = document.getElementById("form1");
for (var i = 0; i > child.length; i++) {
parent.removeChild(child[i]);
};
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form1" style="margin-left: 40%; margin-top: 100px;">
<input type="text" id="one"><br><br><br>
<input type="text" id="two"><br>
<p id ="demo"> </p>
</form>
<button style="margin-left: 40%;" type="button" value="ADD" id="addButton" onclick="addFunction()">ADD</button>
<button style="margin-left:50px;" type="button" value="REMOVE" id="removeButton" onclick="removeFunction()">REMOVE</button>
</body>
</html>
for (var i = 0; i < child.length; i++) {
parent.removeChild(child[i]);
};
You have got wrong condition in your for loop. Your i is always 0 at start, and is lesser then length of array with node elements, so loop just can't start.
P.s. and you don't need var i before it
Your for-Loop is wrong:
for (var i = 0; i > child.length; i++) {
parent.removeChild(child[i]);
};
You need to change ">" to "<"
Replace your > condition in the for loop with <. You want the for loop to be executed until it reach child.length.

Increment of counter on dynamic addition of rows

I'm trying to add the rows dynamically plus auto-increment of a counter.I want to start with 1 then 2 then 3 and so on . I have added my code on plunker ,in which every time the max value is getting in first column like 4 then 1,1,2,3.Where am i going wrong ?i Want it to be 1,2,3,4.
Here is the plunker link http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
document.getElementById("myVal").value=_counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:<input type="text" id="myVal" placeholder="1">
Quantity:<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
I think it is because you have multiple divs with the id="myVal". The id attribute should be unique on the page. If not, your page will still load, but you may have unexpected behavior.
You are changing the id of the template div, but not the myVal div.
I assume you are looking for something like this:
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
oClone.getElementsByClassName("myVal")[0].value = _counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:
<input type="text" class="myVal" placeholder="1">Quantity:
<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
</div>
In your original you are cloning your template with the same id for the input. So when you do document.getElementById("myVal").value=_counter;, you only get the first input. I changed it to use class instead and get the input with the appropriate class that is a child of the cloned node.

Javascript/ HTML Transferring form Controls to submit

I have been attempting to create a form with 5 text boxes, 1 drop down and a text area. My intention is simple; select an option from the Drop down( except the first i.e "--Select--"), enter the contents into the text box and text area. Once I click submit all the above entered information should get appended to specific links that is hard coded into each drop down option.
My challenge here is that when I click submit, the controls are no getting passed to the new form i.e. the desired page opens,but the form fields do not get entered. I have cross verified and confirmed that the ids are correct.. I'm guessing that i have made a mistake in the validation. Kindly point out my mistake..
Javascript Code
<script type="text/javascript">
function dpdown(form)
{
var a="&name="+document.getElementById('name').value; //textbox
var b="&job_id="+document.getElementById('job_id').value;//textbox
var c="&major"+document.getElementById("major').value;//textbox
var d="&native="+document.getElementById('native').value;//textbox
var e="&age="+document.getElementById('age').value;//textbox
var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
var i, counter = 0;
var ddl = document.getElementById("jobs");//dropdown
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i=0; i < obj.options.length; i++)
{
if(obj.options[i].selected) // to check if the person has chosen a suitable degree
if (selectedValue == "selectdegree")
{
alert("Please select your correct degree");
}
else
{
++counter;
window.open('https://'+form.elements[i].value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
}
}
}
function cleartext()// to clear the form (works correctly)
{
document.form.details.value='';
}
HTML Code
<form onsubmit="dpdown(this); return false;"> // at the beginning of the form
'
'
'
'
<input type="submit" value=" Create form" /> // not working
<input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();"> // works well
Please check it.
<html>
<head>
<script language="javascript">
function dpdown(){
var a="&name="+document.getElementById('name').value; //textbox
var b="&job_id="+document.getElementById('job_id').value;//textbox
var c="&major"+document.getElementById('major').value;//textbox
var d="&native="+document.getElementById('native').value;//textbox
var e="&age="+document.getElementById('age').value;//textbox
var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
var i, counter = 0;
var ddl = document.getElementById("jobs");//dropdown
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i=0; i < ddl.length; i++)
{
if(ddl.options[i].selected) // to check if the person has chosen a suitable degree
if (selectedValue == "selectdegree")
{
alert("Please select your correct degree");
}
else
{
++counter;
value=ddl.options[i].value;
window.open('https://'+value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
}
}
}
function cleartext()
{
document.form.details.value='';
}
</script>
</head>
<body>
<form>
<input type="text" id="name"/>
<input type="text" id="job_id"/>
<input type="text" id="major"/>
<input type="text" id="native"/>
<input type="text" id="age"/>
<input type="textarea" id="details"/>
<select id="jobs" >
<option value="www.google.com">google</option>
<option value="www.yahoo.com">yahoo</option>
<option value="www.stackoverflow.com">stackoverflow</option>
</select>
<input type="button" value=" Create form" onclick="dpdown();"/>
<input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();">
</form>
</body>
</html>

How to get all elements which name starts with some string?

I have an HTML page. I would like to extract all elements whose name starts with "q1_".
How can I achieve this in JavaScript?
A quick and easy way is to use jQuery and do this:
var $eles = $(":input[name^='q1_']").css("color","yellow");
That will grab all elements whose name attribute starts with 'q1_'. To convert the resulting collection of jQuery objects to a DOM collection, do this:
var DOMeles = $eles.get();
see http://api.jquery.com/attribute-starts-with-selector/
In pure DOM, you could use getElementsByTagName to grab all input elements, and loop through the resulting array. Elements with name starting with 'q1_' get pushed to another array:
var eles = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].name.indexOf('q1_') == 0) {
eles.push(inputs[i]);
}
}
HTML DOM querySelectorAll() method seems apt here.
W3School Link given here
Syntax (As given in W3School)
document.querySelectorAll(CSS selectors)
So the answer.
document.querySelectorAll("[name^=q1_]")
Fiddle
Edit:
Considering FLX's suggestion adding link to MDN here
You can use getElementsByName("input") to get a collection of all the inputs on the page. Then loop through the collection, checking the name on the way. Something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input name="q1_a" type="text" value="1A"/>
<input name="q1_b" type="text" value="1B"/>
<input name="q1_c" type="text" value="1C"/>
<input name="q2_d" type="text" value="2D"/>
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
for (x = 0 ; x < inputs.length ; x++){
myname = inputs[x].getAttribute("name");
if(myname.indexOf("q1_")==0){
alert(myname);
// do more stuff here
}
}
</script>
</body>
</html>
Demo
Using pure java-script, here is a working code example
<input type="checkbox" name="fruit1" checked/>
<input type="checkbox" name="fruit2" checked />
<input type="checkbox" name="fruit3" checked />
<input type="checkbox" name="other1" checked />
<input type="checkbox" name="other2" checked />
<br>
<input type="button" name="check" value="count checked checkboxes name starts with fruit*" onClick="checkboxes();" />
<script>
function checkboxes()
{
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true &&
inputElems[i].name.indexOf('fruit') == 0)
{
count++;
}
}
alert(count);
}
</script>
You can try using jQuery with the Attribute Contains Prefix Selector.
$('[id|=q1_]')
Haven't tested it though.

Categories

Resources