Question/assist with selection to js function

[BobMCT]

Let me start by mentioning that lots of this code was inherited. I'm charged with making some things work and I'm certainly having issues with this.
The current page issues a form with numerous input fields that start out blank/empty. The php program reads a db table and from it fabricates a <select list showing the user the descriptions of the records. When it retrieves the records it also receives a charge_amount and a payment_amount. When the user selects one of the options the corresponding charge and payment amounts are to be plugged into the corresponding <input fields using javascript. Most of this works reasonable well but I'm stuck on this select issue.
The original code as you can see below simply places two extra fields on the input tab line which is not following HTML syntax. But, in some cases this logic works. The javascript function is show further down.

So my question is: What is the best method to use to pass this php contructed information to the js function so it can be plugged into the form field(s)? What's interesting is that there are TWO separate programs with these sections virtually identical. One of the programs works fine, the other doesn't work at all. And I receive no compile/syntax errors.

php snippet:

<select class="form-control m-b" name="description1" id="description1">
<option value=""> </option>
<? $CA = array(); while ($row11 = $q11->fetch()) { ?>
<option value="<?=$row11['description'];?>" charge_amount="<?=$row11["charge_amount"];?>" payment_amount="<?=$row11["payment_amount"];?>">
<?=$row11["description"]; $CA['$row11["description']=$row11["charge_amount"]; ?>
</option>
<? } ?>
<option value="Custom">Custom</option>
</select>

javascript function:

<!-- Custom Description handler -->
<script>
$(document).ready(function () {
$('#description1').change(
function() {
if (this.value == "Custom") {
$('#custDescTxt1').css("display", "");
$('#custDescLbl1').css("display", "");
} else {
if ($('#custDescTxt1').val().length == 0) {
$('#custDescTxt1').css("display", "none");
$('#custDescLbl1').css("display", "none");
}
}
$('#charge_amount1').val(this.options[this.selectedIndex].getAttribute("charge_amount"));
$('#payment_amount1').val(this.options[this.selectedIndex].getAttribute("payment_amount"));
}
);
});
</script>

Thanks for any guidance/suggestions.

 

[feherke]

Hi

The original code as you can see below simply places two extra fields on the input tab line which is not following HTML syntax.

You can make it standard HTML5 using [tt[data-*[/tt] attributes instead :

[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][i][green]"foo"[/green][/i] [maroon]data-charge-amount[/maroon][teal]=[/teal][i][green]"11"[/green][/i] [maroon]data-payment-amount[/maroon][teal]=[/teal][i][green]"22"[/green][/i][b]>[/b]bar[b]</option>[/b]

( HTML5 | Semantics, structure, and APIs of HTML documents | Elements | Global attributes | Embedding custom non-visible data with the data-* attributes )

As using jQuery, you can access those attributes with the [tt].data()[/tt] method.

What is the best method to use to pass this php contructed information to the js function so it can be plugged into the form field(s)?

You mean the $CA array ?

[b]<script>[/b]
[b]var[/b] that_ca_thing [teal]= <?=[/teal][COLOR=orange]json_encode[/color][teal]([/teal]$CA[teal])?>[/teal]

$[teal]([/teal]document[teal]).[/teal][COLOR=orange]ready[/color][teal]([/teal][b]function[/b] [teal]() {[/teal]
[gray]// rest of script[/gray]
[teal]});[/teal]
[b]</script>[/b]

Feherke.
feherke.ga

 

[BobMCT]

Well Thanks Feherke. I changed the code back to the HTML5 form that you referenced. Makes sense.
But I have another hitch: The form will NOT submit. What's strange is I have two separate programs that do virtually the exact same thing but on different data. One works fine and the other will not submit.

Here are my buttons in the form and also my javascript submit. Perhaps you can see something out of what?
<form name="add_trans" id="add_trans">

<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submit"> Save Transaction </button>

<!-- Function to submit form data via an ajax call -->
<script>
$('#add_trans').on('submit', function(e) {
e.preventDefault();
var url = document.getElementById("url").value;
$.post(
'add_transaction.php',
$(this).serialize(),
function(data) {
window.location.replace(url);
window.location.reload(true);
},
"json"
);
});
</script>

Thanks for any extra eyes and brains with this.

 

[feherke]

Hi

The form will NOT submit.

The error is probably elsewhere. If I press Save Transaction, the for is submitted. If you need help debugging this, better post a functional example that reproduces the bug and add details about that "NOT" : does any error message appear in the browser's console or the web servers's log, anything else happens instead of submitting ?

Feherke.
feherke.ga