Why oninput function not work under JavaScript? - javascript

My HTML code:
<div class="form-group col-sm-12">
<label for="input-text-help" >Select Vendor
</label>
<select name="vname" class="form-control">
<option value="">Select Vendor</option>
<?php
foreach($Fetchvendors as $Fetch){
?>
<option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->name; ?>
</option>
<?php
}
?>
</select>
</div>
<div class="form-group col-sm-12">
<label for="input-text-help"> Date</label>
<input type="text" name="date" id="datepicker" class="form-control">
</div>
<table class="table">
<i class="fa fa-plus" style="margin-left:500px;">**Add More**</i>
<thead>
<th>Material Name</th>
<th>Quantity</th>
<th>Price</th>
</thead>
<tbody>
<tr >
<td>
<select name="mname[]" class="mname">
<option value=""> Select Material </option>
<?php
foreach($FetchMateril as $Fetch){
?>
<option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->mname; ?></option>
<?php
}
?>
</select>
</td>
<td>
<input type="text" name="qty[]" class="quanitity" id="qty" placeholder="Material Unit">
<!--
<select name="qty[]" class="quanitity">
<option>Select Quanitity</option>
<?php for($i=1;$i<=50;$i++){?>
<option><?php echo $i;?></option>
<?php }?>
</select>
-->
</td>
<td>
<input type="text" name="price[]" class="price" id="**price**" *oninput="calculate()"*>
<input type="text" name="Totalprice[]" id="Totalprice" >
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<div class="form-group">
<div class="col-sm-10">
<input type="submit" name="submit" class="btn btn-primary" id="input-text-help" style=" margin-left:300px;" >
</div>
</div>
</form>
</div>
</div>
In my html code have a option to add more row for multiple insert, When i click on add more option it add one row by javascript. in my input tage price oninput call calculate function, where calculate function calculate two input field and return in third field.
It Work on row one but in second row totalprice not work mean calculate not return any value in third field.
My question can oninput="calculate()" function under JavaScript like
My code when I am click Add more option
<script>
$(document).ready(function(){
//alert();
var i = 0;
$(".fa-plus").click(function(){
$(".table").append('<tr><td><select name="mname[]"
class="mname"><option>Select Material</option><?php foreach($FetchMateril as
$Fetch){?><option value="<?php echo $Fetch->id;?>"><?php echo $Fetch-
>mname;?></option><?php }?></select></td><td><input type="text" name="qty[]"
></td><td><input type="text" name="price[]" class="price" value=""></td>
</tr>');
i++;
});
});
</script>
My calculate function
function calculate() {
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('price').value;
var result = document.getElementById('Totalprice');
var myResult = myBox1 * myBox2;
//alert(myResult);
document.getElementById('Totalprice').value = myResult;
}

Try This May this will help you
$('#price').on('keyup', function(){
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('price').value;
var result = document.getElementById('Totalprice');
var myResult = myBox1 * myBox2;
document.getElementById('Totalprice').value = myResult;
});

Related

Get data attribute from an array of select box

I have an account form in which the all account are being pulled from my mysql database into a dropdown menu. The user selects the account from the dropdown menu then the account code field is automatically populated via the data-acc attribute. I have added a button to add more account.
It works at first set of input and select box, but not in the next one
sample screenshot
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
</script>
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Report Per Office</h3>
</div>
<div class="box-body">
<div class="col-md-12">
<h4>Project Procurement Management Plan (PPMP) <hr >
</div>
<div class="col-md-1">
Office:
</div>
<div class="col-md-4">
<select class="selectpicker" data-live-search="true" name="office_from" data-width="auto" required >
<option>--Select Reponsible Office--</option>
<?php
$q = "SELECT * FROM `office_code_dept`";
$r = mysqli_query($conn,$q);
while($row = mysqli_fetch_assoc($r)){
$off_desc = $row['off_name'];
?>
<option value="<?php echo $off_desc;?>"><?php echo $off_desc; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-1">Year:</div>
<div class="col-md-4"><input type="number" min="1990" max="3000" name="tax_year" class="form-control" style="text-align: center;" value="<?php echo date('Y'); ?>"></div>
<div class="col-md-2"><input type="submit" name="search" value="Search" class="btn btn-primary btn-block">
</div>
<div class="col-md-12"><br></div>
</h4>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th width="7%" rowspan="2" style="text-align: center;">Code</th>
<th width="27%" rowspan="2" style="text-align: center;">General Description</th>
<th rowspan="2" width="5%"><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus"></i></button></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="text" name="account_code[]" class="form-control account_num" readonly>
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" name="account_name[]" required>
<option></option>
<?php
$account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");
while($acc = mysqli_fetch_assoc($account)){
$account_no = $acc['acoount_no'];
$account_title = $acc['account_title'];
?>
<option value="<?php echo $account_title; ?>" data-acc="<?php echo $account_no; ?>">
<?php echo $account_title ; ?>
</option>
<?php } ?>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
your .change function is not bound to the new input and select box
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
</script>
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
Something like this should work.

Get data-price attribute from dynamically added row and put inside the input box

how to get data-price inside the text box using select in php html and sql?
i tried this so far. what im trying to do is, when i change the selection box, the input box beside should change base on the value of data-price.
been trying this for a week.
e.g
select debit
local treasury 100
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td><select name="chart_of_account[]" class="selectpicker" data-live-search="true"><option style="width: 400px;">--Select Chart of Account--</option><?php $chart=mysqli_query($conn,"Select acoount_no,account_title from chart_of_account"); while($row=mysqli_fetch_assoc($chart)){$account_no = $row["acoount_no"]; $account_title = $row["account_title"];?><option value="<?php echo $account_no; ?>" style="width: 400px;"><?php echo $account_no ." | ". $account_title; ?></option><?php }?></select></td><td><input type="text" name="chart_debit[]" class="form-control chart_debit" id="chart_debit"onchange="chart_change_debit()"></td><td><input type="text" name="chart_credit[]" class="form-control chart_credit" id="chart_credit" onchange="chart_change_credit()"></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart">X</button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
$('.chart_debit').val($('select[name="chart_of_account"] option:selected').data('price'));
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
<form method = "POST" name="add_name" id="add_name">
<div class="row">
<div class="col-md-12">
<!-- chart of account -->
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Chart of Account</h3>
</div>
<div class="box-body">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th rowspan="2">Chart of Account</th>
<th>Debit</th>
<th>Credit</th>
<th rowspan="2"><button type="button" name="add" id="add" class="btn btn-success">Add More</button></th>
</tr>
<tr>
<th>
<input type="text" name="chart_debit_sum" class="form-control chart_debit_sum" id="chart_debit_sum" readonly>
</th>
<th>
<input type="text" name="chart_credit_sum" class="form-control chart_credit_sum" id="chart_credit_sum" readonly>
</th>
</tr>
<tr>
<td>
<select name="chart_of_account[]" class="selectpicker" data-live-search="true">
<option style="width: 400px;">--Select Chart of Account--</option>
<?php
$chart = mysqli_query($conn,"Select acoount_no,account_title from chart_of_account");
while($row = mysqli_fetch_assoc($chart)){
$account_no = $row['acoount_no'];
$account_title = $row['account_title'];
$amount = $row['test_amount'];
?>
<option value = "<?php echo $account_no; ?>" style="width: 400px;" data-price = "<?php echo $amount; ?>">
<?php echo $account_no . " | " .$account_title; ?>
</option>
<?php } ?>
</select>
</td>
<td>
<input type="text" name="chart_debit[]" class="form-control chart_debit" id="chart_debit" onchange="chart_change_debit()">
</td>
<td>
<input type="text" name="chart_credit[]" class="form-control chart_credit" id="chart_credit" onchange="chart_change_credit()">
</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- chart of account -->
</div>
<!-- chart and sub-->
</div>
</form>
sample screenshot

Get value from drop down and return to form field

I am trying to get value from two form fields and then get their product and pass it to another form field .I am fetching data from database and then passing it dropdown.
But I am having trouble .How can you get the selected value from drop down list using JavaScript? and then pass it to other field and some operation? I have tried the following but it does not work.My piece of work is down below.Anyone who can guide me?
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
Months to rent
<div class="count-input space-bottom">
<a class="incr-btn" data-action="decrease" href="#">+</a>
<input onchange="calculate()" id="month" class="quantity "
type="text" name="quantity" value="1"/>
<a class="incr-btn" data-action="increase" href="#"><i class="far
fa-plus-square"></i></i></a>
</div>
</div>
<div class="form-group">
<label for="s2id_autogen1" class="col-sm-2 control-label">
Select Room </label>
<div class="col-sm-6">
<select name="room_id" id="fee" class="form-control select2 select2-
offscreen" ">
<?php
include("connection.php");
$id = $_GET['id'];
$sql = "SELECT * FROM room ";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?>
<!-- Fee is an int value and description is room name -->
<option id="fee" onchange="calculate()" value="<?php echo
$row['Fee']; ?>"><?php echo $row['Description']; ?></option>
<?php
}
}
?>
</select >
</div>
<span class="col-sm-4 control-label"> </span>
</div>
<div class="form-group">
Balance
<div class="col-sm-6">
<input type="text" id="result" class="form-control"
name="checkin_date" >
</div>
<span class="col-sm-4 control-label">
</span>
</div>
<div class="col-sm-offset-2 col-sm-8">
<input type="submit" class="btn btn-info" value="Add member">
</div>
</div>
Javascript :
<script>
function calculate() {
var myvar1 = document.getElementById('month').value;
var myvar2 = document.getElementById('fee').value;
var result = document.getElementById('result');
var myResult = myvar1 * myvar2;
document.getElementByid('result').value = myResult;
}
</script>
Your Javascript variables are all wrong...
You're setting myvar twice and then setting it to myBox1 * myBox2 which are never set.
I think what you're looking for is:
<script>
function calculate() {
var month_input = document.getElementById('month').value;
var fee_input = document.getElementById('fee').value;
var result = month_input * fee_input;
document.getElementById('result').value = myResult;
}
</script>
You will also want to remove id="fee" from all of your <option> tags. By default, the value of a select is the value of its option that is selected.
Try getting the value of the selected option like this. Run the snippet to see the result.
function calculate() {
var month_input = document.getElementById('month').value;
var select_fee = document.getElementById('fee');
var fee_input = select_fee.options[select_fee.selectedIndex].value
var result = month_input * fee_input;
document.getElementById('result').value = result;
}
label {
display: inline-block;
width: 70px;
}
input {
padding: 6px 14px;
}
.form-group {
padding: 8px;
}
<div class="form-group">
<label>Month:</label>
<input onchange="calculate()" id="month" class="quantity " type="text" name="quantity" value="1" />
</div>
<div class="form-group">
<label>Fees:</label>
<select name="room_id" onchange="calculate()" id="fee" class="form-control select2 select2-offscreen">
<option value="0"></option>
<option value="100">Option 1</option>
<option value="200">Option 2</option>
<option value="300">Option 3</option>
</select>
</div>
<div class="form-group">
<label>Result:</label>
<input type="text" id="result" />
</div>

pass all rows selected option values which is determined by user input from php

How can I pass selected option values if it's randomly generate by user?
How can I get the values of each selected option for each rows if I determined the values?
something like this.
Javascript
<script>
function submitForm(action)
{
document.getElementById('columnarForm').action = action;
document.getElementById('columnarForm').submit();
}
</script>
PHP
<form class="form-horizontal" action="" method="post" id="columnarForm">
<!-- some html tag -->
<?php
if ($_SERVER['REQUEST_METHOD'] =='POST' && isset($_POST['addButton1'])) {
$table = $_POST['selectTable'];
if($table == 'company')
{
$num = $_POST['num'];
for($j = 1; $j <= $num; $j++) {
?>
<tr id="row1">
<td align="right"><?php echo $j; ?></td>
<td id="name_row1" width="2px">
<input type="text" id="new_name" name="text<?php echo $j; ?>" value=""></td>
<td id="country_row1">
<select class="selectField" onChange="" id="selectcom" name="selectcom<?php echo $j; ?>">
<option value="">-- Select Field --</option>
<option value="comp_id<?php echo $j; ?>">comp_id</option>
<option value="comp_name<?php echo $j; ?>">comp_name</option>
</select>
</td>
<td><input type="text" name="default" size="10"></td>
<td id="data_row"><div id="new_text<?php echo $j;?>"></div></td>
<td id="size_row"><div id="size_row<?php echo $j;?>"></div></td>
<td>
<input type="button" value="Delete" class="delete btn btn-small btn-info" onclick="delete_row('row1')">
</td>
</tr>
<?php
}
}
?>
<button type="submit" class="btn btn-primary noty" name="next" onclick="submitForm('import.php')">Create Template</button>
How can I give variable at the next page (import.php)?
sorry for my english imperfections
$('#noc').change(function(e) {
$('.child').remove();
id = $(this).val();
for(var i=1; i<id; i++){
var thisRow = $('.dd').last(".dd");
var newid = parseInt(thisRow.attr('divid'))+1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
find('.name').each(function(){
$(this).attr('id', 'name-'+newid);
$(this).attr('name','name-'+(newid));
$(this).attr('placeholder','Name '+(newid));
}).end().find('.drop').each(function(){
$(this).attr('id', 'dd-'+newid);
$(this).attr('name','dd-'+(newid));
}).end();
thisRow.next('.dd').attr("divid",newid).addClass("child");
}
});
div{ display: inline-table;}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><section style="width:40%" align="center">
<form>
<div class="col-md-12"><input type="text" class="form-control" id="noc" /></div>
<div class="dd" divid="1" align="center">
<div class="col-md-6">Field Name</div>
<div class="col-md-6">Column Name</div>
<div class="col-md-6"><input type="text" placeholder="Name 1" class="name form-control" id="name-1" name="name-1" /></div>
<div class="col-md-6">
<select name="dd-1" id="dd-1" class="drop form-control">
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
</select>
</div>
</div>
</form>
</section>
Check this code

Dinamic Select hidden input

I hope to explain my problem well
I want to create a form that allows you to dynamically add selections and inputs
Select retrieve a odbc array
The form is this:
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<select name="name[]" id="category" class="form-control" width="300px" onchange="aggiornaHidden(this)">
<option value="">Seleziona Ordine - Articolo</option>
<?php
echo $popola
?>
</select>
<INPUT type="hidden" name="sel_value">
<INPUT type="hidden" name="sel_text">
</td>
<td>
<input type="text" name="quantita[]" placeholder="Inserisci quantita" class="form-control name_list" />
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Aggiungi Riga</button></td>
</tr>
</table>
</div>
</form>
this is PHP code:
<?php
$conto='2411000044';
$dsn = 'iSeries';
$connessione = odbc_connect("iSeries", "utente, "pwd", 2) or die ("Impossibile Connettersi " . odbc_errormsg());
if($conto==""){
echo "impossibile trovare il codice artigiano....<br>";
}
else{
$interrogazione ="SELECT A.tipo, A.numero, A.codice, A.descrizione, B.barcode FROM file1 A, file2 B WHERE (A.codice=B.codice1) AND a.fornitore='".trim($conto)."' ORDER BY A.codice, A.numero ASC";
$risultato = odbc_exec($connessione, $interrogazione);
while (odbc_fetch_row($risultato))
{
$popola .= '<option value="'.odbc_result($risultato,"tipo").'-'.odbc_result($risultato,"numero").'-'.trim(odbc_result($risultato,"codice")).'-'.trim(odbc_result($risultato,"barcode")).'">'.odbc_result($risultato,"tipo").' - '.odbc_result($risultato,"numero").' - '.odbc_result($risultato,"codice").' - '.odbc_result($risultato,"descrizione").'</option>';
}
}
?>
JAVASCRIPT CODE:
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select name="name[]" id="category" class="form-control" width="300px" onchange="aggiornaHidden(this)"><option value="">Seleziona Ordine - Articolo</option><?php echo $popola?></select><INPUT type="hidden" name="sel_value"><INPUT type="hidden" name="sel_text"></td><td><input type="text" name="quantita[]" placeholder="Inserisci quantita" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
function aggiornaHidden(sel){
var f = document.add_name;
f.sel_value.value = sel.options[sel.selectedIndex].value;
f.sel_text.value = sel.options[sel.selectedIndex].text;
}
</script>
The first selection successfully adds the value to the hidden input
After clicking on "Add Row" the second select is populated but choosing a different value the value of the hidden input remains blank
Where I wrong?
thanks

Categories