I'm trying to code a function where you can insert as many new input fields as the user want in JavaScript. Here is my code :
<SCRIPT language="javascript">
function add() {
var element = document.createElement("input");
element.setAttribute("type", 'text');
element.setAttribute("value", 'text');
element.setAttribute("name", 'text');
var foo = document.getElementById("fooBar");
foo.appendChild(element);
}
</SCRIPT>
Html Part
<form>
<input type="text" name="answer" autofocus="autofocus" ONBLUR="if(this.value!=''){this.form.submit()};" placeholder="Modify answer"/>
<span id="fooBar"> </span>
<input type="button" value="Add" onclick="add()"/>
</form>
This is working well, but not if I put it in this html structure :
<table>
<tr><td><form> <!--my html part -include the second form--> </form></td></tr>
</table>
I don't really know why, as I'm not expert in js.. Is that because I'm in a td tag or because one form is inside the other.
If anyone can help or have another solution to achieve what I want, would be really greatful
Cheers
Related
I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>
I'm currently trying to make a form where people can input information, and the info will then show up in a new div afterwards within a paragraph tag.
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
The way I'm currently trying to make it work is by having a function that looks at what information gets filled out, this is done by;
function othername() {
var input = document.getElementById("userInput").value;
}.
This way I am able to "save" the info, but my issue comes when I have to make it appear I a paragraph later on. I cannot for the life of me, figure out how to recall this stored information. The way I have tried is the following:
function addParagraphs()
{
var para = document.createElement("p");
var node = document.createTextNode(othername());
para.appendChild(node);
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
The "sizeValgt" is the id for the new div where the paragraph tag, is gonna be created when filling out the information.
This might be a little confusing, but I hope some people are able to understand what I'm trying to do here.
There are some mistakes in your code
First: : you are not returning value from your othername function
Second: you are not adding this value in p tag
function othername() {
var input = document.getElementById("userInput").value;
return input;
}
function addParagraphs(){
var para=document.getElementById("test");
if(para==null){
para = document.createElement("p");
para.id="test";
}
para.innerText=othername();
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
<div id="sizeValgt"></div>
You can do it simply in jquery. Example:
HTML
<input type="text" id="uinput"/>
<input type="submit" id="usubmit"/>
<p id="dis"></p>
Jquery
$(document).ready(function(){
$('#usubmit').click(function(){
var utext= $('#uinput').val();
$('#dis').html(utext);
});
});
function js() {
document.getElementById("example").innerHTML = document.getElementById("example").innerHTML+"<input type=\"text\" name=\"name\" />";
}
<div id="example">
<input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>
I have a form, which need variable number of input types.
<form action="" method="">
[...]
<div id="mezok">
<div id="input_id">
<input type="text" name="name" />
</div>
</div>
[...]
</form>
I add and remove further inputs (along with their divs!) via an ajax call. Javascript calls a php which generates a new input_id div, and then concatenates to the rest of the div id="mezok". Adding and removing inputs are fine as long as everything is empty. However, when I add a new div when there is something in the input, it clears the rest of the inputs.
document.getElementById("mezok").innerHTML = document.getElementById("mezok").innerHTML+http.responseText;
document.getElementById("mezok").innerHTML += http.responseText;
document.getElementById("mezok").innerHTML.concat(http.responseText);
(The last one is not working at all...)
TL;DR: concat input to input, values of inputs disappear. :'(
Don't use innerHTML. What you are doing is redrawing the entire container contents, deleting existent inputs and creating new inputs each time. My experience says that when you are accessing innerHTML, recheck your code as you are probably doing something weird.
What you have to do is to create inputs individually and append them to the container, without touching the rest of the inputs. Is like appending elements to an array.
This way the code is more self-explanatory, and better, is way more performant:
function js() {
var input = document.createElement("input"); // Create a new input element. Is like "<input>".
input.setAttribute("type", "text"); // Set the 'type' attribute to 'text'. Is like having '<input type="text">'
input.setAttribute("name", "name[]"); // Set the 'name' attribute to 'name[]'. Is like having '<input name="name[]">' but because you already have set the type, now is like having '<input type="text" name="name[]">'
document.getElementById("example").appendChild(input); // Push it to the container
}
<div id="example">
<input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>
The code below could be a solution for you. In this way you're not going to overwrite the existing inputs with the associated values while you're adding new inputs.
function js() {
var inputElementToAppend = document.createElement('input');
inputElementToAppend.innerHTML = "<input type=\"text\" name=\"name\" />";
document.getElementById("example").appendChild(inputElementToAppend.firstChild);
}
<div id="example">
<input type="text" name="name[]" />
</div>
<button type="button" onclick="js();">Click</button>
Let me know if this worked for you.
Following working fine for me.
<button onclick="myFunction()">Try it</button>
<p id="demo">ABC</p>
<script>
function myFunction() {
var x = document.getElementById("myP").innerHTML;
document.getElementById("demo").innerHTML += `<input type=\"text\" name=\"name\" />`;
}
<script>
I would recommend to use appendChild and removeChild instead of innerHTML
I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});
Ok so basically what i'm trying to do is create an html document that allows the user to input any thing they want with any number of choices and click a button and get one of the things they typed in to be chosen at random. My girlfriend is really indecisive and sometimes takes hours to make a choice when i'm not around so i thought i'd write her a code to help. I'm not exactly sure how to go about this. I have searched around for a few hours and have found nothing about this. Sorry if it's something extremely simple but any help would be greatly appreciated. So far i have this as a code to get a text box and make a new one appear by clicking the button
`
<html>
<head>
<script type="text/javascript">
var instance = 1;
function newTextBox(element)
{
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
//document.body.write("<br>");
document.body.insertBefore(newInput, element);
document.body.insertBefore(document.createElement("br"), element);
}
</script>
</head>
<body>
<input id="text2" type="text" name="text1"/> <br>
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>`
I think this should work:
HTML:
<input type="button" value="Get Random" onclick="selectRandomInput();"/> <!-- select a random element among [1,instance] elements. -->
JS:
function selectRandomInput(){
var selectedId=Math.floor(Math.random()*instance+1);
for(var i=0;i<document.getElementsByTagName("input").length;i++){
element=document.getElementsByTagName("input")[i];
if(element.id!=selectedId && element.type!="button")
element.style.display="none";
}
}
PS: A better solution is to add a class to input text elements, and iterate over those having this class instead of all input tags.