Generating forms to fit in a table - javascript

So I have two forms side by side, and what I'm trying to do is allow the user to generate as many forms as he/she wants, and have each form stored as table data, two per row. The issue I'm having is that the forms won't store in a table, and I'm not entirely sure what I'm doing wrong. I start out making a form to find out how many forms the user wants to generate.
<table border='1'>
<span id='exForms'>
<input type='text' name ='number' id='number'>
<button type='button' onclick="add()">Add</button>
</span>
</table>
Next the number is sent to add()
add()
{
var number = document.getElementsByName('number')[0].value;
var x = document.getElementById('exForms');
number = parseInt(number);
var i;
x.innerHTML="";
x.innerHTML+="<tr><th>Form1</th> <th>Form2</th></tr>";
for(i = 0; i<number; i++)
{
x.innerHTML+="<tr><td><input type='text' name='commandsc[]'></td><tr><td><input type='text' name='commandsi[]'></td></tr>";
}
x.innerHTML+="<input type='submit' name ='submit' value='submit'>";
}
The output is basically all the forms on a line then a submit button.
Any help would be great. Thanks.

You can solve your problem by adding the new created row to the existing table tbody.
See this link how to do it: http://www.roseindia.net/javascript/javascript-add-row-to-table.shtml

This is the real layout:
<span id="exForms">
<input type="text" name="number" id="number">
<button type="button" onclick="add()">Add</button>
</span>
<table border="1"></table>
In short, your layout is invalid. That's why the further changes you did in the layout didn't work as expected.
exForms is not inside table. Also, planning something like
<table><span><tr/></span></table>
was a bad idea.

Related

How to separate buttons (In terms of functionality)

I'm trying to make an upvote function on my website, and it basically works. However, all the Upvoting buttons link to the same thing.
I have something like this:
<th width = 50%>
MAUDE BONNEY
<br><br>
<div class="box">
<label for="qty">
<abbr title="Quantity">Up Vote!</abbr>
</label>
<input id="qty" value="0" />
<button id="down" onclick="modify_qty(-1)">-1</button>
<button id="up" onclick="modify_qty(1)">+1</button>
</th>
and here's my javascript (I have a css but I don't think its important)
function modify_qty(val) {
var qty = document.getElementById('qty').value;
var new_qty = parseInt(qty,10) + val;
document.getElementById('qty').value = new_qty;
return new_qty;
}
How do I make all the buttons not connected? When you press one of the +1 or -1 buttons it only effects one of the counters. How do I make them all individuals?
Using your current way of labeling(id), you can't really link each button to a specific count without having each button having a different id. You could do it with php, but you need to download a server and things like that. So for now, there isn't really an easy way for you to link each button to a specific count.

Function works when button clicked but not when submitting the form

I have yet another question concerning this project but here's hoping ill learn a lot from it.
So I created a function, that creates a div inside a div (which will then contain a random number from dice roll) and it works when I add this function to a button click.
But clicking the button multiple times might not be ideal for a lot of dice, so I created a form and it shouldnt create the number of divs the user decides he wants, but it doesnt seem to work. I suspect it has to do with the form refreshing the page, so instead of handling the even withh addEventListener I used inline "onsumbit" and tried to return the function but it still doesnt seem to work. What am i doing wrong? Here is the HTML and JS bits:
<form>
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
</form>
<button onclick="addDice()">Add Dice</button>
<div id="diceTable">
</div>
and JS:
var numInput = document.querySelector("input");
function addDice(){
var div = document.createElement('div');
div.className = "diceStyle";
div.innerHTML = "<p> here will be a dice</p>";
document.getElementById('diceTable').appendChild(div);
};
function addMoreDice(){
for(var i = 0; i < numInput; i++){
addDice();
}
}
1.You should probably include onsubmit() in form tag and add a submit button inside form.
You can use onchange() method to invoke addMoreDice() whenever the value in input box is changed
you need to add onsubmit="yourfunction()" in side form tag
and than put an input type submit inside form tag like
<form action="#" onsubmit="addDice()">
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
<input type="submit" value="Submit">
</form>
<button onclick="addDice()">Add Dice</button>
<div id="diceTable">
</div>
Each time you submit a form, it gets you to a different page. Instead you could have this code as shown below, (remove form tags)
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber"></input>
<input type="submit" onClick="addMoreDice()">
Clicking on submit after entering the input dynamically creates divisions per your need.

User input list using HTML plus a way to process the information

I am trying to run a simple code for something at work -- me and my co-workers are going to make a list of songs. So using what seems to be a pretty simple coding in HTML I managed to achieve the following:
<!DOCTYPE html>
<html>
<body>
<form action="list">
Band Name:<br>
<input type="text" name="BandName">
<br>
Song Name:<br>
<input type="text" name="SongName">
<br><br>
<input type="submit">
</form>
</body>
</html>
This runs fine to create the buttons and boxes for user input. But I still do not know how to process this information. The ideal result would be a way to append the names, as the users placed their inputs, in a list at the action page. Would that be possible? I'm trying to achieve this in the HTML box of google sites, by the way.
Edit:
With some help, I was able to run the following code on http://jsfiddle.net/:
////HTML///
<form>
Band/Artist:<br>
<input type='text' id='idea' />
<br>
Music:<br>
<input type='text' id='idea2' />
<br><br>
<input type='button' value='Adicione' id='add' />
<ul id='list'></ul>
<script type="text/javascript">
////JAVASCRIPT//////
//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
//First things first, we need our text:
var text = document.getElementById("idea").value; //.value gets input value
var text2 = document.getElementById("idea2").value; //.value gets input value
//Now construct a quick list element
var node = document.createElement("li");
var textnode = document.createTextNode(text+" - "+text2);
node.appendChild(textnode);
//Now use appendChild and add it to the list!
document.getElementById("list").appendChild(node);
(the code came partially from TymeVM's answer in adding user input to a list of text items on a html page, but something seemed to be wrong with it)
It works fine. But I was not able to run it on page of Google Sites. Is it possible? If not, do you guys know a better option?
As my edition seems to answer my question, I'll post it also as an answer. Please feel free to add any suggestions to it.
The following code, with the addition of Javascript, produces the needed answer for the first question above, according to http://jsfiddle.net/.
////HTML///
<form>
Band/Artist:<br>
<input type='text' id='idea' />
<br>
Music:<br>
<input type='text' id='idea2' />
<br><br>
<input type='button' value='Adicione' id='add' />
<ul id='list'></ul>
<script type="text/javascript">
////JAVASCRIPT//////
//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
//First things first, we need our text:
var text = document.getElementById("idea").value; //.value gets input value
var text2 = document.getElementById("idea2").value; //.value gets input value
//Now construct a quick list element
var node = document.createElement("li");
var textnode = document.createTextNode(text+" - "+text2);
node.appendChild(textnode);
//Now use appendChild and add it to the list!
document.getElementById("list").appendChild(node);
(As it was pointed in the edition of the question above, the code came partially from TymeVM's answer in adding user input to a list of text items on a html page. But it did not work on http://jsfiddle.net/)
But still does not run on Google Sites, it seems. I do not know if I should create another question for this problem.

Removing duplicates and not valid entries from a select box, but not refreshing the whole box

I'm trying to write a web form, which will have selectable options based on users input from earlier in the form.
Where I'm getting stuck is;
I have a table room types, which is just td tags with input tags (type=text). These are filled in by a user, so I've no idea what they are..
I've got a button to add extra lines to this table (Jquery to add another td tag and input tag)
Users add as many lines as needed
The next part of the form is to fill in Rooms, and select the type for each room. The table layout is the same (except there are two columns, rather than one), and extra lines are added via another button with Jquery.
What I'd like to be able to do, is for new lines added to have two columns in the table. One input text field, and the other a select box with options taken from the table above.
I've managed to get this working to a point. But as users may go back to edit options from the original (room types) table, I need the select boxes to adjust their values based on what the original table currently says.
I can get this working by emptying and re-populating my select boxes everytime one of the input fields accessed (using OnBlur, which is probably not the most effective way to do this), but since it removes entries from the bxes, and then re-populates, any of the select boxes that have been populated already get reset. I only want invalid options (i.e. values that do not exist in the original table) to be reset.
I've been looking/playing at this for a long time now, but my programming abilities are only what I've taught from here and google, whilst messing around on a few very small things before...
My HTML code as it stands (well, part of my code, I've removed all the irrelevant code to keep it simple) is here:
<div id="rm_types_info">
<table id="room_types_table">
<tr>
<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>
</tr>
</table>
<button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>
<div id="rooms_info">
<table id="rooms_table">
<tr>
<th>Room Number</th>
<th>Room Type</th>
</tr>
<tr>
<td><input type="text" /></td>
<td>
<select class="room_type_select">
<option value="Please Choose">Please Choose</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="rooms('rooms_table');">Add Another Room</button>
</div>
and my JQuery is;
<script>
var userscounter=2
var rmtypescounter=1
var roomscounter=2
function users(ID){
document.getElementById(ID).insertRow(userscounter).innerHTML = '<td><input type="text" /></td><td><input type="text" /></td>';
userscounter++;
};
function rmtypes(ID){
document.getElementById(ID).insertRow(rmtypescounter).innerHTML = '<td><input type="text" class="room_types" onblur="edit_rooms_select();" /></td>';
rmtypescounter++;
}
function rooms(ID){
document.getElementById(ID).insertRow(roomscounter).innerHTML = '<td><input type="text" /></td><select class="room_type_select"><option value="Please Choose">Please Choose</option></select></td>';
roomscounter++;
};
function edit_rooms_select(){
var roomtypelist = $('.room_type_select');
roomtypelist.empty()
$('#room_types_table tr td input').each(function(){
var text = $(this).val();
roomtypelist.append('<option value='+text+'>'+text+'</option>');
});
}
</script>
I've removed the Jquery that was removing the duplicates, since it was definately not working how it needs to...
I'm aware that I may be going about this completely the wrong way, and if using td tags or inputs etc is completely wrong, I'm happy to change the whole form it necessary.
I'm sure this isn't the most effective way to do what I need, but this is how I managed to get it to work...
My HTML...
<div id="rm_types_info">
<table id="room_types_table">
<tr>
<td><input type="text" name="2" class="room_types" onblur="edit_rooms_select();" /></td>
</tr>
</table>
<button type="button" onclick="rmtypes('room_types_table');">Add Another Room Type</button>
</div>
<div id="rooms_info">
<table id="rooms_table">
<tr>
<th>Room Number</th>
<th>Room Type</th>
</tr>
<tr>
<td><input type="text" /></td>
<td>
<select class="room_type_select" id="room_type_select1" >
<option value="1">Please Choose</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="rooms('rooms_table');edit_rooms_select();">Add Another Room</button>
</div>
And the JQuery scripts relevant. In particular, it was the final function "edit_rooms_select()", and specifically the "Add new options to each select" that I was struggling with.
<script>
var rmtypescount=3;
var room_type_select_count=2;
function rmtypes(){
$('#room_types_table tr:last').after('<tr><td><input type="text" name='+rmtypescount+' class="room_types" onblur="edit_rooms_select();" /></td></tr>');
rmtypescount++;
};
function rooms(){
$('#rooms_table tr:last').after('<tr><td><input type="text" /></td><td><select id="room_type_select'+room_type_select_count+'" class="room_type_select"><option value="1">Please Choose</option></select></td></tr>');
room_type_select_count++
};
function edit_rooms_select(){
$('#room_types_table tr td input').each(function(){
var name = $(this).attr('name');
var value = $(this).val();
//Add New Options to each select
$('#rooms_table select').each(function(){
var last = $(this).children('option:last').val();
if (name > last) {
$(this).append('<option value="'+name+'">'+value+'</option>');
};
});
//Change any room types that have been edited
$('.room_type_select option').each(function(){
var match = $(this).val();
if(name == match){
$(this).text(value)
};
});
//Remove Blank Entries
if(value == ''){
$('.room_type_select option[value='+name+']').remove();
};
});
};
</script>
I think that the edit_rooms_select function is much more expensive than it needs to be. For what I require, this isn't going to be a problem, but I would be very interested to see how other people suggest the lists are edited, following my requirements..
- All user inputs from the room_types_table must be options in the select boxes in the rooms_table
- Any input changed in the room_types_table must have its relevant option in the select boxes changed to match
- Any input that is left blank (or later deleted) from the room_types_table must be removed from the select boxes
- Any select box that has a selection which is then removed from the room_types_table must be reset back to its original "Please Choose" option.
If anyone can suggest better ways to do this, or can tidy my code in any way, I'd like to see the code, and also have it explained, as I'm very inexperienced with Javascript/Jquery.

How to store value entered in an input textfield in a database

I am using springsourcetoolsuite, grails project and I am coming across this problem of storing the value entered in the textfield into a table in the database created in mysql and connected to grails. Now I have a domain class called property having variables address, city,
zipcode, country etc. which are also fields of the table property in mysql database.
When I ask user to fill in using this piece of code-(gsp views)
<body>
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
</body>
it works and the value is stored in database.
However I am required to append an input field on each button click, so i have put this input field in a function called add(). Here is the code-
<head>
<script type="text/javascript">
function add() {
var newP = document.createElement("p");
var input1,
area = document.getElementsByTagName("form")[0];
input1 = document.createElement("input");
input1.type = "g:textField";
input1.placeholder = "street";
input1.value = "${propertyInstance?.address}";
newP.appendChild(input1);
area.appendChild(newP);
}
</script>
</head>
<body>
<g:form name='prop' method="post" action="save">
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Now when i do this and run it, it takes null value and prints an error saying 'address cannot be null'. Now i cannot see what is wrong, but if anyone is familiar with groovy/javscript.. please help me figure out whats wrong.
Thanks a lot.
I'm guessing you did not use the scaffolding feature to generate your views in first place. If you didn't, it's a good way to start understanding the basics of grails. In your case specifically, you need to put your fields that you want to pass to the controller (like address) inside the form tag. Like:
<body>
<g:form name='prop' method="post" action="save">
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Another thing is you can't create a tag input and put its type as "g:textfield". The html input fields only have limited types. The one you want to use in this case is really "text". In any case, the grails' tags are rendered before the javascript (in the server-side) while javascript code is rendered client-side. So the first time the page is rendered they will work. But to insert something dynamically in your page, you need ajax because the grails' tags are already rendered. The value ${propertyInstance?.address} needs to be processed at the server, returned and established in your field. Therefore you need to make an async request. Anyway JQuery is your guy.
Also, for what you're doing, JQuery helps to manipulate HTML DOM, that will make your work so much easier.

Categories