I'm working on this project where I need to have the value of a textarea change when one of the input values in the same form changes.
HTML:
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add" name="product1" />
<input type="text" class="add" name="product2" />
<input type="text" class="add" name="product3" />
<input type="text" class="add" name="product4" />
</form>
The customer is allowed to change the input.class.
The textarea-value should change whenever one of the inputs changes.
The textarea should show something like:
3 x product1
1 x product3
4 x product4
Anybody got an idea?
Thanks in advance,
Joel
<textarea readonly class="overview" id="mytxtarea"></textarea>
$("#product1").blur(function(){
if($("#product1").val()!='')
{
$("#mytxtarea").val('test value');
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form .add').on('keyup', function(){
console.log('test');
var string1 = $('#form .product1').val() + ' x product1\n';
var string2 = $('#form .product2').val() + ' x product2\n';
var string3 = $('#form .product3').val() + ' x product3\n';
var string4 = $('#form .product4').val() + ' x product4';
$('#form textarea').val(string1 + string2 + string3 + string4);
});
});
</script>
</head>
<body>
<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add product1" name="product1" />
<input type="text" class="add product2" name="product2" />
<input type="text" class="add product3" name="product3" />
<input type="text" class="add product4" name="product4" />
</form>
</body>
</html>
$(".add").keyup(function () {
var app=""
$(".add").each(function () {
if( $(this).val() ) {
var value=$(this).val();
var name=$(this).attr('name');
app +=value+"*"+name+ "\n" ;
}
});
$(".overview").text(app);
});
Watch this.
Hope this will give you some solution.
This will do what you want...
$("input.add").keyup(function() {
var msg = "";
$("input.add").each( function() {
if( $(this).val() ) {
msg += $(this).val() + "x " + $(this).attr("name") + "\n";
}
});
$("textarea.overview").text(msg)
});
I used this with your HTML here: http://jsfiddle.net/XYXpp/
$('input').keyup(function () {
var inputedValue = $(this).val();
var name = $(this).attr('name');
$(".overview").text(inputedValue+name);
});
var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())
will return
['field_name=9&field_name=15&field_name=10']
you will then have to parse the info in your view
Related
Let us say I have an HTML form, with two textboxes, I want to add the two numbers in the two textboxes and display the result in a paragraph. How can I do that?
Change paragraph according to textbox is what I can't find!
Very simple:
document.getElementById('sum').onsubmit = add;
function add(e) {
e.preventDefault();
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result = 'Result: ' + String(parseInt(num1) + parseInt(num2));
var p = document.getElementById('result');
p.innerHTML = result;
}
<form id="sum">
<label for="num1">First number:</label>
<br />
<input type="text" id="num1" />
<br />
<label for="num1">Second number:</label>
<br />
<input type="text" id="num2" />
<br />
<input type="submit" value="Add" />
</form>
<p id="result">Result:</p>
In the html we have a form with 3 inputs, 2 are type text and one is type submit. and also a paragraph.
In the javascript we assign to the form's onsumbit event the function add(), in the function we prevent the default so the form wont refresh the page, then we get the 2 values that were inputed, create a string that would contain the sum of those values and set the paragraph's innerHTML to it.
Create a calculator function and then you can fire it on keyup or you can assign it to a button if you'd like.
function calcTotal(){
var inputs = document.getElementsByTagName('input'),
result = 0;
for(var i=0;i<inputs.length;i++){
if(parseInt(inputs[i].value))
result += parseInt(inputs[i].value);
}
document.getElementById('total').innerHTML = 'Total: ' + result;
}
<form>
<input onkeyup="calcTotal()" type="text" />
<input onkeyup="calcTotal()" type="text" />
</form>
<p id="total"></p>
follow bellow JS code:
<html>
<head>
<title>Sum Two Number</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
if(val1 !== "" && val2 !== "") {
var result = val1 + val2;
document.getElementById('result').innerHTML = result;
}
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="0" onkeyup="javascript:addNumbers()"/>
value2 = <input type="text" id="value2" name="value2" value="0" onkeyup="javascript:addNumbers()"/>
<p>Answer = <span id="result"></span></p>
</body>
</html>
In this example, you have a form with 2 input. When you press on a button, the value of those 2 input is added inside a paragraph.
Hope this help.
function addInputContentToParagraph() {
var txtValue1 = document.getElementById('textbox1').value;
var txtValue2 = document.getElementById('textbox2').value;
document.getElementById('para').innerHTML = txtValue1 + ' ' + txtValue2;
}
a {
cursor:pointer;
border:1px solid #333;
padding:4px;
margin:10px;
display:inline-block;
}
<form id="myForm" name="myForm">
<input type="text" name="textbox1" id="textbox1" value="1">
<input type="text" name="textbox2" id="textbox2" value="2">
</form>
<a onclick="addInputContentToParagraph();">Add Input Values to Paragraph</a>
<p id="para"></p>
I have this code.
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<div id="text"></div>
<form name="formulario" onsubmit="return procesar(this);">
Ingrese la funcion:
<input name="func" type="text" size="15" />
<input type="submit" value="Procesar" />
</form>
JavaScript Code:
//Calculo de derivada
var func = document.getElementsByName("func")[0].value;
var result = nerdamer('diff(2x^3+3x^2)').evaluate();
document.getElementById('text').innerHTML += '<p>'+result.text()+'</p>';
I need that when I introduce manually the function, on input, when I click on ''Procesar'' calculate derivate. Thank you, I dont know how... need help.
I mean, save the value pass to the function and show result.
I don't know that library, but it seems you can differentiate an expression expr with
nerdamer.getCore().Calculus.diff(nerdamer(expr).symbol).text()
It's a bit long, but safer than nerdamer("diff(" + expr + ")") in case expr is malformed.
Then, you can use
document.forms.formulario.addEventListener('submit', function(e) {
e.preventDefault(); // Don't send form
var expr = this.elements.func.value,
diff = nerdamer.getCore().Calculus.diff(nerdamer(expr).symbol).text();
document.getElementById('text').textContent = diff;
});
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<form name="formulario">
Enter function:
<input name="func" type="text" size="15" />
<input type="submit" value="Differentiate" />
</form>
<div id="text"></div>
You have to create procesar function :
function procesar(_this){
//Calculo de derivada
var func = document.getElementsByName("func")[0].value;
var result = nerdamer('diff(2x^3+3x^2)').evaluate();
document.getElementById('text').innerHTML += '<p>'+result.text()+'</p>';
return false; //Prevent the refresh
}
Hope this helps.
This shows derivative:
function Differentiate(sender) {
var func = document.getElementsByName("func")[0].value.trim();
var result = nerdamer('diff(' + func + ')').evaluate();
var html = document.getElementById('text').innerHTML;
html = '<p>' + result.text() + '</p>' + html;
document.getElementById('text').innerHTML = html;
}
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<form name="formulario" method="get" onsubmit="return Differentiate(this);">
Ingrese la funcion:
<input name="func" type="text" size="15" />
<input type="submit" value="Differentiate" />
</form>
<div id="text"></div>
Unfortunately I am unable to comment under the accepted answer but would like to make a slight modification to it which should achieve the same result. Also keep in mind that if your function contains more than one variable then you need to specify with respect to which variable you're differentiating.
document.forms.formulario.addEventListener('submit', function(e) {
e.preventDefault(); // Don't send form
var value = this.elements.func.value,
deriv = nerdamer('diff('+value+')').text();
document.getElementById('text').textContent = deriv;
});
<script src="http://nerdamer.com/js/nerdamer.core.js"></script>
<script src="http://nerdamer.com/js/Algebra.js"></script>
<script src="http://nerdamer.com/js/Calculus.js"></script>
<form name="formulario">
Ingrese la funcion:
<input name="func" type="text" size="15" />
<input type="submit" value="Procesar" />
</form>
<div id="text"></div>
Im not sure why I cannot dynamically write to the paragraph element. I've even tried with just a string to no avail. What am I doing wrong here? Im guessing the default behavior is to POST because that's all that happens, even though I'm not telling it to do it.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
<!--
function submit() {
var fName = "";
var lName = "";
var eLevel = "";
fName = document.person.elements["fName"].value;
lName = document.person.elements["lName"].value;
eLevel = document.person.elements["eLevel"].value;
var result = fName + " " + lName + "<br>" + eLevel;
document.getElementById("result").innerHTML = result;
};
//-->
</script>
</head>
<body>
<form action="" id="person">
Please fill in all fields.<br /><br />
<fieldset><legend>Name:</legend>
First: <input type="text" id="fName" name="fName" /><br /><br />
Last:
<input type="text" id="lName" name="lName" />
</fieldset>
<br />
<fieldset>
<legend>Education:</legend>
Highest Level:
<input list="eLevels" name="eLevel" />
<datalist id="eLevels">
<option value="High School">
<option value="Associate Degree">
<option value="Bachelors Degree">
<option value="Graduate Degree">
</datalist>
</fieldset>
<br /><button value="click" onclick="submit()">click</button>
</form>
<p id="result"></p>
</body>
</html>
You need to preventDefault on the form submit, this way your code can execute.
function submit(event) {
event.preventDefault();
var fName = "";
var lName = "";
var eLevel = "";
fName = document.person.elements["fName"].value;
lName = document.person.elements["lName"].value;
eLevel = document.person.elements["eLevel"].value;
var result = fName + " " + lName + "<br>" + eLevel;
document.getElementById("result").innerHTML = result;
};
For the event parameter you will need to pass it in the onClick() event
<button value="click" onclick="submit(event)">click</button>
I'm making just a simple math learning helper to help me learn javascript. I want to refresh The textbox after a wrong answer(the page refreshes after a right answer to get a new question), but I want the question to be the same if you get it wrong. Here's my code:
<!doctype html>
<body>
<center>
<font size="5">
<form Id="Input">
<input type="text" name="Input">
<input type="button" value="submit" ID="Button">
</form>
<script type="text/javascript">
Button.addEventListener("click", Answer);
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A +B;
var Input = document.getElementById('Input');
document.write(A + "+" + B + "=");
function Answer() {
if(Input.Input.value == C) {
alert("correct!");
window.location.reload();
} else {
alert("incorrect!");
document.getElementById('txtField').value='new value here'
}
}
</script>
</body>
</html>
You just need to give the txtField id to the text input here is a working fiddle http://jsfiddle.net/eFf27/
<input id="txtField" type="text" name="Input">
You forgot to add an ID to your text box.
<!doctype html>
<body>
<center>
<font size="5">
<form Id="Input">
<input id="txtField" type="text" name="Input">
<input type="button" value="submit" ID="Button">
</form>
<script type="text/javascript">
Button.addEventListener("click", Answer);
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A +B;
var Input = document.getElementById('Input');
document.write(A + "+" + B + "=");
function Answer()
{
if(Input.Input.value == C)
{
alert("correct!");
window.location.reload();
}
else
{
alert("incorrect!");
document.getElementById('txtField').value='new value here'
}
}
</script>
</body>
</html>
hi guys i am new to js and html.I need a o/p as when click the button tat should show the all contents entered in form...
My code for giving alert of all entered data in single
how can I add values of form textbox using string ,for loop all should be only in javascript...or else give your own code with the conditions i said....
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
function processFormData()
{
var len= document.getElementsByTagName('name');
var str1=null;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str=str1+str;
}
alert(str);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
Try that for a start
var len= document.getElementsByTagName('input').length;
// add that you want the number of element
// Change 'name' for 'input' when using 'name' you are looking for <name in the HTML
// if you want the element with the name ABC use getElementsByName()
var str1='';
for(i=0;i<=len;i++)
{
var str=(subscribe[i].value);
str1=str1+str;
}
alert(str1);
jsFiddle example (in jQuery for the calling of the function) : http://jsfiddle.net/DavidLaberge/HPuhg/1/
<html>
<head>
<title>elements in a form</title>
<script type="text/javascript">
var str1=null;
function processFormData()
{
var len= document.getElementsByTagName('name').length;
for(i=0;i<=len;i++)
{
var str=(subscribe.name[i].value);
str1=str1+str;
}
alert(str1);
}
</script>
</head>
<body>
<form name ="subscribe" >
<p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name" value="name"></p>
<p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email" value="mail"></p>
<input type="button" value="submit" onclick="processFormData()">
</form>
</body>
</html>
you have just minor mistake that is you used str in place of str1; Now use the above code.
Try something like:
function processFormData() {
var inputs = document.getElementsByTagName("input"),
i,
len,
stringBuffer = [],
str;
for (i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type.toLowerCase() === "text") {
stringBuffer.push(inputs[i].value);
}
}
str = stringBuffer.join(""); // str contains concatenated values of all inputs
}
Try this:
function processFormData()
{
var len= document.getElementsByTagName('input').length;
var str = '';
for(i=0;i<len-1;i++)
{
str += document.subscribe[i].value;
}
alert(str);
}