Hi im trying to get the number pushed into the array but cant seem to link the input to the array any help please
<html>
<body>
<form id="myform">
<input type="text" name="input">
<button onclick="myFunction()">Add number</button>
</form>
<br>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
<script>
var number= [];
function myFunction()
{
number.push=("myform")
var x=document.getElementById("box");
x.innerHTML=number.join('<br/>');
}
</script>
</body>
</html>
You are assigning, when you should be calling. On top of that you are fetching the value wrong.
number.push(document.getElementById('myform')['input'].value);
You are adding the id of the form as a string. You have to add the value of the field, so that you can get it later:
var number= [];
function myFunction()
{
var input = document.getElementById('input');
number.push(input.value);
var x=document.getElementById("box");
x.innerHTML=number.join('<br/>');
}
Related
Hello and happy new year to everyone :D.
I am currently trying to develop a way to add and delete an input from a form using javascript and jquery.
The problem is i am not familiarized with declaring functions on jquery so I beg for your help because I currently ran out of ideas.
I currently have this.
So the idea is to have 4 buttons in the bottom. Two for add or delete extra inputs for percentages "A", and the other pair to add or delete extra inputs for percentages "B".
I was trying to do it the easy way by declaring four independent functions (i.e addA, removeA, addB, removeB), but i want to achieve this in a few lines. So that's why i opted to declare it as a function with two input parameters. Since i did that the code doesn't work anymore :(
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
$('#edadd').on('click', add('edinpt','edesc'));
$('#edrem').on('click', remove('edinpt','edesc'));
$('#idadd').on('click', add('idinpt','idesc'));
$('#idrem').on('click', remove('idinpt','idesc'));
</script>
</body>
</html>
Thank you so much!
I edited you html, please see below, jquery codes must be inside the $(function(){
and your syntax in on click function is incorrect.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script>
$(function(){
$('#edadd').on('click', function(){
add('edinpt','edesc')
});
$('#edrem').on('click', function(){
remove('edinpt','edesc')
});
$('#idadd').on('click', function(){
add('idinpt','idesc')
});
$('#idrem').on('click', function(){
remove('idinpt','idesc')
});
})
</script>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
</script>
</body>
</html>
I'm trying to simply get the value of an input and put it into a p tag.but it looks like that I'm not getting anything from the input tag
<body>
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
</body>
<script>
const text = document.getElementById('text').value;
function sum()
{
document.getElementById('lblREsult').innerHTML = text;
}
</script>
You get value from input on page load when it's empty, move document.getElementById('text').value into sum function.
And you have an typo, lblREsult !== lblResult
function sum() {
const text = document.getElementById('text').value;
document.getElementById('lblResult').innerHTML = text;
}
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
Hey guys what am I doing wrong here?? I'm sorry if this has been posted before, but I couldn't find a good example with a form input.
Thank you.
I really don't understand why output.value.toUpperCase() doesn't work, or toUpperCase(output.value) wouldn't work.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">
</head>
<body>
<h1 id="title">Capitalize a String</h1>
<form>
<input type="text" id="entry" placeholder="Enter a string to be capitalized">
</form>
<h1 id="title">Output</h1>
<form>
<input type="text" id="output" placeholder="Output">
</form>
<div id="goBtn">
<h1 id="goBtnText">
GO
</h1>
</div>
</body>
</html>
var goBtn = document.getElementById('goBtn');
var entry = document.getElementById('entry');
var output = document.getElementById('output');
goBtn.addEventListener('click', capitalizeStr);
function capitalizeStr () {
output.value = entry.value;
return output.value.toUpperCase();
}
You will need to do
function capitalizeStr () {
output.value = entry.value.toUpperCase();
}
Calling output.value.toUpperCase() does not change the output.value property, it just returns a new string (and the value returned by an event listener is ignored).
I cant for the life of me figure out why the following is not working. I took if from the W3school example here.
Basically I want to take the value from the input text when it changes and modify another div to include the value. I only want the div to show the new value, but I do want it to change it each time so I figured the onchange was the way to go.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + x.value;
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<div id="divID"></div>
</body>
</html>
Thanks in advance for all the help on this one.
You have 2 problems, first is that x is undefined.
second you should use another trigger for this for this to happen each time.
try this out:
function myFunction()
{
var input = document.getElementById('fname')
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + input.value;
}
and change your html to:
<input type="text" id="fname" onkeypress="myFunction()">
x is undefined in your function, it should be document.getElementById('fname').
And if you want to change the div each time you press the key, use onkeyup or onkeypress instead of onchange.
You may change x.value to document.getElementById("fname").value, if I understand your question correctly.
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
</form>
<div id="display"></div>
Ok, so check this out - http://jsfiddle.net/2ufnK/2/
The issue is that you need to define x here,
var x = document.getElementById("fname");
x now references to the html object.
Then you can just call the, ".value", method to get its text. Then everything else works the way you've written it.
I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');