Contents From Two Divs to One Input Field Value - javascript

I'm trying to insert the contents of the two divs into a single input field in a form.
This is what I have so far but at the moment the only field that copies over when the onclick occurs is the edit1 div contents.
any help would be greatly appreciated.
The JAVASCRIPT:
<script language="javascript" type="text/javascript">
function copyText2() {
var output = document.getElementById("edit1","edit2").innerHTML;
document.getElementById("user-submitted-tags").value = output;
}
</script>
The HTML:
<div id="edit1">foo</div>
<div id="edit2">bar</div>
<form>
<input class="usp_input" type="text" name="user-submitted-tags" id="user-submitted-tags" value="">
<input onClick="copyText2()" class="usp_input" type="submit" name="user-submitted-post" id="user-submitted-post" value="Submit Post">
</form>

Get the two contents separately, and then add them.
var output1 = document.getElementById("edit1").innerHTML;
var output2 = document.getElementById("edit2").innerHTML;
document.getElementById("user-submitted-tags").value = output1 + " " + output2;

Change
var output = document.getElementById("edit1","edit2").innerHTML;
into
var output = document.getElementById("edit1").innerHTML + document.getElementById("edit2").innerHTML;
That should work.

You should copy them one at a time and then concatenate
function copyText2() {
var output = "";
output += document.getElementById("edit1").innerHTML;
output += document.getElementById("edit2").innerHTML;
document.getElementById("user-submitted-tags").value = output;
}

document.getElementById("") is only using the first id string you give it. It doesn't accept multiple ids. From the Mozilla Dev docs:
id is a case-sensitive string representing the unique ID of the
element being sought.
Just have output grab the content from the first id, then from the second and append them together.

Related

How to add new lines after HTML elements

I have a simple method for adding input boxes after a button is clicked. The goal of this method is to generate a set of input boxes with a newline inserted after each div.
In the screenshot above you can see that the divs are spaced properly. However, when the add_more button is clicked the generated inputs do not come out properly.
Expected:
The code should generate new input boxes like so:
<div>
Key Term 2: <input id="el2" type="text" value=""> <br>
</div>
<br>
Actual:
function add_more() {
// we've added more inputs.
addMore = true;
// set html generated to false, because new inputs have been added.
htmlGenerated = false;
// increment the number of inputs.
numberOfInputs++;
//fetch the input boxes.
inputs = document.getElementById("inputBoxes");
// create newline
br_key = document.createElement("br");
// create newline
br_description = document.createElement("br");
//create a new row for a key term.
row = document.createElement("div");
// set the key term text.
row.innerHTML = "Key Term ";
row.innerHTML += numberOfInputs;
row.innerHTML += " :";
// create the input for the key.
key = document.createElement("input");
key.setAttribute("id", "el" + numberOfInputs);
//add the key to the row.
row.appendChild(key);
row.after(br_key);
//create a row for the new description.
row2 = document.createElement("div");
// set the description text.
row2.innerHTML = "Description "
row2.innerHTML += numberOfInputs;
row2.innerHTML += " :";
// create the description input
description = document.createElement("input");
description.setAttribute("id", "dl" + numberOfInputs);
// add the description to the row.
row2.appendChild(description);
row2.after(br_description);
// add the rows for the key and the description to the inputBoxes.
inputs.appendChild(row);
inputs.appendChild(row2);
}
<div>Key Term 5 :<input id="el5"></div>
Any help figuring out this issue would be greatly appreciated. Thanks.
Your issue here is essentially incorrect HTML, CSS. I'd implement your inputs, etc. like this:
.full-width-label {
display:block;
}
<label class="full-width-label" for="1">Label</label>
<input type="text" id="1"/>
There are multiple ways to achieve the above, this is just one of your options but now you no longer need to embed the look into the HTML and the format of your HTML (line breaks) is independent of your look.
You might want to look into an off the shelf solution for these kinds of things, like Bootstrap or Tailwind
You can use make it in a simple way
HTML
add this jquery cdn
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<button type="button">Click Here</button>
<div class="appendDiv">
</div>
Js
$(document).ready(function (){
var button = document.getElementsByTagName('button');
var appendDiv = document.getElementsByClassName('appendDiv');
var key = 1;
var descKey = 1;
$('button').click(function(event){
event.preventDefault();
$(appendDiv).append('<div class="child"><div class="grand-child"><label>Key Form :'+ ' '+(++key)+'</label><input type="text" value=""/></div><div class="grand-child"></div><label>Description :'+ ' '+(++descKey )+'</label><input type="text" value=""/></div>');
})
})

Javascript Event Listener to change paragraph text onclick of button doesn't work?

The <p> text doesn't change when I click the button.
An alert message shows that output and text variables are correct. But still the Inner Text of <p> doesn't change.
Here's the HTML:
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
This is the JS:
function Message(){
var text = document.getElementById("msg").value;
var output = document.getElementsByClassName("msg")[0].innerHTML;
output = text;
}
You have to set the message directly onto the innerHTML property of the DOM node. Fixed example:
function Message() {
var text = document.getElementById("msg").value;
document.getElementsByClassName("msg")[0].innerHTML = text;
}
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
Your defining a variable output to the value of document.getElementsByClassName("msg")[0].innerHTML then you are changing the value of output to be the value of text.
Primitives in javascript are passed by value, not by references.
Change var output = document.getElementsByClassName("msg")[0].innerHTML;
to document.getElementsByClassName("msg")[0].innerHTML = text
If you say something like:
var output = document.getElementsByClassName("msg")[0].innerHTML;
The value of output will just be some kind of string or similar.
Then when you change that you just change the value of the string but not the element.
What you want to do is this:
var output = document.getElementsByClassName("msg")[0];
output.innerHtml=text;
function Message(){
var text = document.getElementById("msg").value;
document.getElementsByClassName("msg").innerHTML = text;
}
You were super close.
Remove the innerHTML from var output = document.getElementsByClassName("msg")[0].innerHTML;
and add it here:
output.innerHTML = text;
So it'll look like this.
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
<script>
function Message(){
var text = document.getElementById("msg").value;
var output = document.getElementsByClassName("msg")[0];
output.innerHTML = text;
}
</script>

Iterating over dynamically generated input field ids and using keyup to get their values in a separate input field

The mandatory div id gets different numbers of inputs field displayed in it dynamically. Each input field starting from the first gets an id attr1, then attr2,..attr[n]. I need a way to get this into an array that gets the value of each input field with keyup and puts them into a separate input field with id detail.
This code works but returns undefined in some case when the hard coded input field ids exceed the generated input field ids. Thanks.
<div id="attributes"> <!--Start of Div Refreshed on Ajax Page Refresh-->
<div id="mandatory">
</div>
</div>
var total = '#attr1, #attr2';
$("#attributes").on('keyup', total, function(){
update();
})
function update() {
$("#detail").val($('#attr1').val() + "," $('#attr2').val());
}
If I understood right your question I think you're looking for something like that:
var fields = $("#mandatory").find("input"),
ids = [];
fields.each(function(){
$(this).on("keyup", function(){
var val = "";
ids = [];
fields.each(function(){
val += $(this).val() + (fields.length === ($(this).index() + 1) ? "": ", ");
ids.push($(this).get(0).id);
});
$("#detail").val(val);
console.log(ids)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attributes">
<div id="mandatory">
<input id="one" class="one" value="54"/>
<input id="two" class="two" value="55"/>
<input id="three" class="three" value="587"/>
</div>
</div>
<input id="detail" type="text" />
I'm not sure if this is what you're looking for, but I think it'll take you down the right path. In this example, any time a text input field is generated, an input event handler is attached to it that changes the value of a main textarea. If this isn't quite what you're looking for, please let me know and I'll be happy to try to work it out more.
document.getElementById('adder').onclick = function() {
var dynamicTextbox = document.createElement('input');
dynamicTextbox.setAttribute('type', 'text');
dynamicTextbox.setAttribute('class', 'dynamicText');
dynamicTextbox.addEventListener("input", function() {
var allTextboxes = document.getElementsByClassName('dynamicText');
var allValues = '';
for (var i=0; i < allTextboxes.length; i++) {
allValues += allTextboxes[i].value;
}
document.getElementById('detail').value = allValues;
});
document.getElementById('textboxes').appendChild(dynamicTextbox);
}
<textarea id="detail"></textarea>
<input id="adder" type="button" value="Add Text Field" />
<div id="textboxes"></div>

How to print random string from a selection of user form inputs javascript/jquery

var textEntered = function() {
var input = document.userNameForm.userInput.value;
if(input) {
document.getElementById("resultText").innerHTML += input + "<br>";
}
}
This is what I have so far and this obviously just prints out the user inputs onto the screen in a list. But I want to somehow store all these user inputs from the form I have in my HTML, (maybe in an array?) and maybe assign each to a number and use Math.floor(Math.random()) to print out a random result. (I'm just making a little/random site where you put in the names of your friends and it returns and prints a random name from the names that you give it, if that makes sense).
I'm a beginner just so you know
function textEntered() {
var inputs = [];
$('form input').each((i,e)=>inputs.push(e.value));
if (inputs) {
document.getElementById("resultText").innerHTML += inputs[Math.floor(Math.random()*inputs.length)] + "<br>";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input value="Hello">
<input value="World">
<input value="from Stardust">
<button onclick="textEntered()">Submit Now!</button>
</form>
<div id="resultText">Submit it!
<br><br>
</div>
Is this essentially what you are looking for?

How to Basically Add the Values of Two <Button> tags

I think I got the logic part right, another problem I have is the NaN output that I keep receiving when I click on the <button> tags. I did use addEventListener('click') method but it seems more complicated, so I tried this simple codes instead. I'm just having trouble on how to add the values of the buttons, any help would be appreciated.
Here's my code :
<html>
<body>
<script type = "text/javascript">
function test(value)
{
var val = parseFloat(value);
var total = parseInt(document.getElementById('totaltext').value);
document.getElementById('totaltext').innerHTML = total + val;
}
</script>
total : <p id = "totaltext" value = "0">0</p>
<button value = "10.11" name = "product" id = "button1" onClick = "test(this.value);">value1</button>
<button value = "20.00" name = "product" id = "button2" onClick = "test(this.value);">value2</button>
</body>
</html>
https://jsfiddle.net/7tm161ob/1/
Because the elements you are accessing button is not an input tag, the value attribute is not the correct one. value is considered an html attribute in this case that is not directly available in the JavaScript object.
You will need to use the method .getAttribute() to get those values. Here is how it works.
<button value="10.11" name="product" id="button1" onclick="test(this);">value1</button>
<button value="20.00" name="product" id="button2" onclick="test(this);">value2</button>
function test(button) {
var val = parseFloat(button.getAttribute("value"));
var total = parseFloat(document.getElementById('totaltext').getAttribute("value"));
document.getElementById('totaltext').innerHTML = total + val;
document.getElementById('totaltext').setAttribute("value",total + val)
}
Working Example

Categories