I want to start a form base HTML page.
My goal of this is to have the second inbox autofill based on the user input for the first input. I've looked at guides and this is the script I've wrote but it's not working. I was working what's wrong with it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#Dnumber").keyup(function(){
update();
});
function update() {
$("#Dnumber1").val($('#Dnumber').val());
}
</script>
<div class="input1">
District Number: <input type="number" id="Dnumber" name="Dnumber"/> <br>
</div>
<div class="input1">
District Number: <input type="number" id="Dnumber1" name="Dnumber1"/> <br>
</div>
User can change #Dnumber .value using arrows, use input event.
<div class="input1">
District Number: <input type="number" id="Dnumber" name="Dnumber" /> <br>
</div>
<div class="input1">
District Number: <input type="number" id="Dnumber1" name="Dnumber1" /> <br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript">
var dn = $("#Dnumber"),
dn1 = $("#Dnumber1");
dn.on("input", function() {
update();
});
function update() {
dn1.val(dn.val());
}
</script>
You had script tags in the js part of the snippet
$("#Dnumber").keyup(function() {
update();
});
function update() {
$("#Dnumber1").val($('#Dnumber').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input1">
District Number: <input type="number" id="Dnumber" name="Dnumber" /> <br>
</div>
<div class="input1">
District Number: <input type="number" id="Dnumber1" name="Dnumber1" /> <br>
</div>
Related
I am trying to do something where you can search for flights within a database based on the departure/arrival airport and departure/return flight. There are two radio buttons where you can click whether it's round-trip or one-way. What I am having trouble with is, I want to hide the return flight thing whenever the one-way radio button has been clicked but it won't budge. Everything remains on screen no matter what button is pushed. Here is my code, any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<script>
function tripCheck(){
if (document.getElementById('round').checked){
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
</script>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="round" checked>Round Trip
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name = "source" placeholder="Enter an origin" required/>
<input type="text" name = "dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
What it looks like
What I want it to look like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onchange="tripCheck()" name="oneround" id="round" checked>Round Trip
<input type="radio" onchange="tripCheck()" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name="source" placeholder="Enter an origin" required/>
<input type="text" name="dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
<script>
function tripCheck() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
}
</script>
</body>
</html>
You have one error on the above code.
Your function doesn't have the closing bracket. If you want to view javascript error you can right click and go to inspect or simply press f12 and go to console menu.
Try entering this, a function Travel_Control
<script>
function Travel_Control() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
} }
</script>
In your code one closing bracket is missing in function tripCheck(). and you need to revert the condition in if(!condition) statement. you can replace below function in your code and it will work as expected.
function tripCheck()
{
if (!document.getElementById('round').checked)
{
document.getElementById('toggle').style.display = 'none';
} else
{
document.getElementById('toggle').style.display = 'block';
}
}
I would like to create a form that based on the input values, calculation results and enter it in a div / label / bit somewhere in the web page html.
an working similar to that of the currency converters online
(insert the number for the first currency and you can see the result without the page refresh, with use of the submit button or not)
this is a little piece of my code (I can not understand the concept/mechanism to do what I want as described above)
<form id="form" class="green" method="post">
<label class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" name="number1" required="required" value="0" />
</label>
<label class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" name="number2" required="required" value="0" />
</label>
<div class="submit"><input type="submit" onclick="return submitForm();" value="Submit"/></div>
</form>
<div><label id="printHere" class="result"></label></div>
this a basic script inside the html:
function submitForm(){
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
result = a+ b;
try this simple script with html:
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Add it</button>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br/>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
If I understood it correctly, you are trying to retrieve to input values, do some mathematical operations with them, and return it to the page without refreshing it, if it's so:
make a change event listener on both of inputs, in that case:
$("#firstId").change(function() {
$("#thirdId").val(calculate());
});
$("#secondID").change(function() {
$("#thirdId").val(calculate());
});
make a calculation function:
function calculate() {
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
return a+ b;
}
Good Day Sir,
I would suggest you could bind this input value a few different ways to update it on the page, without requiring a refresh. The jQuery library is probably the easiest to implement over straight javascript. Are you familiar with the following functions?
Keyup/Blur?
I created this fiddle for you. Hopefully it helps.
https://jsfiddle.net/wkdjwzfv/
<script>
$(function(){
//val for firstid
$("#firstId").keyup(function() {
//val of firstId
var total = parseInt($(this).val()) + parseInt($("#secondID").val());
console.log(total);
$("#total").empty().append(total);
});
//for keyup for second
$("#secondID").keyup(function() {
var total = parseInt($(this).val()) + parseInt($("#firstId").val());
console.log(total);
$("#total").empty().append(total);
});
})
</script>
Try this html and jquery combination:
<form id="form" class="green">
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div id="answer"></div>
<button id="submitForm" type="button">Submit</button>
</form>
<script>
// assuming jQuery is loaded
(function($) {
$('#submitForm').on('click', function (e) {
e.preventDefault();
var answer = parseInt($('#firstId').val(), 10) + parseInt($('#secondId').val(), 10);
$('#answer').text(answer);
});
})(jQuery);
</script>
As an alternative solution I'd like to post a simplistic answer created with AngularJS. Here is the Plunker: http://plnkr.co/edit/46Xf23jUhrmaT2x31S0K?p=preview
The code would be:
<div class="col-md-2 col-md-offset-5 form-group">
<input class="form-control" type="number" ng-model="firstValue" />
<p class="text-center">+</p>
<input class="form-control" type="number" ng-model="secondValue" />
</div>
<div class="panel panel-primary col-md-2 col-md-offset-5 text-center">
{{ firstValue + secondValue }}
</div>
The classes are from Bootstrap, just for making it little bit nicer.
I don't know how to pickup the value from the input box if I don't use a form...
So I want to replicate the following but without using form tags...
<form action="#" name="myconvert">
100% of value =
<input type="text" name="percent100"
onkeyup=" document.myconvert.percent80.value = Math.round((0.8 * document.myconvert.percent100.value)*100)/100" />
so 80% = <input type="text" name="percent80" disabled />
Please help
<input type="text" name="percent100"
onkeyup=" document.getElementById('percent80').value = Math.round((0.8 * document.getElementById('percent100').value)*100)/100" />
so 80% = <input type="text" name="percent80" disabled />
Give the input an id, for example <input type="text" id="percent80" />, then use document.getElementById('percent80').value = ...
Using jQuery:
<input type="text" id="txt" onKeyUp="show80()" />
<div id="show"></div>
<script type="text/javaScript">
function show80(){
$('#show').html($('#txt').val()*0.8);
}
</script>
You can skip the form tags, just let Javascript target an input tag with a certain id.
Type your value here <input id="source" type="text"><br/>
<br/>
<span id="result"></span>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$('#source').keyup(function(){
$('#result').html( parseFloat($(this).val()) * 0.8 );
});
</script>
How can I get the current value of the label elements within function showEditionBlock() and set them to the corresponding input fields? The function will show the "edit" div, but the inputs are not getting the original values of the labels.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(
function()
{
$("#companyNameText").keyup(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keyup(
function()
{
$("#companyCountryLabel").html(this.value);
});
});
function showEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeIn('slow', function(){
$(this).css('display', 'inline');
});
}
function hideEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeOut('slow', function(){
$(this).css('display', 'none');
});
}
</script>
<body>
<div id="preview">
<fieldset>
<label id="companyNameLabel" class="workExperience">
This is my company
</label>
<label id="companyCountryLabel" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit" onclick="showEditionBlock();"/>
</fieldset>
</div>
<div id="edit" style="display:none;">
<fieldset>
<label>Company Name: </label>
<input type="text" id="companyNameText" />
<label>Company Country: </label>
<input type="text" id="companyCountryText" />
<input type="button" value="Ok" onclick="hideEditionBlock();"/>
</fieldset>
</div>
</body>
</html>
You should assign the innerHTML of the labels to the values of the inputs. In plain ol' Javascript you can do something like:
document.getElementById("companyNameText").value =
document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
document.getElementById("companyCountryLabel").innerHTML;
Using jQuery, this is the same:
$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());
How can I display the value of a radio button in a form text box? I'd like it to change when the radio button is clicked.
Here is my radio buttons:
<input type="radio" name="testPassed" id="TestPassed" value="TestPassed">
<input type="radio" name="testFailed" id="TestFailed" value="TestFailed">
The text box:
<textarea name="description" cols="50" rows="5" id="description">Test Status: radioButtonValueHere </textarea>
Many thanks
Well, you can implement an OnClick function with your radio button like this: <input type="radio" name="sports" value="Football" onClick="doSomething();"> or you can have a function to iterate through all the radio buttons on your form and whichever is checked, will fill the textbox with your value:
<form name="myform">
<input type="text" id="txt" />
...
<script type="text/javascript">
for (i=0; i<document.myform.sports.length; i++)
if (document.myform.sports[i].checked==true)
{
t =t +document.myform.sports[i].value
}
}
document.getElementById("txt").value=t
You can write a function that will pass the result value to the text area:
<head>
<script type="text/javascript">
<!--
function writeResult(text){
document.myform.testResultDescription.value = text;
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="testResults" id="TestPassed" value="TestPassed" onclick="writeResult('Test Passed');" />
Test Passed<br />
<input type="radio" name="testResults" id="TestFailed" value="TestFailed" onclick="writeResult('Test Failed');" />
Test Failed<br />
<textarea name="testResultDescription" cols="50" rows="5" id="testResultDescription"></textarea>
</form>
</body>
With jQuery this is really simple
HTML
<div id="radiobuttons">
<--! put here radios buttons -->
</div>
$("#radiobuttons input:radio").click(function() {
$("textbox_id").val($(this).val());
});