<!DOCTYPE html>
<head lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body>
<section><b><b>
<form action="" target="_blank">
Bill No: <input type="text" name="bill no" size="">
<input type="submit" class="button" value="Add">
<input type="submit" class="button" value="Complete all entries">
<br><br>
Bill Details: <input type="text" name="bill no" size="50">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="53">
<br><br>
<textarea rows="5" cols="50"></textarea>
<br><br>
<label for="To Pay">To Pay:</label>
<select name="mydropdown" id="To Pay">
<option value="Director">Director</option>
<option value="Cheif">Cheif</option>
<option value="RPC">RPC</option></select>
Cheque No: <input type="text" name="Cheque No">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
Date: <input type="date" placeholder="dd-mm-yyyy" name="Dated">
<input type="submit" class="button" value="Ok">
</form>
</article>
</section>
</body>
</html>
i want to crate a form in which i have two buttons on the top when i click on add button then it will be work as bill ,details bill no and amount = textbox(textarea) then these all entry are shown in the textarea and add another entry that all are show as a tablewhen when i complete my all entries i click on complete all entries and than total amount off all entries are show on the bottom of textarea and this total amount automatically show in the bottom amount field. please suggest how can i do this task
As you know the usage of jquery, so I use jquery to get the element:
$(document).ready(function(){
var total=0;
var temp="";
var tempResult=$("#tempResult");
$("#btn1").click(function(){
var billNo=$("#billNo").val();
var billDetails=$("#billDetails").val();
var amnt=$("#amnt").val();
tempResult.val(tempResult.val()+ billNo + "-" +billDetails+ "-" +amnt+"\n");
total+=parseFloat(amnt);
});
$("#btn2").click(function(){
tempResult.val(tempResult.val()+ total);
$("#totalAmount").val(total);
});
});
And I change :
<input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
to
<input type="text" name="amount" id="totalAmount" pattern="[0-9]+" title="please enter amount"size="15">
That all.
First, you need to give an id for every element for example:
<input type="text" id="billNo" size="">
<textarea id="tempResult" rows="5" cols="50"></textarea>
And then add function to capture the button click event.
Change the following HTML:
<input type="submit" class="button" value="Add">
To:
<input type="submit" class="button" value="Add" onclick="addEntry()">
after that add a function:
function addEntry()
{
}
In this function,using the following coding to get the value of the element:
var billNo=document.getElementById("billNo").value;
Finally, using the following coding to write what you want to add to textarea:
var tempResult=document.getElementById("tempResult");
tempResult.value=billNo
For append value to textarea:
tempResult.value+=*what you want to add to textarea*
To parse input value as an integer, you need to use parseInt function, for decimal no. you may use parseFloat function.
Now, you have all the ingredient to complete your function.
For the total amount, ha ha, let you try first.
Related
I would like to insert a number (example 1111) and after submitting get the output (command) like "access userid 1111 instance mbb"
The problem which i have is that the number should be into the text and also how to set the text properly.
See picture below:
This is what i have right now but not working as wished:
HTML:
<label for="number">number:</label>
<input type="text" name="number" id="number" />
<input type="submit" value="Submit">
<label for="output">output</label>
<input type="text" size="33px" name="output" id="output" />
JQuery:
$('#number').change(function() {
$('#output').val($(this).val());
});
Thank you so much for your support
Hope it helps.
$('#submit').click(function(){
var source = $('#source').val();
$('#target').val('Your val: ' + source + '. Enjoy :)');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="source">
<button type="submit" id="submit">Go</button>
<p>
<input type="text" id="target">
</p>
I'm trying to count the number of characters entered into 4 text input fields and print the character count into their corresponding number fields like so:
Character count text input1 -> Number field 1
Character count text input2 -> Number field 2
Character count text input3 -> Number field 3
Character count text input4 -> Number field 4
I found this code snippet in another answer, but its just working for a single input field: Count length of one input field and print it in another with Gravity Forms and Javascript:
<form>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
</form>
<script>
var bank = document.getElementById("input_1_10");
var countNum = document.getElementById("input_1_2");
bank.addEventListener("keyup", function(e) {
countNum.value = bank.value.length;
});
</script>
As I'm a total newbie to javascript and jQuery, I don't know how to modify this snippet to get it working. Any ideas or suggestions?
Thanks for your help!
You could repeat repeat addEventListener for all inputs, or you could do it like this
var inputs = document.querySelectorAll('.small');
inputs.forEach(function(input){
input.addEventListener('keyup', function(e){
this.nextElementSibling.value = this.value.length;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Input Demo</title>
</head>
<body>
<label for="inputOne">Input One</label>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
<hr/>
<label for="inputTwo">Input Two</label>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
</body>
</html>
Notice, this code depends on the html markup, so it worn't work if you have anything else between two inputs, nextElementSibling selects the next element from current node. nextElementSibling on mdn
Here the code that I made and not working looking to see how I would get my sum into the result field, Also looking how to make a reset button to clear all the text from the fields.
JSBin.
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.result.submit()
}
function reset() {}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form>
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
</body>
</html>
Why do you want to submit the form?
You can use document.forms. to access the form.
Try this:
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.forms.calculator.submit()
}
function reset() {
document.forms.calculator.reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form name="calculator">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Do you want this one?
jsbin
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
//document.result.submit()
//if you want use submit, use this code. if only see the result, don't use this
//Submit is receive data, so you can't see a result.
//document.getElementById('formId').submit();
//jquery submit
//$("form")[0].submit();
}
function reset() {
//no jquery
document.getElementById('formId').reset();
//jquery
//$("form")[0].reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form id="formId">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Note that forms can be submitted without clicking the submit button, so if you want something to happen on submit, attach a listener to the form's submit handler. To reset a form only requires a reset button, no code.
Form controls must have a name to be successful and submit their value with the form, and you can pass a reference to the form using this from the listener so you don't need to use getElementById.
Implementing the above significantly reduces the amount of code required.
In the following, the submit listener returns false so prevents the form from submitting. If you want the form to submit, just remove the return statement from the in–line listener:
function addition(form) {
form.result.value = +form.num1.value + +form.num2.value;
}
<form name="calculator" onsubmit="addition(this); return false;">
Number 1:
<input type="number" name="num1" value="0" autofocus>
<br> Number 2:
<input type="number" name="num2" value="0">
<br> Result:
<input type="text" name="result" value="0" readonly>
<br>
<input type="submit" value="Submit form">
<input type="reset">
</form>
You may not want to submit the form at all, in that case you can make the submit button a plain button and call the function from there, but remember to stop the form submitting otherwise.
just give an id to the form and in your reset function, just do
document.getElementById("myForm").reset();
updates:
according to ROBG's comments, you don't need to bind a function to the button.
you can simply add a
<input type="reset">
to reset all fields of the form, and if the button is out the form, you can do
<input form="formID" type="reset">
to associate to specific form.
I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:
“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”
But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.
<body>
<br>
<br>
<div>
<p id="message"></p>
</div>
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
<script>
var parent=document.getElementById("message");
var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>
</body>
That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:
<p id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
</p>
Here you go :
<html>
<head>
<script>
function showText(){
var name=document.getElementById("nameBox").value;
var food=document.getElementById("foodBox").value;
document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;
}
</script>
</head>
<body>
<br>
<br>
<div id="msg">
</div>
Enter your name:
<input type="text" id="nameBox" value=""/><br>
Enter your favorite food
<input type="text" id="foodBox" value=""/><br>
<input type="button" id="submitButton" onclick="showText()" value="Submit" />
</body>
</html>
You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI
Check your HTML. Maybe it should look like this?
<div id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
</div>
You can call function on clicking submit button and then change the message.
<input type="button" id="submit" value="Submit" onclick="somefunction()"/>
Here is the javascript:
function somefunction() {
var fieldNameElement = document.getElementById('message');
fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}
While changing the innerHTML you can add appropriate formatting tags as well.
Also you should add inputs in a table, and add border's and required formatting if required:
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
Enter your favorite food
</td>
<td>
<input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>
You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY
Cheers !!
Ok, I have a good understanding of how javascript works, but not how to implement it. I have a simple form that needs to calculate on the fly the price of x number of tickets at 75.00 each. Let's say form id is quantity & total, with 75.00 being a rate. What would be the script to execute this and where should I add it.
The pertinent HTML is this:
<form id="docContainer" enctype="multipart/form-data" method="POST" action=""
novalidate="novalidate" data-form="preview">
<label id="item4_label_0" ># of Tickets</label>
<input type="text" id="quantity" maxlength="254" data-hint="" name="quantity" required/>
<label id="item13_label_0">Price Per Ticket</label>
<input name="item_price" type="text" id="item_price" placeholder="75.00"
maxlength="254" readonly data-hint="75.00"/>
<label id="item14_label_0" >Total</label>
<input name="total_price" type="text" id="total_price" maxlength="254" readonly/>
<input type="submit" class="fb-button-special" id="fb-submit-button" value="Submit" />
</form>
Your inputs don't have ids so I've used their names. This is how you would do it with jQuery. I've forgotten how to write old school javascript, perhaps someone else can add to this.
<script src="jquery.js"></script>
<script>
$(function(){
$('input[name="quantity"]').on('change keyup', function(){
$('input[name="total_price"]').val($(this).val() * $('input[name="item_price"]').val());
});
});
</script>
goes before
</body>
Edit: Added the necessary stuff for jQuery, but this can be done with regular js.
<html>
<head>
<script>
window.onload = function() {
var calculSumToString = function calculSumToString() {
totalField.value = (qtyField.value * itemPriceField.value).toFixed(2) + " $";
};
var totalField = document.getElementById('total_price');
var qtyField = document.getElementById('quantity');
var itemPriceField = document.getElementById('item_price');
qtyField.onkeyup = calculSumToString;
itemPriceField.onkeyup = calculSumToString;
};
</script>
</head>
<body>
<form id="docContainer" enctype="multipart/form-data" method="POST" action=""
novalidate="novalidate" data-form="preview">
<label id="item4_label_0" ># of Tickets</label>
<input type="text" id="quantity" maxlength="254" data-hint="" name="quantity" required/>
<label id="item13_label_0">Price Per Ticket</label>
<input name="item_price" type="text" id="item_price" value="75.00"
maxlength="254" readonly data-hint="75.00"/>
<label id="item14_label_0" >Total</label>
<input name="total_price" type="text" id="total_price" maxlength="254" readonly/>
<input type="submit" class="fb-button-special" id="fb-submit-button" value="Submit" />
</form>
</body>
</html>