Inputs dynamically added and filled out in new Mozilla version

1 day ago 1
ARTICLE AD BOX

I've got a php, javascript, html code that is working in an old PC with windows 7 and Mozilla 115.34.1esr (32-bit). I'm trying the same code in computers with windows 11 and 10 that have mozilla 150.0.2 (64-bit).

The code add Inputs Dynamically and fill them out, But in the new mozilla the inputs are added but not fill them out.

The image shows how inputs all populate and fill out in the working windows 7 computer. Another capture shows inputs blank from code running on new Mozilla.

enter image description here

enter image description here.

This is my index.php:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> <title>Count Months</title> <!-- CSS 3.3.6--> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>--> <script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> --> <script type="text/javascript" src=" bootstrap-3.3.6/dist/js/bootstrap.min.js"></script> <!--<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>--> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery-ui.css"> <!-- Load css style file--> <link rel="stylesheet" href="libcss/style.css" type="text/css" media="all" /> <!-- Libreria para Alertify --> <link rel="stylesheet" type="text/css" href="alertify/css/alertify.css"> <link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css"> <script src="alertify/alertify.js"></script> <!-- Modals Lib--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript" src="librerias/js/sweetalert2.js"></script> <script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script> <link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css"> <link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css"> <script language="JavaScript"> //Fill each Input with Expense Name example: Water, electricity I want to Add Expense Id Hidden function FillupInputs(inputs_counter,name) { //read yearmonth and populate inputs $('#yearmonth').val(document.getElementById("datepicker2").value); for (let i = 0; i < inputs_counter; i++) { $('input[name="expense_select[]"]').eq(i).val(id_yearmonths[i]); $("#datepicker2").prop("readonly", true); //Disable Input datepicker2 $("#datepicker2").attr('disabled', !$("#datepicker2").attr('disabled')); $("#datepicker2").removeClass("grey"); } } //Get Number of Month Expenses and Expenses Name function myFunction_debt(office_id){ $.ajax({ //Call php to get Expense Id and Name url: 'librerias/php/count_month.php', type: 'POST', dataType: 'json', data:{office_id:office_id}, success: function(data) { //Call function to Add Number Inputs Add_Inputs(data.quantity); //fill Inputs with expenses Name and Id alert("Months: "+data.quantity); FillupInputs(data.quantity,data.office_id,data.yearmonthd); }, error: function(errorThrown) { alert(errorThrown); } }); } //Call DinamyInputsdebt.php for Creating Inputs according expenses number function Add_Inputs(quantity) { $('#head').text('Months (Uncheck If you want):'); for (let i = 0; i < quantity; i++) { $("<div>").load("DinamyInputsdebt.php", function() { $("#YearMonthsInputs").append($(this).html()); }); } } //Fill each Input with Expense Name example: Water, electricity I want to Add Expense Id Hidden function FillupInputs(quantity,office_id,yearmonthd) { for (let i = 0; i < quantity; i++) { //populate Inputs with office_id id, yearmonthd en checkbox $('input[name="expense_select[]"]').eq(i).val(yearmonthd[i]); $('input[name="yearmonthd[]"]').eq(i).val(yearmonthd[i]); $('input[name="office_id[]"]').eq(i).val(office_id[i]); $("#datepicker2").removeClass("grey"); } } </script> </head> <body> </br> </br> <div class="signup-form"> <form action="process.php" method="post" id="generarfactura_form"> <h2>Get Months</h2> <div class="form-group"> <div class="row"> <div class="col-sm-4"> <label>Select office:</label> <select required id="select_ofic" name="select_ofic"class="form-control" onchange=" myFunction_debt(this.value)"> <option value="">Select Ofic.</option> <?php include("librerias/php/fetchmonth.php") ?> </select> </div> </div> <!-- Here Will be added the Inputs for populating YearMonths --> <label id="head"></label> <div id="YearMonthsInputs"></div> <div class="form-group"> <button type="submit" class="btn btn-success btn-lg">Process</button> </div> </form> </div> </div </body> </html>

From the index.php code When I select and office from the select/option (id="select_ofic"), A java script function myFunction_debt is called. Then the javascript function call php file "count_month.php" that gets fields month-year according to office selected from mysql table, then inputs are populate and fill them out using DinamyInputsdebt.php.

count_month.php:

<?php session_start(); include "conexiondb.php"; $office_id = $connect->real_escape_string($_POST['office_id']); $currentdate = date('d-m-Y'); //Count number of month registers $sqlc = $connect->query("SELECT * FROM monthtotal WHERE office_id = '$office_id' AND payment_status=0"); //quantity of months $quantity=$sqlc->num_rows; //find months status=0 $sql = "SELECT * FROM monthtotal WHERE office_id = '$office_id' AND payment_status=0"; $result = $connect->query($sql); $office_id = array(); $yearmonth = array(); //If find months if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $office_id[] = $row['office_id']; $yearmonthd[] = $row['yearmonth']; } //Merge Array with number of register for quantity,, office_id,yearmonth $Totalarray = array('quantity' => $quantity, 'office_id' => $office_id, 'yearmonthd' => $yearmonthd); //Send array to ajax exit(json_encode($Totalarray)); } mysqli_close($connect); ?>

DinamyInputsdebt.php:

<div class="row"> <div class="col col-lg-2"> <input type="checkbox" style="color: blue; background-color:#DDFF33; text-align:left; font-weight: bold" class="form-control" name="expense_select[]" value="" id="expense_select" checked><br> </div> <div class="col-md-auto"> <input type="text" style="color: blue; background-color:#FFFACD; text-align:left; font-weight: bold" class="form-control" name="yearmonthd[]" value="" id="yearmonthd" > <input type="hidden" style="color: blue; background-color:#DDFF33; text-align:left; font-weight: bold" class="form-control" name="office_id[]" id="office_id" > </div> </div>

Please, any ideas for making the code works in new mozilla version?

Read Entire Article