We Keep Coding

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.

javascript ROWs INDEX when change value of a field

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.

how to disable input type = text on check box click if i have many inputs of the same name

I'm getting many data and i'm looping into them in html so there are many inputs with the same name
My html code :
{% for Permission in Permissions %}
<tr>
<td style="text-align:center;"> {{Permission.perm_label}} </td>
<td style="text-align:center;"> <input type="checkbox" class="permUsersClass" id="permUsers" name="permUsers" value="permUsers" {% if Permission.perm_users != 0 %} checked {% endif %}> <input type="text" id="permUsersText" name="Users" value="{{Permission.perm_users }}" > </td>
<td style="text-align:center;"> <input type="checkbox" id="permProfile" name="permProfile" value="permProfile" {% if Permission.perm_profile != 0 %} checked {% endif %} > <input type="text" id="permProfileText" name="Profile" value="{{Permission.perm_profile }}"></td>
<td style="text-align:center;"> <input type="checkbox" id="permSchedule" name="permSchedule" value="permSchedule" {% if Permission.perm_schedule != 0 %} checked {% endif %}> <input type="text" id="permScheduleText" name="Schedule" value="{{Permission.perm_schedule }}"> </td>
<td style="text-align:center;"> <input type="checkbox" id="permAccount" name="permAccount" value="permAccount" {% if Permission.perm_accounting != 0 %} checked {% endif %}> <input type="text" name="Accounting" value="{{Permission.perm_accounting}}"> </td>
</tr>
{% endfor %}
My javascript functiom
$('.permUsersClass').change(function () {
$('input[name=Users')[0].disabled = !this.checked;
}).change();
In javascript how to disable specific text box and not just the first one

Symfony search form without reload page

I use symnfony and have form for search entity by parameters, but when submit form my page reload, I don't know how realized search form when fill out fields and under form I have result without reload page, like write in filed some word and in this time under update block with result
this my form with action, action wait get parameters and rendering in this view with form and result
<div class="filters" id="filter_form">
<form action="{{ path('outbound_invoices') }}" method="get">
<div class="choice-group" role="group" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="status" value={{ status_draft }} checked="checked">{{ status_draft|trans }}
</label>
<label class="btn">
<input type="radio" name="status" value={{ status_sent }}>{{ status_sent|trans }}
</label>
<label class="btn">
<input type="radio" name="status" value={{ status_paid }}>{{ status_paid|trans }}
</label>
</div>
<div class="choice-group" role="group" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="type" value="all" checked="checked">all
</label>
<label class="btn">
<input type="radio" name="type" value="contract">contract
</label>
<label class="btn">
<input type="radio" name="type" value="other">other
</label>
</div>
<input name="search" id="filter-employees" placeholder="{{ 'search'|trans }}" class="form-control">
<p>from Date: <input type="text" name="from_date" id="from_datepicker" dataformatas="dd-mm-yyyy"></p>
<p>to Date: <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy"></p>
<input type="submit" value="Submit">
</form>
</div>
// block result
<table class="table">
<thead>
<tr>
<th>
{% trans %}invoice_number_short{% endtrans %}
</th>
</tr>
</thead>
<tbody>
{# #var outboundInvoice \AppBundle\Entity\OutboundInvoice#}
{% for outboundInvoice in outboundInvoices %}
<tr class="clickable" data-href="{{ path('outbound_invoices_show', {'id': outboundInvoice.id}) }}">
<td>
{{ outboundInvoice.invoiceNumber }}
</td>
{% endfor %}
</tr>
</tbody>
</table>
in action I just create query builder for find entities and rendering in template. How it's realized with ajax without reload and search in real time ?

Here is an example to post your form via ajax with jQuery:
var form = $('#my-form');
$.post(
form.prop('action'), //action url
form.serializeArray(), //serialized form data
function(result){ //callback
console.log(result);
}
);

Use the AJAX as you'd normally do:
//add jquery here
$('#filter-employees').click(function(e){
e.preventDefault();
$.ajax({
action:"/invoices"
//...
}).done(function(resp));
});
Then in the controller action, you need to verify if the request is a XMLHttpRequest one, and create the functionality accordingly.
/**
* #Route("/invoices", name="outbound_invoices")
*/
public function processAction(Request $request)
{
if ($request->isXmlHttpRequest()) {
//do work
}
return $this->redirectToRoute('whatever');
}
OBS: I would recommend you to use Angular for this type of things.

JQuery not hiding the buttons upon ready

When I try to use the below code with jfiddle, I comment out the jinja and the buttons hide as expected, but in the browser, the input buttons don't hide
{% extends "layout.html" %}
{% block body %}
<div>
{% if session.logged_in %}
<form action="{{ url_for('add_entry') }}" method=post class=add-entry>
<dl>
<dt>Stock Ticker:
<dd><input type=text size=30 name=stockname>
<dt>Date:
<dd><input id="datePicker" type="date" name='start_date'>
<dd><input type=submit value=Add>
</dl>
</form>
{% endif %}
</div>
<div>
<form action="{{ url_for('edit_entry') }}" method=post class=edit-entry>
<table class="entries">
<tr>
<th>stock ticker</th>
<th>date bought</th>
<th> Edit</th>
</tr>
{% for entry in entries %}
<tr>
<td><h2>{{ entry.stockname }}</h2></td>
<td>{{ entry.start_date|safe }}</td>
<td>
<input type="hidden" name="name" value="Edit"/>
<input class="show" type="button" id="edit-button" value="Edit"/>
<input class="hide" type="button" id="cancel-button" value="Cancel Changes"/>
<input class="hide" type="submit" id="save-button" value="Save Changes"/>
</td>
</tr>
{% else %}
<em>Unbelievable. No entries here so far</em>
{% endfor %}
</table>
</form>
</div>
{% endblock %}
<script>
$(document).ready( function() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
$('#datePicker').val(today);
$(".hide").hide();
});
</script>
and layout.html consists of...
<!doctype html>
<title>Flaskr</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Flaskr</h1>
<div class=metanav>
{% if not session.logged_in %}
log in
{% else %}
log out
{% endif %}
</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
Fiddle: http://jsfiddle.net/5ZNTf/

You are defining lots of
<input type="submit" id="save-button" value="Save Changes"/>
in your for loop, so you have multiple input tags with the same id on the page, thus it does not work. Try giving the inputs a class instead.

Use class instead of id for your input elements.
<input type="hidden" class="name" value="Edit"/>
<input type="button" class="edit-button" value="Edit"/>
<input type="button" class="hide" value="Cancel Changes"/>
<input type="submit" class="hide" value="Save Changes"/>
Change the selector to use class.
$("input[class=hide]").hide();
Try this: http://jsfiddle.net/5ZNTf/1/

Id's need t be unique. If you would like to hide multiple elements with the same name use a class.
<button class="hide">Cancel</button>
<button class="hide">Save</button>
Then add a css class to hide them. It's more reliable IMO.
.hide {
display: none;
}

The issue had to do with localhost not property reading in jquery -_-
"//url" instead of "http://" or "https://" only works remotely