How to do form field repetition in JavaScript? - javascript

I got a form with a list of games I'm asking people to add that they've played.
It says "Add Game" with a hyperlink which has an event handler onClick which directs to a JavaScript function - it only does this once but I want it to do this as many times as the user decides to add games - without any limits - how can this be done?
Here are the screen shot images followed by the code:
http://i59.tinypic.com/16jk1nt.png
http://i59.tinypic.com/2zzntoo.png
Here's the JavaScript code for the above images:
function addFields1(){
var container = document.getElementById("container1");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
container.appendChild(document.createTextNode("Add Game"));
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
Here's the HTML form for the above JavaScript code:
<input type="text" id="member1" name="member1" value="">Add Game<br />
Add Game
<div id="container1"/>
When I click the "Add Game" hyperlink, it enters a blank input box only once while I want it to enter it as many times as I keep on clicking the "Add Game" hyper link. Also, I would like the "Add Game" hyper link to replicate itself every time I click that link.

<html>
<script>
function addFields1(){
var container = document.getElementById("container1");
//remove button
var addGameButton = document.getElementById("filldetails");
container.removeChild(addGameButton);
//create and insert input/text
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createTextNode("Add Game"));
container.appendChild(document.createElement("br"));
//create and insert button
addGameButton = document.createElement("a");
addGameButton.id="filldetails"
addGameButton.href="#";
addGameButton.onclick=function(){addFields1();};
addGameButton.text="Add Game";
container.appendChild(addGameButton);
}
</script>
<body>
<form>
<div id="container1">
<input type="text" id="member1" name="member1" value="">Add Game<br />
Add Game
</div>
</form>
</body>
</html>

Related

input text of text area after clicking submit button

I am trying to print the input text of a textarea to the console.
The user would type a message then click a button and then the text would get printed to the console...
Here's my HTML:
<form action='/send_message' method='POST'>
<textarea name='message' id='message_box'></textarea>
<input name='receiver_id' type='text' id='number' style="display: none" value="{{info[0][0]}}">
<button id='btn' class='btn btn-primary' type='submit'>Message {{info[0][2]}}</button>
</form>
and here is the JS:
var message = $('textarea#message_box').val();
var button = document.getElementById('btn');
button.addEventListener('click',function(){
console.log(message)
});
The problem is that I get an empty message in the console no matter if the area is empty or containing text.
I tried various combinations of val(), text, innerHTML but I pretty much always get the same empty output...
You need to get the value of textarea when the button is clicked so assign the message variable inside the event listener. Because we want to get the value of textarea each time button is clicked.
var button = document.getElementById('btn');
button.addEventListener('click', function() {
var message = $('textarea#message_box').val();
console.log(message)
});

Button onclick attribute error

Hello i am having some technical issues with my HTML code and javascript so to begin.
i have the <P id="One">and i need once you click the All courses input to redirect you to another page and completly disapear himself using javascript.
<p id="One" >
<input type="button" onclick="allCourses()" value="All Courses" />
<input type="button" onclick="" value="1st Year" />
</p>
and the Javascript i am using is
function allCourses(){
document.getElementById("One").innerHTML="";
var input = document.createElement('button');
var value = document.createTextNode("Go to Google");
input.appendChild(value);
//input.type = "button";
//input.onclick="location.href = 'www.yoursite.com';
//input.value="Go to Google";
var element = document.getElementById("One");
element.appendChild(input);
}
function Google(){
location.href = 'www.yoursite.com';
}
The button works like charm but as soon i attack the onclick attr it doesn't do nothing!

Add a specific number of input fields

I'm sure this is a simple mistake on my end but I cannot figure it out. I want users to be able to enter a number in a form field, click a button, then that many fields will be created. Here is my HTML and JavaScript so far. The removeChild works but it will not add fields:
<body>
<script language="javascript">
function addFields(){
var numFields = document.getElementById("numParts").value;
var theContainer = document.getElementById("partsList");
//document.write(numFields);
while (theContainer.hasChildNodes()) {
theContainer.removeChild(theContainer.lastChild);
}
for(i=0;i<numFields;i++){
var input = document.createElement("input");
input.type = "text";
input.name = "participant" + i;
theContainer.appendChild("input");
theContainer.appendChild(document.createElement("br"));
}
}
</script>
<form name="enterFields">
<input type="text" id="numParts" />
<input type="button" value="Add" onClick="addFields();" />
<div id="partsList">
<input type="text" />
</div>
</form>
</body>
The problem is that when you try to add the input with appendChild you are specifying a string, when you should be passing the actual element.
This is what you want (note the lack of quotes):
theContainer.appendChild(input);
Here is a working example

is it possible to update html content in a page using Javascript?

I have a html page with textbox and button.
textbox
button
If I enter some text in textbox and on click on the button, it should update the HTML page like this:
text entered with h1 tag
textbox
button
Is this possible with Javascript?
Yes, it is possible. Tempted to leave it at that, but...
window.onload = function() {
var h1 = document.createElement("H1");
var txt = document.getElementById('mytext');
document.body.insertBefore(h1, txt);
document.getElementById('mybutton').addEventListener('click', function() {
h1.innerHTML = txt.value;
});
};
<input type="text" id="mytext" value="" />
<input type="button" id="mybutton" value="Send it" />
$('textarea').keyup(function () {
var mystring = $(this).val();
$('p').text(mystring);
});
Sure, with javascript.

Showing more form inputs on selection

So I am trying to create a bit of a listing page. So basically they enter the details about a product. A button below says "Add another product".
How would I go about making it so when someone clicks the button, it shows another set of html <input>?
you can use jQuery to append an input on click:
HTML
<div class="container">
<input type="text"/>
</div>
<button>ADD</button>
JS
$("button").click(function(){
$(".container").append("<input type='text'/>");
});
EXAMPLE 1
OR
with plain javascript:
HTML
<div id="container">
<input type="text"/>
</div>
<button onclick="add()">ADD</button>
JS
function add(){
var newInput = document.createElement("input");
newInput.type = "text";
document.getElementById("container").appendChild(newInput);
}
EXAMPLE 2

Categories