Load function in loop - javascript

I have an working loadfunction. But when I use this in an loop it won't work, the data is not pulled or the code is not (correctly) triggered. When viewing the console there is no error. So hard to determine why the data is not shown.
In this code when the users selects an item of the first select list the second select list is updated with the corresponding data.
<select class="form-control" id="add_off_relatie_id" name="add_off_relatie_id" onchange="add_contact_table_4()">';
foreach ($rows_adr as $row_adr)
{
echo '<option ';if($row['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
}
echo '
</select>
<select class="form-control" id="add_off_contact_id" name="add_off_contact_id" onchange="validate_add_off_table_4()">';
foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row['relatie_id'])
{
echo '<option ';if($row['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
}
echo '
</select>
<script type="text/javascript">
function add_contact_table_4()
{
$('#add_off_contact_id').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('add_off_relatie_id').value)
}
</script>
But when using the same structure in an for loop and the user select an new item in the first select list the data in the second select list is not updated.
<select class="form-control" id="edit_off_relatie_id['.$i.']" name="edit_off_relatie_id" onchange="edit_contact_table_4(this, '.$i.')">';
foreach ($rows_adr as $row_adr)
{
echo '<option ';if($row_table_4['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
}
echo '
</select>
<select class="form-control" id="edit_off_contact_id['.$i.']" name="edit_off_contact_id" onchange="validate_edit_off_table_4(this, '.$i.')">';
foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row_table_4['relatie_id'])
{
echo '<option ';if($row_table_4['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
}
echo '
</select>
<script type="text/javascript">
function edit_contact_table_4(selectVeld, nr)
{
$('edit_off_contact_id['+nr+']').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id['+nr+']').value)
}
</script>
Any suggestions would be fantastic.

Square brackets are used to special tasks, like getting attributes, like in input[name=something], so they need to be escaped:
$('edit_off_contact_id\\['+nr+'\\]').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id\\['+nr+'\\]').value)
Or you can change string format for your ids:
<select class="form-control" id="edit_off_relatie_id-' . $i . '" name="edit_off_relatie_id" onchange="edit_contact_table_4(this, ' . $i . ')">';
foreach ($rows_adr as $row_adr)
{
echo '<option ';if($row_table_4['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
}
echo '
</select>
<select class="form-control" id="edit_off_contact_id-' . $i . '" name="edit_off_contact_id" onchange="validate_edit_off_table_4(this, ' . $i . ')">';
foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row_table_4['relatie_id'])
{
echo '<option ';if($row_table_4['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
}
echo '
</select>
<script type="text/javascript">
function edit_contact_table_4(selectVeld, nr)
{
$(`edit_off_contact_id-${nr}`).load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById(`edit_off_relatie_id-${nr}`).value)
}
</script>

Related

retaining drop down value after submit in PHP

I have a drop down pull from an oracle database. when I select a drop down value and click a show details button , the details show but the drop down defaults back to the first one in the list. I need it to stay on the selected value.
I am doing this in PHP
I have tried this but it cannot recognize the
<form name= "fund" method="post" >
<label id= "fund" for="fund">Fund:</label>
<Select name="fund" id="fund">
<option value="--Select A Fund--">--Select a Fund--</option>
<?php
$sql = 'SELECT Account_name ||\' - \'|| Fund_id as FUND, FUND_ID FROM FUND_ACCOUNTS';
$stid = oci_parse($conn, $sql);
$success = oci_execute($stid);
while ($row = oci_fetch_array($stid, OCI_RETURN_NULLS+OCI_ASSOC))
{
$selected = (!empty($_POST['fund']) && $_POST['fund'] == $row['FUND']) ? 'selected' : '';
echo '<option value="' . $row['FUND'] . '" ' . $selected . '>' . $row['FUND'] . '</option>';
}
?>
</select>
<input type="submit" name="fund"
value="Show Current Fund Investors"/>
</form>
<BR>
<?php
echo 1 . $row['FUND'];
echo 1 . $_POST['fund'];
?>
But $selected is never populated. Not sure where to go from here, and I am not a web developer. Any ideas where I am going wrong ?
the output of the final echos is 11Show Current Fund Investors
Likely this line just needs to do this:
$selected = (!empty($_POST['fund']) && $_POST['fund'] == $row['FUND'])) ? 'selected' : '';
What you have is matching the default option with || ($row['FUND'] == '--Select A Fund--') and probably also adding selected to the one you actually do select from the drop down. View the page source in the browser, there might be two options with the selected attribute.
By default, if nothing is selected, it will just show the first item in the dropdown which is --Select A Fund-- anyway.
Also you probably should have a space before the $selected variable and after the quote:
echo '<option value="' . $row['FUND'] . '" ' . $selected . '>' . $row['FUND'] . '</option>';
Should come out to:
<option value="whatever" selected>Whatever</option>
Edit
Based on your edit, you need to remove the name attribute from the submit button, or rename it. It’s conflicting with your select name.
<input type="submit" value="Show Current Fund Investors"/>
A tip:
You should encapsulate your fetching of that list in a function (at the very least) and include it in the page at the top:
/functions/fetchFundAccounts.php
<?php
function fetchFundAccounts($conn)
{
$stid = oci_parse($conn, 'SELECT Account_name ||\' - \'|| Fund_id as FUND, FUND_ID FROM FUND_ACCOUNTS');
$success = oci_execute($stid);
$results = [];
while ($row = oci_fetch_array($stid, OCI_RETURN_NULLS+OCI_ASSOC)) {
$results[] = $row;
}
return $results;
}
To use:
<?php include(__DIR__.'/functions/fetchFundAccounts.php') ?>
<form name= "fund" method="post" >
<label id= "fund" for="fund">Fund:</label>
<select name="fund" id="fund">
<option value="--Select A Fund--">--Select a Fund--</option>
<?php foreach(fetchFundAccounts($conn) as $row): ?>
<option value="<?php echo $row['FUND'] ?>" <?php echo (!empty($_POST['fund']) && $_POST['fund'] == $row['FUND']) ? 'selected' : '' ?>><?php echo $row['FUND'] ?></option>
<?php endforeach ?>
</select>
<input type="submit" value="Show Current Fund Investors"/>
</form>

Can't get value of select list with Javascript when it is created using PHP array from database

If I generate a select list using PHP from the results of a database query, for some reason I can't then use Javascript to get the value of the currently selected item. I tested this code with a static list and it works no problem. Here is my code:
<?php
require_once("config.php");
$sql="SELECT * FROM animals ORDER BY name ASC";
try
{
$stmt = $DB->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_UNIQUE); //each column is addressed by the primary key
}
catch (Exception $ex)
{
echo $ex->getMessage();
}
?>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
$("#animal_list").change(function(){
var animalValue = $(this).val();
window.location.href="animal_list.php?id=" + animalValue;
});
});
</script>
</head>
<body>
<select id="animal_list" name="animal_list">
<?php
foreach($results as $res)
{
?>
<?php echo '<option value="'. $res['id'] . '">' ?>
<?php echo $res['name'] ?>
</option>
<?php
}
?>
</select>
<br/><br/>
<?php
if(isset($_GET['id']))
{
echo '<input type="text" id="npsw_code" value="' . $_GET['id'] . '" readonly>';
}
else
echo '<input type="text" id="npsw_code" value="" readonly>';
?>
</body>
</html>
Testing with a static list works. Here is the example:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
$("#fruits").change(function(){
var fruitValue = $(this).val();
window.location.href="fruits.php?id=" + fruitValue;
});
});
</script>
</head>
<body>
Fruits
<select id="fruits" name="fruits">
<option value="0">Apple</option>
<option value="1">Pear</option>
<option value="2">Watermelon</option>
<option value="3">Orange</option>
</select>
<br/><br/>
<?php
if(isset($_GET['id']))
{
echo 'My Fruit <input type="text" id="myfruit" value="' . $_GET['id'] . '" readonly>';
}
else
echo 'My Fruit <input type="text" id="myfruit" value="" readonly>';
?>
</body>
</html>
remove onchange="listChange()" because is not defined and we dont need it.
and use $(this).find('option:selected').val(); for get value of option selected.
$("#animal_list").change(function(){
var animalValue = $(this).find('option:selected').val();
window.location.href="animal_list.php?id=" + animalValue;
});
First off I would clean this mess up.
<select id="animal_list" name="animal_list">
<?php
foreach($results as $res)
{
?>
<?php echo '<option value="'. $res['id'] . '">' ?>
<?php echo $res['name'] ?> <!-- missing ; -->
</option>
<?php
}
?>
</select>
<br/><br/>
<?php
if(isset($_GET['id']))
{
echo '<input type="text" id="npsw_code" value="' . $_GET['id'] . '" readonly>';
}
else
echo '<input type="text" id="npsw_code" value="" readonly>';
?>
Sorry I just can't deal with poorly formatted code, it makes reading it a chore. It just seems like so much wasted effort.
<select id="animal_list" name="animal_list">
<?php foreach($results as $res): ?>
<option value="<?php echo $res['id'];?>"><?php echo $res['name']; ?></option>
<?php endforeach; ?>
</select>
<br/><br/>
<?php
$readonly = '';
$npsw_code = '';
if(isset($_GET['id'])){
$readonly = ' readonly';
$npsw_code = $_GET['id'];
}
?>
<input type="text" id="npsw_code" value="<?php echo $npsw_code; ?>" <?php echo $readonly; ?>>
We'll also ignore this (missing ; ):
<?php echo $res['name'] ?>
Probably a syntax error, but see that's what happens when you cant read the code.
Javascript don't care how the HTML got in the page, only what the HTML looks like. Without knowing what it looks like, all we can do is guess. You can view source and see what it looks like.
Otherwise, put an alert in the on change handler and see what it says.
$("#animal_list").change(function(){
var animalValue = $(this).val();
alert(animalValue);
window.location.href="animal_list.php?id=" + animalValue;
});
Alert has the nice side effect of halting/pausing Javascript execution so it will interrupt the page redirect. This will tell you 2 things,
your event is being fired on change
the value is correct.
Never mind it was a typo. The column in my database was 'code' not 'id'. So it should have read . Sorry for wasting your time.

selected="selected" field in opencart 2.1

I'm using one module AJAX d_quickcheckout for faster checkout page on opencart 2.1 (not the default one). The problem is with one field on payment address section not to be selected by default, this is region/state field. At the moment the field has the region/state where the store is located.
Even if I remove the field, this region/state doesn't show at the checkout page but is shown on invoice!
I want this field to be like --Select State-- or with default value="0" and $text_none
These are the two code blocks that I think I must change:
HTML
<select name="payment_address[address_id]" style="width: 100%; margin-bottom: 15px;" data-refresh="3">
<?php foreach ($addresses as $address) { ?>
<option value="<?php echo $address['address_id']; ?>" <?php echo ($address['address_id'] == $payment_address['address_id']) ? 'selected="selected"' : ''; ?>>
<?php echo $address['firstname']; ?>
<?php echo $address['lastname']; ?>,
<?php echo $address['address_1']; ?>,
<?php echo $address['city']; ?>,
<?php echo $address['zone']; ?>,
<?php echo $address['country']; ?>
</option>
<?php } ?>
</select>
AJAX:
function refreshPaymentAddessZone(value) {
$.ajax({
url: 'index.php?route=module/quickcheckout/country&country_id=' + value,
dataType: 'json',
beforeSend: function() {
},
complete: function() {
},
success: function(json) {
if (json['postcode_required'] == '1') {
$('#payment-postcode-required').show();
} else {
$('#payment-postcode-required').hide();
}
html = '<option value=""><?php echo $text_select; ?></option>';
if (json['zone'] != '') {
for (i = 0; i < json['zone'].length; i++) {
html += '<option value="' + json['zone'][i]['zone_id'] + '"';
if (json['zone'][i]['zone_id'] == '<?php echo $payment_address['fields']['zone_id']['value']; ?>') {
html += ' selected="selected"';
}
html += '>' + json['zone'][i]['name'] + '</option>';
}
} else {
html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
}
$('#payment_address_wrap select[name=\'payment_address[zone_id]\']').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
You can try this code block, instead of your currect select:
<select name="payment_address[address_id]" style="width: 100%; margin-bottom: 15px;" data-refresh="3">
<option value="0">-- Select State --</option>
<?php foreach ($addresses as $address) { ?>
<option value="<?php echo $address['address_id']; ?>">
<?php echo $address['firstname']; ?>
<?php echo $address['lastname']; ?>,
<?php echo $address['address_1']; ?>,
<?php echo $address['city']; ?>,
<?php echo $address['zone']; ?>,
<?php echo $address['country']; ?>
</option>
<?php } ?>
</select>
If this isn't sufficient, remove the AJAX-call as well.
You can comment the $.ajax call and the dropdown will be empty all the time.

i want submit form on last select onchange i have multilple selects, options are generated dynamically

Submit form on last select onchange: I have multiple selects, options are generated dynamically.
var children = $H(<?php echo json_encode($tree['children']) ?>);
function showCat(obj, level) {
var catId = obj.value;
level += 1
if ($('cat_container_' + level)) {
$('cat_container_' + level).remove();
}
if (children.get(catId)) {
var options = children.get(catId);
var html = '<select id="cat_' + catId + '" onchange="showCat(this, ' + level + ')">';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].entity_id + '">' + options[i].name + '</option>';
}
html += '</select>';
html = '<div id="cat_container_' + level + '">' + html + '</div>';
$('sub_cat').insert(html);
}
}
im using select onchange at the same time adding select also this code submit only first level select. I have many levels inside them and options are generated dynamically. I want to submit on last select onchange.
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<select id="first_cat" onchange="showCat(this, 2);this.form.submit()" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText(); ?>" class="input-text" >
<?php foreach ($tree['first'] as $cat): ?>
<option value="<?php echo $cat->getId() ?>"><?php echo $cat->getName() ?></option>
<?php endforeach ?>
</select>
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button"><span><span><?php echo $this->__('Search') ?></span></span></button>
</form>
var select = document.getElementsByTagName('select')[0];
function myFunction(e){
if(e.value == select.options[select.options.length-1].text){
alert("Last value selcted")
}
}
var select = document.getElementsByTagName('select')[0];
function myFunction(e){
if(e.value == select.options[select.options.length-1].text){
alert("Last value selcted")
}
}
<select onchange="myFunction(this)">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
</select>

Hold selected item in Drop Down php

I want to hold selected value of drop down while submitting form on onchange event of drop down.
This is my code
echo "<form method=\"post\">
<select name=\"Color\" OnChange=\"this.form.submit();\"> ";
while($rec=mysql_fetch_array($query))
{
$value = $rec['name'];
echo "<option value=\"$value\">$value</option>";
if($row['name'] == $_SESSION['name'])
echo " selected";
}
echo "</select> "?>
You probably mean, if you submit the form but an error is on the inputs you want to keep the selected option.
Then, try this:
echo "<form method=\"post\">
<select name=\"Color\" OnChange=\"this.form.submit();\"> ";
while($rec=mysql_fetch_array($query)) {
$value = $rec['name'];
$selected = ( $value == $_SESSION['name'] ) ? ' selected' : '';
echo "<option value=\"$value\"$selected>$value</option>";
echo "</select> "?>
I however think that $_SESSION['name'] should be $_POST['name']
First of all, if($row['name'] == $_SESSION['name']) // instead of $row use $rec,because you used in mysql_fetch_array.
<form method="post">
<select name="Color" OnChange="this.form.submit();">
<?
while($rec=mysql_fetch_array($query))
{
$value = $rec['name'];
?>
<option value="<?echo $value;?>" <?if($rec['name']==$_SESSION['name']){echo "selected;"}?>>$value</option>
<?}?>
</select>
</form>

Categories