Found a nice website for an alternative to using /forms in share point. My code below though does not print my input to the screen. Any Suggestions.
<script type="text/javascript">
function printvalues()
{
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">
Generate!
</button>
<div id="divId">
</div>
There's two issues with your code.
First, you're missing a closing </div> tag; and you have two <div> elements with the same id property! I think you should remove the first div's id property.
Second, your <input /> is missing the id property, therefore it's not automatically defined by inputobj1.
Try this markup:
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += document.getElementById("inputobj1").value;
}
</script>
<div>
username: <input id="inputobj1" name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">Generate!</button>
<div id="divId"></div>
</div>
Here's a working jsFiddle.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="javascript:printvalues();">
Generate!
</button>
<div id="divId"></div>
</div>
or
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button">
Generate!
</button>
<div id="divId"></div>
</div>
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
$('#idButton').click(function(){
printvalues()
})
</script>
You had 2 divId's as well, i made an assumption on witch on to use
this doesnst work because you have two div with id="idButton" and your markup is not closed
this may also work as you tagged jquery
function printvalues() {
var value = $('input[name="inputobj1"]').val();
var $div = $('<div>',{text:value});
$('#divId').append($div);
}
or using the divId div
function printvalues() {
var value = $('input[name="inputobj1"]').val();
$('#divId').text(value);
}
Related
I have a tool that is supposed to be an easy way to create a checklist, and it works, but what happens when I use it for something with two checkboxes, it creates a new line between each one, is there a way to stop it from doing that? my code is here for yes/no
<!DOCTYPE html>
<html>
<h1>Create a checklist</h1>
<div>
<input type="text" placeholder="Text for object" id="txt" />
<button onclick="addYN()">Add yes/no</button>
</div>
</html>
<div style="background-color: grey;" id="prv"></div>
<script>
var pv = document.getElementById("prv");
var txt = document.getElementById("txt");
function getVarYn() {
let tx = txt.value;
return (
"<div><p>" +
tx +
"</p> <p> yes</p> <input type = 'checkbox'/> <p>no </p> <input type = 'checkbox'/> </div> "
);
}
function addYN() {
var t = txt.value;
pv.innerHTML = pv.innerHTML + getVarYn();
}
</script>
The problem is not the <div> you create but all the <p> tags. <p> tags are paragraphs and they do create "a new block/line"
See like so you would have no new lines
var pv = document.getElementById("prv");
var txt = document.getElementById("txt");
function getVarYn() {
let tx = txt.value;
return (
"<div>" +
tx +
" yes<input type = 'checkbox'/>no<input type = 'checkbox'/> </div> "
);
}
function addYN() {
var t = txt.value;
pv.innerHTML = pv.innerHTML + getVarYn();
}
<h1>Create a checklist</h1>
<div>
<input type="text" placeholder="Text for object" id="txt" />
<button onclick="addYN()">Add yes/no</button>
</div>
<div style="background-color: grey;" id="prv"></div>
Note: the closing </html> element should always be the very last element of your HTML document. And everything else should be inside the <body> element which you do not have. The basic structure looks like so
<!DOCTYPE html>
<html>
<body>
<!-- ADD all your HTML content here -->
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<!-- BUT NOW you need to finish with all the HTML here -->
<!-- THE VERY LAST thing here before the closing </body> -->
<!-- should be the <script> tags -->
</body>
</html>
I write with translate.
I want the input text to appear in the paragraph, then click the button .
html code:
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
JS code:
var txt = JSON.parse(demo);
function myFunction() {
var txt = JSON.parse(demo);
function myFunction() {
document.getElementById("test").innerHTML = txt;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
You need to get the value of the input in the function. There's no need to use JSON.parse.
function myFunction() {
document.getElementById("test").innerHTML = document.getElementById("demo").value;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
function copyToParagraph() {
var inputValue = document.getElementById('txtInput').value;
var paragraphEle = document.getElementById('par');
paragraphEle.innerHTML = inputValue;
console.log(inputValue);
console.log(paragraphEle);
}
<input type="text" id="txtInput" />
<br/>
<button onclick="copyToParagraph()">Click Me to Copy</button>
<br/><br/><br/>
<p id="par"></p>
You need to make a var input = document.getElementById('input').value; So that you have the value. Then do this:
function myFunction() {
var input = document.getElementById('input').value;
document.getElementById('demo').innerHTML = input;
}
I have a button called 'AddTextArea', on clicking, I get new text area, but how can I get the values that I have entered in the new text areas?
I tried like this-
var x= document.getElementById("div_quotes").value;
but it's not working.
Please help, as I am new to JS, thanks in advance.
<html>
<head>
<script type="text/javascript">
function addTextArea(){
var div = document.getElementById('div_quotes');
div.innerHTML += "<textarea name='new_quote[]' />";
div.innerHTML += "\n<br />";
}
</script>
</head>
<body>
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>
var x= document.getElementById("div_quotes").value;
Above code will not work as div_quotes is a div and div do not have value property.
You will have to search for textareas in this div.
Sample
function addTextArea() {
var div = document.getElementById('div_quotes');
div.innerHTML += "<textarea name='new_quote[]' />";
div.innerHTML += "\n<br />";
}
function validate(){
var tas = document.querySelectorAll('#div_quotes textarea[name="new_quote[]"]')
for(var i = 0; i< tas.length; i++){
console.log(tas[i].value)
}
}
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="button" name="submitted" onclick="validate()" value="Validate">
</form>
Version 2
Now if you notice in above sample, if you type and then add another textarea, it will flush value of previous ones. This is because, you are setting .innerHTML += .... This will destroy and recreate all elements again. You should use document.createElement
function addTextArea() {
var div = document.getElementById('div_quotes');
var wrapper = document.createElement('div')
var ta = document.createElement('textarea');
ta.name = "new_quote[]"
wrapper.append(ta);
div.append(wrapper)
}
function validate(){
var tas = document.querySelectorAll('#div_quotes textarea[name="new_quote[]"]')
for(var i = 0; i< tas.length; i++){
console.log(tas[i].value)
}
}
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="button" name="submitted" onclick="validate()" value="Validate">
</form>
You can add a CSS Class to the new text area that is generated and get the data using
var x = document.getElementsByClassName("dynamicTxtArea")
I have added the class to the Text area that is being dynamically generated. Please check the code below.
<html>
<head>
<script type="text/javascript">
function addTextArea(){
div.innerHTML += "<textarea name='new_quote[]' class='dynamicTxtArea'/>";
div.innerHTML += "\n<br />";
}
</script>
</head>
<body>
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>
I try to add input dynamically. However each input I add is blank without a name.
$(document).ready(function() {
var moreUploadTag = '';
$('#attachMore').click(function() {
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
The purpose I left it blank without a name is I want to crate the name dynamically:
$('#addName').click(function(){
//$('input').attr("name", $(this).attr("name") + "test");
var named = $('input').val();
$('input').attr("name", $('input').attr("name") + named);
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
However it adds name to all input.
My question is how to add name input each of the inputs?
Thanks in advance for the help. Cheers.
Are you looking for something like this?
$('#addName').click(function(){
$('input').each(function(){
var input = $(this);
input.attr("name", input.val());
});
});
$(document).ready(function() {
$('#attachMore').click(function() {
var moreUploadTag = '';
moreUploadTag += '<input type="text"/>';
jQuery(moreUploadTag).detach().appendTo("#boxed");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxed">
<input type="text" name="" />
</div>
<p id="attachMore">attachMore</p>
<p id="addName">addName</p>
I think the problem is you need to tell jquery what name goes with what input.
var inputHtml = '<div class="inputGroup"><input type="text" /><button class="addName">add name</button></div>';
var yourname = 'allen';
$('.body').on('click', '.addInput', function() {
$('.target').prepend(inputHtml);
});
$('.body').on('click', '.addName', function() {
if($(this).siblings('input').length) {
$(this).siblings('input').attr('name', yourname);
// debug
alert($(this).parent().children('input').attr('name'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="body">
<div class="target"></div>
<button class="addInput">add input</button>
</div>
So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>