I have a JavaScript function that reads from a form where integers are input. For some reason the function isn't executing. I know this since I have a console.log("hello") call outside the function that prints but a console.log() call inside the function isn't printing. I'm not sure what I'm doing wrong. I read input from the table using getElementByID and then use parseInt to make them integers.
HTML
<body>
<div class="container">
<div class="well">
<h1 class="text-center">Multiplication Table</h1>
<p class="text-center">Enter the lowest and highest values to be displayed in
the multiplication table and the table will generate</p>
</div>
<form class="form-inline">
<label for="row_min" class="mr-sm-2">Row Min</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="row min" id="row_min">
<label for="row_max" class="mr-sm-2">Row Max</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="row max" id="row_max">
<label for="col_min" class="mr-sm-2">Col Min</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="col min" id="col_min">
<label for="col_max" class="mr-sm-2">Col Max</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="col max" id="col_max">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<br>
<!-- Temoprary placeholder for the table before user input comes in -->
<div class="container">
<div class="well" id="table-placeholder">
<h3 class="text-center">Multiplication Table Will Appear Here</h3>
</div>
</div>
<!-- include the JavaScript at the bottom of the body to laod faster -->
<script type="text/JavaScript" src="js/javascript.js"></script>
</body>
Javascript
var row_min, row_max, column_min, column_max;
console.log("hello");
function getUserInput() {
row_min = parseInt(document.getElementById("row_min").value);
row_max = parseInt(document.getElementById("row_max").value);
col_min = parseInt(document.getElementById("col_min").value);
col_max = parseInt(document.getElementById("col_max").value);
input = document.getElementById("row_max").value;
row_max = parseInt(userInput);
input = document.getElementById("col_min").value;
column_min = parseInt(userInput);
input = document.getElementById("col_max").value;
column_max = parseInt(userInput);
console.log(row_min, row_max, column_min, column_max);
}
Related
I am trying to make a webpage with a form where you have an input box and a slider. The slider should display the value of the slider but it only works if put it directly in to the main class but not if I put it in anything else for example the form.
So it works if I put the slider part in main class like this.
<div class="main">
<!-- slider -->
<div class="box">
<input step="0.1" type="range" min="0.1" max="5" value="1" name="amount">
</div>
<!-- value display -->
<div class="value">1</div>
<div class="field">
<h1>Halao</h1><br><br>
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
<script>
const slider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = slider.value
slider.oninput = function(){
value.textContent = this.value;
}
</script>
</body>
But if it put in the form the value display does not show.
<div class="main">
<div class="field">
<h1>Halao</h1><br><br>
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<!-- slider -->
<div class="box">
<input step="0.1" type="range" min="0.1" max="5" value="1" name="amount">
</div>
<!-- value display -->
<div class="value">1</div>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
<script>
const slider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = slider.value
slider.oninput = function(){
value.textContent = this.value;
}
</script>
</body>
I would really appreciate it if some one could explain why it is not working and help me to get it working.
In the form, you have a
<input type="text" name="name" placeholder="Name" required>
which gets selected as querySelector('input')
Either use querySelector('input[type="range"]'), add it id, or a class
I got a small problem that i have no clue how to solve. This HTML/PHP code bellow gets different values from a database and outputs them into the different input fields.
The HTML/PHP bellow is one element, and multiple of them are made with different values from the database. Then i got a small javascript that calulates some different values from the values that are inputted. The problem is that i got lets say 5 elements, and only wants to calculate for one of them, but if i press the "btn-oppdater" button it calculates for all the different elements.
How do i make it only calculate for the element where the button is?
Script
$('.btn-oppdater').click(function(){
$(".kval_spill").each(function(){
var fieldShow = $(this).next('.kval_spill_inner');
var b_value_kval_1 = fieldShow.find('.b_value_kval_1')[0].value;
var b_odds_kval_1 = fieldShow.find('.b_odds_kval_1')[0].value;
var e_odds_kval_1 = fieldShow.find('.e_odds_kval_1')[0].value;
var gebyr_kval = '0.02'
var q_value = ((b_odds_kval_1 / (e_odds_kval_1 - gebyr_kval)) * b_value_kval_1);
var q_tap = (b_odds_kval_1 - 1) * b_value_kval_1 - (e_odds_kval_1 - 1) * q_value;
var q_value_fixed = q_value.toFixed(2);
var q_tap_fixed = q_tap.toFixed(2);
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
});
});
HTML/PHP
<?php while ($row = mysqli_fetch_assoc($result2)) { echo '
<form style="margin-top: 10px;" action="" method="post" class="">
<input type="hidden" class="kval_spill">
<div class="kval_spill_inner">
<input class="" type="hidden" name="id" value="'.$row['id'].'">
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_kamp_1" name="kval_kamp_1" value ="'.$row['kval_kamp_1'].'" placeholder="Kamp">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control b_value_kval_1" name="b_value_kval_1" value ="'.$row['b_value_kval_1'].'" placeholder="Spill verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control b_odds_kval_1" name="b_odds_kval_1" value ="'.$row['b_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_marked_1" name="kval_marked_1" value ="'.$row['kval_marked_1'].'" placeholder="Type marked">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control text-info q_value_1" name="q_value_1" value ="'.$row['q_value_1'].'" placeholder="Lay verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control e_odds_kval_1" name="e_odds_kval_1" value ="'.$row['e_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">Tap</span>
</div>
<input type="text" class="form-control text-danger q_tap_1" name="q_tap_1" value ="'.$row['q_tap_1'].'" placeholder
="0.00" readonly>
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-outline-secondary btn-oppdater">Regn ut</button>
</div>
</div>
</div>
</form>
<br>
'; }?>
Replace $(".kval_spill") with $(this).closest("form").find(".kval_spill").
But it looks like there's only one kval_spill and kvall_spill_inner in each form, so there's no need to use .each(). You can get rid of the .each() loop and just use:
var fieldShow = $(this).closest("form").find('.kval_spill_inner');
And instead of
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
you can write:
fieldShow.find('.q_value_1').val(q_value_fixed);
fieldShow.find('.q_tap_1').val(q_tap_fixed);
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
how can i take the parameter(number) on a bootstrap input element when i click on the button??
<form>
<div class="form-group">
<div class ="col-md-6 input-group">
<span class="input-group-addon">Larghezza</span>
<div id="myNumber"> <input type="number" class="form-control" id="focusedInput" placeholder="Inserisci qui..." > </div>
</div>
</div>
</form>
<button type="button" onclick="myFunction()" class="btn btn-default">Calcola</button>
my js code... Then i use the number for some math operation
function myFunction() {
var x = document.getElementById("myNumber").value;
You are reading value property of div element while it is a property of the input.
Use id of input and it will work.
function myFunction() {
var x = document.getElementById("focusedInput").value;
console.log(x);
}
<form>
<div class="form-group">
<div class ="col-md-6 input-group">
<span class="input-group-addon">Larghezza</span>
<div id="myNumber">
<input type="number" class="form-control" id="focusedInput" placeholder="Inserisci qui..." >
</div>
</div>
</div>
</form>
<button type="button" onclick="myFunction()" class="btn btn-default">Calcola</button>
var x = document.getElementById("focusedInput").value;
You need to reference the input element, not its container.
"Sorry for my English as it is not my native language"
On to the problem. I have a trouble with ng-autocomplete when I dynamically create form fields.
The ng-autocomplete works fine when I create an input tag in the index file but when I try to add more tags via the javascript function the ng-autocomplete does not work in the new input tags created..
As you see in the picture the two input fields "Travel from" and "Travel to" have ng-autocomplete but the input field "travel via" which is created by the javascript function does not have ng-autocomplete..
The question is how can I add a working ng-autocomplete for every created input field via the function?
Down below is the script.js file with the code for creating the input tag
$(document).ready(function(){
var i=1;
$("#add_city").click(function(){
$('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />');
$('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>');
i++;
});
$("#delete_city").click(function(){
if(i>1){
$("#end_city"+(i-1)).html('');
i--;
}
});
});
And there is the index.php
<div class="page-header">
<h4>Create your trip</h4>
</div>
<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- START CITY -->
<div class="form-group col-md-6">
<input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from">
</div>
<!-- END CITY -->
<div class="form-group col-md-6" id="tab_logic">
<div id="end_city0">
<input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to">
</div>
<div id="end_city1"></div>
</div>
<!-- START DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date">
</div>
<!-- END DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date">
</div>
<!-- COMMENT -->
<div class="form-group col-md-12">
<textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea>
</div>
<!-- Img -->
<div class="form-group col-md-12">
<input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a>
</div>
</form>
I have looked at these two examples and I dont know why it does not work.. Please if anybody knows how to fix this problem it would help a lot :)
http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview
http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion
Thanks!
/K.A.
You need to compile the element by using the $compile service:
...
$('#tab_logic').append('<div id="end_city' + (i + 1) + '"></div>');
var element = angular.element(document.querySelector('#end_city' + i));
var scope = element.scope();
var $compile = element.injector().get('$compile');
$compile(element)(scope);
...
Good short explanation of how to work with Angular from the 'outside' can be found here.