javascript ROWs INDEX when change value of a field - javascript

I m trying to check controls between two values on 2 fields in same row.
my html part of my table is:
<tbody>
{% for payable in payables %}
<tr class="item">
<td>
<input class="readonly" id="item-{{ payable.id }}" name="client-{{ payable.id }}" required="" type="text" value="{{ payable.client }}" readonly >
</td>
<td>
<input class="readonly" id="duedate-{{ payable.id }}" name="duedate-{{ payable.id }}" required="" type="text" value="{{ payable.duedate }}" readonly >
</td>
<td>
<input class="readonly" id="number-{{ payable.id }}" name="number-{{ payable.id }}" required="" type="text" value="{{ payable.number }}" readonly >
</td>
<td>
<div class="readonly"><input id="montantttestaxes-{{ payable.id }}" name="montantttestaxes-{{ payable.id }}" required="" type="text" value="{{ payable.montantttestaxes|floatformat:2|intcomma }}" readonly></div>
</td>
<td>
<div class="readonly"><input type=number step="0.01" id="soldedu-{{ payable.id }}" name="soldedu-{{ payable.id }}" required="" type="text" value="{{ payable.soldedu|floatformat:2|intcomma }}" readonly></div>
</td>
<td>
<input type=number id="payment-{{ payable.id }}" name="payment-{{ payable.id }}" required="" type="text" value=0.00 step="0.01" onchange="compare(this);">
</td>
</tr>
{% endfor %}
</tbody>
I had a compare function for payment field I want to get back to my javascript function the row index. for now my code return is undefined...I put rowindex in nbrow variable to log...
this is my javascript:
function compare(y){
console.log(y.value)
var nbrow = y.parentNode.rowIndex
console.log(nbrow)
var x = document.getElementById("myTable").rows[nbrow].cells;
var due = x[4].value
var payment = y.value
console.log(due)
console.log(payment)
if (due< payment){
alert("your payment is too high!");
return false;
}
}
thanks for help

You will want to change y.parentNode.rowIndex to y.parentNode.parentNode.rowIndex.
y is the current element
parentNode is the parent of that element, which is td
So by using parentNode.parentNode, you are getting the parent of the parent, which is tr. Which will have rowIndex associated.

Related

How to set PayPal shipping costs with JavaScript/JQuery

I have a Form that is in html.twig format. In that form there is a for loop that shows every product we have.
Corresponding to that Form there is a chckForm() Functions which calculates or to be more precise adds shipping costs to a product when a user buys it.
The shipping costs dropdown has 2 Values: "12,00" or "18.50". This Value is then added to the order.
The problem is that if users buys more of our products than the shipping cost is always added again instead of only being added once to the whole order.
Form Code in html.twig:
<table class="table table-striped">
{% for item in page.header.paypal.items %}
{% set image = media['user://pages/images/'~item.image].resize(52) %}
<tr>
<td>{{ image }}</td>
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>{{ item.amount|number_format(2,',') }} {{ currency_sign }}</td>
<td>
<form name="{{ item.name }}"
id="{{ item.name }}"
target="paypal"
action="{{ page.header.paypal.action }}"
method="post"
onsubmit="return chkForm('{{ item.name }}');">
<input src="/images/button-basket.png" name="submit"
alt="In den Warenkorb" title="In den Warenkorb"
type="image">
<input name="add" value="1" type="hidden">
<input name="cmd" value="_cart" type="hidden">
<input name="business" value="{{ page.header.paypal.business }}" type="hidden">
<input name="item_name" value="{{ item.name }} - {{ item.description }}" type="hidden">
<input name="amount" value="{{ item.amount|number_format(2,'.') }}" type="hidden">
<input name="no_shipping" value="0" type="hidden">
<input name="shipping" value="0.00" type="hidden">
<input name="no_note" value="1" type="hidden">
<input name="currency_code" value="{{ page.header.paypal.currency_code }}" type="hidden">
<input name="lc" value="{{ page.header.paypal.lc }}" type="hidden">
<input name="bn" value="PP-ShopCartBF" type="hidden">
</form>
</td>
</tr>
{% endfor %}
</table>
and the corresponding JavaScript/jQuery code:
function chkForm(form)
{
var shippingCosts = $('#shippingCosts').val(); // value from shipping dropdown 12 or 18.50
var shippingField = $('#'+form+' input[name=shipping]'); // hidden input > 0.00
shippingField.val(shippingCosts);
console.log("value1:" + shippingCosts);
return true;
}
Now I need to solve that problem by somehow saying that the shipping value should only be added once in the .js Function. I tried a few things with some if`s but it didn't work.
Another way could be to just add the products with the price and then at the end if the User presses the final BUY so on the PayPal checkout site he is asked to either specify shipping costs as 12$ or 18.50$ - but I don't know if that is possible with PayPal.

Get old value from dynamic input in Laravel with JavaScript?

I want to get the old value from dynamic input on Laravel. If it's a regular input, I only need {{ old ('name') }}. But what if the input is dynamic?
View
<tr>
<td>
<input type="text" name="name_progress[]"
value="{{ old('name_progress[]') }}"
placeholder="Enter name" class="form-control"/>
</td>
<td>
<input type="text" name="payment_percentage[]"
value="{{ old('payment_percentage[]') }}"
placeholder="Enter % invoice" class="form-control"/>
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
JavaScript
<script type="text/javascript">
$("#add-btn").click(function () {
var tr = '<tr>' +
'<td>' +
'<input type="text" name="name_progress[]" ' +
'placeholder="Enter name" class="form-control" /></td>' +
'<td><input type = "text" name = "payment_percentage[]" ' +
'placeholder = "Enter per_invoice" class = "form-control" />' +
'</td>' +
'<td><a type="button" class="btn btn-danger remove-tr">-</a></td>' +
'</tr>';
$("#dynamicProgress").append(tr);
});
$(document).on('click', '.remove-tr', function () {
$(this).parents('tr').remove();
});
</script>
Since name_progress and payment_percentage fields are arrays, you may simply loop through the old input values.
#forelse (old('name_progress', []) as $i => $name_progress)
<tr>
<td>
<input type="text" name="name_progress[]" value="{{ $name_progress }}" placeholder="Enter name" class="form-control" />
</td>
<td>
<input type="text" name="payment_percentage[]" value="{{ old('payment_percentage')[$i] }}" placeholder="Enter % invoice" class="form-control" />
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
#empty
<tr>
<td>
<input type="text" name="name_progress[]" placeholder="Enter name" class="form-control" />
</td>
<td>
<input type="text" name="payment_percentage[]" placeholder="Enter % invoice" class="form-control" />
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
#endforelse
If old('name_progress') is empty or null, initial fields with empty values will be displayed.

How can i get selected checkbox value into database?

I have a checkbox with foreach data, I want to select 1 or maximum 5 row, and make the rest checkbox be uncheck and that uncheck checkbox can't be sumbitted into the database
This is the form
<form action="/po_store" method="post">
<div class="container">
<div class="row">
<div class="col-md-6">
#csrf
<div class="form-group">
<label>Tanggal PO</label>
<input class="form-control" type="text" name="tanggal_po" id="datepicker">
{!! $errors->first('tanggal_po','<span class="text-danger">:message</span>') !!}
</div>
<div class="form-group">
<label>No Po</label>
<input class="form-control" type="text" name="no_po">
{!! $errors->first('no_po','<span class="text-danger">:message</span>') !!}
</div>
<div class="form-group">
<label>Supplier</label>
<select name="supplier_nama" class="form-control">
<option value=""hidden>Pilih Supplier</option>
#foreach ($supplier as $s)
<option value="{{ $s->nama_supplier }}">{{ $s->nama_supplier }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Apoteker</label>
<select name="apoteker_nama" class="form-control">
<option value=""hidden>Pilih Apoteker</option>
#foreach ($apoteker as $a)
<option value="{{ $a->nama_apoteker }}">{{ $a->nama_apoteker }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Keterangan</label>
<input class="form-control" type="text" name="keterangan">
</div>
</div>
<form action="{{ route('cari') }}" method="GET">
<div class="container-fluid" style="padding-top:25px">
<div class="row">
<div class="col-md-11">
<div class="form-group">
<input type="text" name="cari" class="form-control" placeholder="Cari berdasarkan kode dan nama obat ...">
</div>
</div>
<div class="form-group">
<input type="submit" value="Cari" class="btn btn-primary">
</div>
</div>
</form>
<table class="table table-bordered">
<tbody>
<tr class="text-center">
<th>Pilih</th>
<td>Kode Obat</td>
<td>Nama Obat</td>
<td>Harga Obat</td>
<td>Jumlah Obat PO</td>
<td>Total bayar</td>
</tr>
#foreach ($obat as $o)
<tr>
<td>
<input type="checkbox" name="select" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}" onkeyup="sum()">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
</td>
<td>
<input id="total" type="text" class="form-control" name="total_harga" onkeyup="sum()" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<button type="submit" class="btn btn-success simpan simp-po"><i class="fas fa-check"> Simpan</i></button>
</form>
This is the javascript to show calculate total field
function sum() {
var harga = document.getElementById('harga').value;
var jumlah = document.getElementById('jumlah').value;
var hasil = parseInt(harga)*parseInt(jumlah);
if(!isNaN(hasil)){
document.getElementById('total').value = hasil;
}
}
I can't submit the form especially the checkbox because the total field can't be empty. But i want just the selected checkbox get the harga field and can be submit
This is how it's looks like
This is my store controller
$message = [
'required' => '*:attribute harus diisi',
'numeric' =>'*:attribute harus angka' ,
'digits_between' => '*:attribute harus berisi 9 atau 13 angka'
];
$data = $request->validate([
'tanggal_po' => ['required'],
'no_po' => ['required'],
'supplier_nama' => ['required'],
'apoteker_nama' => ['required'],
'harga' =>['numeric'],
'select'=>['required'],
'jumlah'=>['required'],
'harga_obat' =>['required'],
'total_harga'=>['required']
],$message);
$select = $request->select;
foreach($select as $s){
$s = $request->select;
}
$tanggal_po = $request->input('tanggal_po');
$no_po = $request->input('no_po');
$supplier_nama = $request->input('supplier_nama');
$apoteker_nama = $request->input('apoteker_nama');
$harga = $request->input('harga');
$jumlah = $request->input('jumlah');
$harga_obat = $request->input('harga_obat');
$total_harga = $request->input('total_harga');
if(PO::create($request->only($tanggal_po,$no_po,$supplier_nama,$apoteker_nama,$select,$harga,$jumlah,$harga_obat,$total_harga))){
$request->session()->flash('success', 'Data Berhasil Di Tambahkan');
}else{
$request->session()->flash('danger', 'Data Tidak Berhasil Di Tambahkan');
}
Maybe an idea: Your checkboxes and inputs in your row should be declared as an array, e.g. name[]:
#foreach ($obat as $o)
<tr>
<td>
<input type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat[]" value="{{ $o->kode_obat }}" readonly>
</td>
...
</tr>
#endforeach
Your validation Rule should look like:
$data = $request->validate([
'kode_obat.*' => 'required_with:select.*,on'
...
],$message);
In your case i would display all vlidation errors on your form page, to check what's wrong:
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
In your controller handle the checkboxes as follows
$selects = $request->select;
foreach($selects as $select) {
//do whatever you want
}
How about to use required_with?
'total_harga'=>['required_with:yourCheckBoxName']
<form action="{{route('admin.post.store')}}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<input type="checkbox" id="publish" class="filled-in" name="status" value="1">
<label for="publish">Publish</label>
</div>
</form>
public function store(Request $request)
{
$post = new Post();
if(isset($request->status))
{
$post->status = true;
}else {
$post->status = false;
}
$post->save();
Toastr::success('Post Successfully Saved :)','Success');
return redirect()->route('admin.post.index');
}

Dividing item.price in shopify

I want to divide {{ item.price | money_without_currency }} by 1.21. I am calling on the item.price in a hidden input value.
<input type="hidden" name="PRODUCT_PRICE_{{ forloop.index }}" value="{{ item.price |
money_without_currency }}">
When I do the below, it shows the value as "100/1.21" as my test product is 100. Makes sense since HTML doesn't do math.
<form name="addToFavorites" method="post" action="contoso.com">
<input type="hidden" name="PARTNER_KEY" value="34234234234234">
<input type="hidden" name="TOTAL_DOMESTIC_SHIPPING_CHARGE" value="0">
{% for item in cart.items %}
<input type="hidden" name="PRODUCT_ID_{{ forloop.index }}" value="{{ item.sku }}">
<input type="hidden" name="PRODUCT_NAME_{{ forloop.index }}" value="{{ item.title }}">
<input type="hidden" name="PRODUCT_PRICE_{{ forloop.index }}" value="({{ item.price |
money_without_currency }}/1.21)">
<input type="hidden" name="PRODUCT_Q_{{ forloop.index }}" value="{{ item.quantity }}">
<input type="hidden" name="PRODUCT_SHIPPING_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_1_{{ forloop.index }}" value="{{ item.variant.title }}">
<input type="hidden" name="PRODUCT_CUSTOM_2_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_3_{{ forloop.index }}" value="">
{% endfor %}
</form>
When I try to play with Javascript, it still just posts over the equation 100/1.21 and not the solution
<script>
var withoutTax = {{ item.price | money_without_currency }} / 1.21
var euPrice = "name=\"PRODUCT_PRICE_{{ forloop.index }}\" value=\"+withoutTax+\""
window.onload = function() {
//when the document is finished loading, replace everything
//between the <a ...> </a> tags with the value of splitText
document.getElementById("euPrice").innerHTML=euPrice;
}
</script>
<form name="addToFavorites" method="post" action="https://foo.com">;
<input type="hidden" name="PARTNER_KEY" value="987979879879879">
<input type="hidden" name="TOTAL_DOMESTIC_SHIPPING_CHARGE" value="0">
<input type="hidden" name="ORDER_CURRENCY" value="EUR">
{% for item in cart.items %}
<input type="hidden" name="PRODUCT_ID_{{ forloop.index }}" value="{{ item.sku }}">
<input type="hidden" name="PRODUCT_NAME_{{ forloop.index }}" value="{{ item.title }}">
<input type="hidden" id="euPrice">
<input type="hidden" name="PRODUCT_Q_{{ forloop.index }}" value="{{ item.quantity }}">
<input type="hidden" name="PRODUCT_SHIPPING_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_1_{{ forloop.index }}" value="{{ item.variant.title }}">
<input type="hidden" name="PRODUCT_CUSTOM_2_{{ forloop.index }}" value="">
<input type="hidden" name="PRODUCT_CUSTOM_3_{{ forloop.index }}" value="">
{% endfor %}
</form>
My ultimate goal is to take a $100 product, discount it by 21%, and insert
Please help by dividing the item price by 1.21 before the post the info.
You could use the divided_by math filter:
{{ item.price | divided_by: 1.21 | money_without_currency }}
Use Javascript parseInt
var priceasnumber = parseInt({{ item.price | money_without_currency }});
var withoutTax = priceasnumber / 1.21;

Javascript - Edit Forms Issue

I have a form that will show profile information and I have a javascript that will edit the form. The edit was working ok, but don't know what I did now. I'm not a javascript expert, but I been pulling my hair trying to figure out the problem.
Here is my code:
<script type="text/javascript">
// Enable all the text fields, rename value of Edit button and submit the forms
function activate(){
get_button_name = $("#save_button").text();
if (get_button_name == 'Edit'){
$(".enable").attr('disabled', false);
$("#save_button").text('Save');
}
else {
$("#editProfileForm").submit();
}
}
function search(){
document.getElementById('button-name').value="search";
}
</script>
<div id="profile_form">
<form id="editProfileForm" method="get" action="/updateProfile/">
{% csrf_token %}
<table>
<h1 style="margin-left: 40px;">Profile</h1>
<!-- Search box -->
<div id="search">
<input type="text" name="search_input" id="search_input" style="display: inline;" />
<button type="submit" onclick="search()">Search</button>
</div>
<input type="hidden" name="button-name" id="button-name" value="" />
{% for i in profile %}
<tr>
<td><label>Firstname:</label></td>
<td><input class="enable" name="firstname" type="text" disabled value="{{ i.firstname }}" /></td>
</tr>
<tr>
<td><label>Lastname:</label></td>
<td><input class="enable" name="lastname" type="text" disabled value="{{ i.lastname }}" /></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input class="enable" name="email" type="text" disabled value="{{ i.user.email}}" /></td>
</tr>
<tr>
<td><label>Location:</label></td>
<td><input class="enable" type="text" name="location" disabled value="{{ i.location }}" /></td>
</tr>
{% endfor %}
</table>
{% if edit %}
<button style="margin: 30px 30px" id='save_button' type='button' onclick='activate()'>Edit</button>
{% endif %}
</form>
</div>
Here is my code:
http://jsfiddle.net/U5jhc/
My problem was on the django setting. I had the wrong setting for causing the jquery file not to load.

Categories