Could I please enquire.

How can I create a countdown then replicate it 6 times?

What I'm trying to do is build and auction page, which has 6 items, and 6 different ending times.

I've done it for 1 item (well I've copied the javascript from W3Scools site, then made up a date to test it).

But, I'm unsure how to repeat the same process, another 5 dates and times.

Could anyone please advise me?

The copied countdown code, I've got is:-

<!-- Countdown -->
        <p id="demo"></p>

        <script>
            // Set the date we're counting down to
            var countDownDate = new Date("Feb 18, 2026 23:25:25").getTime();

            // Update the count down every 1 second
            var x = setInterval(function() {

                // Get today's date and time
                var now = new Date().getTime();

                // Find the distance between now and the count down date
                var distance = countDownDate - now;

                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                // Display the result in the element with id="demo"
                document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

                // If the count down is finished, write some text
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "EXPIRED";
                }
            }, 1000);
        </script>

Thank You.

[Of course, this has only come up after AI used it bc it couldn't/still hasn't fixed some code.]

Nonetheless, I'm wondering how popular and reasonable it actually is. I've done a fair amount of researching, and async seems to be a 'work-around' to avoid writing a few extra lines of code.

ie: save this value in a variable and give it to me last (almost like an overwritten value), no matter what.

Am I missing something.

PS: I've seen numerous examples that say the same thing, so I'm really looking for an honest human opinion.

Eventually the AI informed me that the file was getting too big for it to produce as a complete file, so I broke it up (around my original code)

<script src="myscripts_A.js"></script>

<script src="myscripts_B.js"></script>

<script>
  
  //original JavaScript stuff
</script>

<script src="myscripts_C.js"></script>

The code worked as well as could be expected.

Then, I decided to put it back as one file, and after I did, certain features and button triggers stopped working.

I haven't fully gotten to troubleshooting this, but is there something about the way JS organizes src files that I need to know?

   When I was working on password generator website using PHP, I connect the main.js file to the index file and everything is okay and it works, but when I close the device and reopen it and open the project any change in the javascript file does not affect on the index file and when I open the inspect and see the sources the main.js file is constant at the code before I turn off the device, then I change the name of js file and reconnect it to the index.php and it works, and the question here WHY this happened?

I wish anyone help me because in real life I will not change the name of the files everyday.

NOTE: my OS is Ubuntu.

Thank you.

So here I am, having (regrettably) relied on AI for help in building a webpage.

But let me get to my question.

The page was built with a pop-up modal that contains a short list of items which AI decided to create in hardcoded HTML with inline CSS. (This wouldn't have been my choice methodology and I tried to get the darn thing to loop through an array but this was ultimately the best working result provided. Ugggh!)

Next came the fun part. *sarcasm*

I wanted a second modal similar to the first. (For simplicity, think one for boys and the second for girls.)

When I asked/told (I'm not quite sure who was 'in charge'...  LOL) AI to make a second modal that resembled the first it took a lot of tweaking to reach my goal.

Ultimately, functions and layouts became horribly fragmented and frustration ruled the day.

I decided I needed to do this the ole fashion way and write MY code myself.

Since I already achieved a partially working script, I decided to maintain uniformity to make progress.

Well, as it turns out, the second modal was not hardcoded like the first. Instead, all the inline text and CSS is generated with JavaScript (ie: .. elementById).style.whatever= )

For uniformity, one of these approaches has to be replaced.

The question: Is one more efficient? Beneficial? Effective?

I've been accused in the past of not being up to date with modern methods, so I thought I'd ask.

Below is the action create

public function actionCreate()
    {
        $model = new Attendancereport();
		$modelsStudentattendance = [new Attendancereportdetails];

		if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
            Yii::$app->response->format = Response::FORMAT_JSON;
            return ActiveForm::validate($model);
        }

        if ($model->load(Yii::$app->request->post())) {

			$identity = Yii::$app->user->identity->getonlyid();

			$model->UserId = $identity;

			$modelsStudentattendance = Model::createMultiple(Attendancereportdetails::classname());

            Model::loadMultiple($modelsStudentattendance, Yii::$app->request->post());

            $valid = $model->validate();
		    $valid = Model::validateMultiple($modelsStudentattendance) && $valid;


           if($valid)
			{
            		$transaction = \Yii::$app->db->beginTransaction();
                try {
                    if ($flag = $model->save()) {

                        foreach ($modelsStudentattendance as $modelsStudentattendance) {
                            $modelsStudentattendance->AttendanceReportId = $model->AttendanceReportId;
                            if (! ($flag = $modelsStudentattendance->save())) {
                                $transaction->rollBack();
                                break;
                            }
                        }
                    }
                    if ($flag) {
                        $transaction->commit();
                        return $this->redirect(['view', 'id' => $model->AttendanceReportId]);
                    }
                } catch (Exception $e) {
                    $transaction->rollBack();
                }

			}
        }

        return $this->render('create', [
                'model' => $model,
				'modelsStudentattendance' => (empty($modelsStudentattendance)) ? [new Attendancereportdetails] : $modelsStudentattendance,
            ]);
    }

Below is the form

 <?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\jui\DatePicker;
use wbraganca\dynamicform\DynamicFormWidget;
use app\models\Ascassignment;
use app\models\Asccenter;
use app\models\Academicyear;
use kartik\time\TimePicker;
use yii\helpers\ArrayHelper;
use app\models\Student;
?>
<script>

$(document).ready(function() {
$(".i").each(function(k,v){
$(".i").attr("disabled","true");
});
});

$(document).ready(function(){
	//When the user clicks on the plus button
 $(".dynamicform_studentattendance").on("afterInsert", function(e, item) {
	const $i = $(item).find('.i');
	
	//Populates all the student drop-down with the student names belonging to the ASC center
    $.post("index.php?r=student/student-lists&id="+$("select#attendancereport-ascid").val(),function(data){
    $i.html(data);
	});

	});

	$(".dynamicform_studentattendance").on("afterInsert", function(e, item) {
	//const $s = $(item).find('.s');

	var e = $(this);

	//Populates the Standard drop-down for selected student
    $.post("index.php?r=attendancereport/standard&aid="+$("select#attendancereport-academicyearid").val()+"&ascid="+$("select#attendancereport-ascid").val()+"&sid="+e.val(),function(data){
		e.closest("tr").find(".s").html(data);
					});
	});
});

</script>

<div class="attendancereport-form">

    <?php $form = ActiveForm::begin([
			'id' => 'dynamic-form', 
			'enableAjaxValidation' => true,
			'enableClientValidation' => true,
			'validateOnChange' => true,
			'validateOnBlur' => true,
			'options' => ['class' => 'disable-submit-buttons'],
   ]);?>
 <div class="panel panel-primary " >
<div class="panel panel-heading"><font size="3"><b>Student Attendance Report</b></font></div>
<div class="row">
<div class="col-sm-4">

   <?=	$form->field($model, 'AcademicYearId')->dropDownList(ArrayHelper::map(Academicyear::find()->where(['DisplayStatus'=>'Enabled'])->all(),'Id','academicyear'), ['prompt' => 'Select Academic Year','onChange'=>'

   				 var e = $(this);
			$.post("index.php?r=attendancereport/standard&aid=' . '"+$("select#attendancereport-academicyearid").val()+"&ascid=' . '"+$("select#attendancereport-ascid").val()+"&sid=' . '"+e.val(),function(data){

						e.closest("tr").find(".s").html(data);

                    });


	'])?>

	</div>

<div class="col-sm-4">

  <?= $form->field($model, 'ASCId')->dropDownList(ArrayHelper::map(Asccenter::find()->leftJoin('ascassignment','`ascassignment`.`ASCId`=`asccenter`.`ASCId`')->where(['ascassignment.UserId' => \Yii::$app->user->identity->getonlyid()])->all(),'ASCId','ASCName'), ['prompt' => 'Select ASC Center','class'=>'form-control ascid','onChange' => '

	$.post("index.php?r=student/student-lists&id=' . '"+$("select#attendancereport-ascid").val(),function(data){
					 $(".i").each(function(k,v)
					{
						$(".i").attr("disabled",false);
						 $(".i").html(data);

					}
					);

					});

				 var e = $(this);
			$.post("index.php?r=attendancereport/standard&aid=' . '"+$("select#attendancereport-academicyearid").val()+"&ascid=' . '"+$("select#attendancereport-ascid").val()+"&sid=' . '"+e.val(),function(data){

						$(".s option:not(:first-child)").remove();
						e.closest("tr").find(".s").html(data);

                    });

					'
]) ?>
</div>

<div class="col-sm-4">

   <?= $form->field($model, 'DateofReport')->widget(DatePicker::classname(), [
											//'language' => 'ru',
											'dateFormat' => 'yyyy-MM-dd',
											'options' => ['class' => 'form-control picker','readOnly'=>'readOnly'],
											'clientOptions'=>['changeMonth'=>false,
											'changeYear'=>false,
											'maxDate'=>'today',
											 'stepMonths'=> false,
											],

]) ?>
</div>
</div>
</div>
<div class="panel panel-primary">
		<div class="panel-heading"><font size="3"><b>Student Attendance Details</b></font></div>
<?php DynamicFormWidget::begin([
		'widgetContainer' => 'dynamicform_studentattendance',
		'widgetBody' => '.container-studentattendance',
		'widgetItem' => '.studentattendance-item',
		'limit' =>500,
		'min' => 1,
		'insertButton' => '.add-studentattendance',
		'deleteButton' => '.remove-studentattendance',
		'model' => $modelsStudentattendance[0],
		'formId' => 'dynamic-form',
		'formFields' => [
			'StudentId',
			'Standard',
			'AttendanceStatus',
		],
	]); ?>
	<table class="table table-bordered">
		<thead>
			<tr bgcolor='#B8B8B8'>
			<th style='border: 1px solid black;'></th>
			   <th class ="text-center" style='border: 1px solid black;'>Student</th>
				<th class ="text-center" style='border: 1px solid black;'>Standard</th>
				<th class ="text-center" style='border: 1px solid black;'>Attendance Status</th>
				<th class="text-center" style='border: 1px solid black;'>Action</th>
			</tr>
		</thead>
		<tbody class="container-studentattendance">
		<?php foreach ($modelsStudentattendance as $indexStudent => $modelStudentattendance): ?>
			<tr class="studentattendance-item">
				<td class="vcenter" style='border: 1px solid black;'>
					<?php
						// necessary for update action.
						if (! $modelStudentattendance->isNewRecord) {
							echo Html::activeHiddenInput($modelStudentattendance, "[{$indexStudent}]AttendanceReportDetailsId");
						}
					?>
					</td>
					<td style='border: 1px solid black;'>


				 <?= $form->field($modelStudentattendance, "[{$indexStudent}]StudentId")->label(false)->dropDownList(ArrayHelper::map(Student::find()->all(),'StudentId','StudentName'), ['prompt' => 'Select Student','class'=>'form-control i','onChange'=>'

				 var e = $(this);
			$.post("index.php?r=attendancereport/standard&aid=' . '"+$("select#attendancereport-academicyearid").val()+"&ascid=' . '"+$("select#attendancereport-ascid").val()+"&sid=' . '"+e.val(),function(data){

						e.closest("tr").find(".s").html(data);

                    });

	']) ?>
				</td>

				<td style='border: 1px solid black;'>

						<?= $form->field($modelStudentattendance, "[{$indexStudent}]Standard")->label(false)->dropDownList([], [
							    'prompt' => 'Select Standard',
							    'class' => 'form-control s',
						]) ?>

				</td>

				<td style='border: 1px solid black;'>


				 <?= $form->field($modelStudentattendance, "[{$indexStudent}]AttendanceStatus")->label(false)->dropDownList(['Present'=>'Present', 'Absent' => 'Absent'], ['prompt'=>'Select Attendance Status'])?>
				</td>

				<td class="text-center vcenter" style='border: 1px solid black;'>
				<button type="button" class="add-studentattendance btn btn-success btn-xs"><span class="fa fa-plus"></span></button>
					<button type="button" class="remove-studentattendance btn btn-danger btn-xs"><span class="fa fa-minus"></span></button>
				</td>
			</tr>
		 <?php endforeach; ?>
		</tbody>
	</table>
	<?php DynamicFormWidget::end(); ?>

</div>

    <div class="form-group">
       <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
		 <?= Html::resetButton('Reset',['class' => 'btn btn-default'])?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

When the user selects Student, the student's standard should be displayed. I have a function called Standard that checks if the student's attendance record exists for the given academic year, ASC center, and student. If a record exists, then the standard of the student gets returned as shown below

public function actionStandard($aid,$ascid,$sid)
    {
		$count = \Yii::$app->db->createCommand("SELECT COUNT(*) from attendancereportdetails,attendancereport
					where attendancereportdetails.AttendanceReportId=attendancereport.AttendanceReportId
					and attendancereport.AcademicYearId=:ayear and attendancereport.ASCId=:acenter and attendancereportdetails.StudentId=:student and  
                    attendancereportdetails.Standard!=''")->bindValues([':ayear'=>$aid,':acenter'=>$ascid,':student'=>$sid])->queryAll();
		$count_result;
		foreach($count as $count_records)
		{
			$count_result = $count_records['COUNT(*)'];
		}

		$records = \Yii::$app->db->createCommand("SELECT * from attendancereportdetails,attendancereport
					where attendancereportdetails.AttendanceReportId=attendancereport.AttendanceReportId
					and attendancereport.AcademicYearId=:ayear and attendancereport.ASCId=:acenter and attendancereportdetails.StudentId=:student and 
                    attendancereportdetails.Standard!=''")->bindValues([':ayear'=>$aid,':acenter'=>$ascid,':student'=>$sid])->queryAll();

      if ($count_result > 0) {

			echo "<option value>Select Standard</option>";

            foreach ($records as $record) {
					ob_start();
				if($record['Standard']==0)
					echo "<option value=" . $record['Standard'] . ">" . 'Nursery' . "</option>";
				if($record['Standard']==1)
					echo "<option value=" . $record['Standard'] . ">" . '1st'. "</option>";
				if($record['Standard']==2)
					echo "<option value=" . $record['Standard'] . ">" . '2nd'. "</option>";
				if($record['Standard']==3)
					echo "<option value=" . $record['Standard'] . ">" . '3rd'. "</option>";
				if($record['Standard']==4)
					echo "<option value=" . $record['Standard'] . ">" . '4th'. "</option>";
				if($record['Standard']==5)
					echo "<option value=" . $record['Standard'] . ">" . '5th'. "</option>";
				if($record['Standard']==6)
					echo "<option value=" . $record['Standard'] . ">" . '6th'. "</option>";
				if($record['Standard']==7)
					echo "<option value=" . $record['Standard'] . ">" . '7th'. "</option>";
				if($record['Standard']==8)
					echo "<option value=" . $record['Standard'] . ">" . '8th'. "</option>";
				if($record['Standard']==9)
					echo "<option value=" . $record['Standard'] . ">" . '9th'. "</option>";
				if($record['Standard']==10)
					echo "<option value=" . $record['Standard'] . ">" . '10th'. "</option>";

            }
        } else {
			echo "<option value=''selected disabled>Select Standard</option>";
            echo "<option value=0>Nursery</option>";
			echo "<option value=1>1st</option>";
			echo "<option value=2>2nd</option>";
			echo "<option value=3>3rd</option>";
			echo "<option value=4>4th</option>";
			echo "<option value=5>5th</option>";
			echo "<option value=6>6th</option>";
			echo "<option value=7>7th</option>";
			echo "<option value=8>8th</option>";
			echo "<option value=9>9th</option>";
			echo "<option value=10>10th</option>";
        }
    }

Below is the image of the form. The problem occurring here is that the first student selected, his standard, is only getting populated in all other students' standards, as shown below. The requirement is that for each different student, their standard should only get populated in their corresponding Standard drop-down.

Below is the form 

<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\jui\DatePicker;
use wbraganca\dynamicform\DynamicFormWidget;
use app\models\Ascassignment;
use app\models\Asccenter;
use app\models\Academicyear;
use kartik\time\TimePicker;
use yii\helpers\ArrayHelper;
use app\models\Student;
?>
<script>
$(document).ready(function() {
$(".i").each(function(k,v){
$(".i").attr("disabled","true");
});
});

$(document).ready(function(){
  //When the user clicks on plus button
  
 $(".dynamicform_studentattendance").on("afterInsert", function(e, item) {
	const $i = $(item).find('.i');

   //Populates student names belonging to the selected ASC center
    $.post("index.php?r=student/student-lists&id="+$("select#attendancereport-ascid").val(),function(data){
 				$i.html(data);
					});
	});

	$(".dynamicform_studentattendance").on("afterInsert", function(e, item) {
	const $s = $(item).find('.s');
    
     //Populates standard for the selected student
      $.post("index.php?r=attendancereport/standard&aid="+$("select#attendancereport-academicyearid").val()+"&ascid="+$("select#attendancereport-ascid").val()+"&sid="+$(".s").val(),function(data){
			
        		$s.html(data);
					});
	});
});
</script>

<div class="attendancereport-form">

    <?php $form = ActiveForm::begin(['id' => 'dynamic-form',  'options' => ['class' => 'disable-submit-buttons'],
   ]);?>
 <div class="panel panel-primary " >
<div class="panel panel-heading"><font size="3"><b>Student Attendance Report</b></font></div>
<div class="row">
<div class="col-sm-4">

   <?=	$form->field($model, 'AcademicYearId')->dropDownList(ArrayHelper::map(Academicyear::find()->where(['DisplayStatus'=>'Enabled'])->all(),'Id','academicyear'), ['prompt' => 'Select Academic Year'])?>

	</div>

<div class="col-sm-4">

  <?= $form->field($model, 'ASCId')->dropDownList(ArrayHelper::map(Asccenter::find()->leftJoin('ascassignment','`ascassignment`.`ASCId`=`asccenter`.`ASCId`')->where(['ascassignment.UserId' => \Yii::$app->user->identity->getonlyid()])->all(),'ASCId','ASCName'), ['prompt' => 'Select ASC Center','class'=>'form-control ascid','onChange' => '


	$.post("index.php?r=student/student-lists&id=' . '"+$(this).val(),function(data){
					 $(".i").each(function(k,v)
					{
						$(".i").attr("disabled",false);
						 $(".i").html(data);  // Populates the Student control having class .i with the data from the StudentList function
					}
					);
					});
					'
]) ?>
</div>

<div class="col-sm-4">
   <?= $form->field($model, 'DateofReport')->widget(DatePicker::classname(), [
											//'language' => 'ru',
											'dateFormat' => 'yyyy-MM-dd',
											'options' => ['class' => 'form-control picker','readOnly'=>'readOnly'],
											'clientOptions'=>['changeMonth'=>false,
											'changeYear'=>false,
											'maxDate'=>'today',
											 'stepMonths'=> false,
											],

]) ?>
</div>
</div>
</div>
<div class="panel panel-primary">
		<div class="panel-heading"><font size="3"><b>Student Attendance Details</b></font></div>
<?php DynamicFormWidget::begin([
		'widgetContainer' => 'dynamicform_studentattendance',
		'widgetBody' => '.container-studentattendance',
		'widgetItem' => '.studentattendance-item',
		'limit' =>500,
		'min' => 1,
		'insertButton' => '.add-studentattendance',
		'deleteButton' => '.remove-studentattendance',
		'model' => $modelsStudentattendance[0],
		'formId' => 'dynamic-form',
		'formFields' => [
			'StudentId',
			'Standard',
			'AttendanceStatus',
		],
	]); ?>
	<table class="table table-bordered">
		<thead>
			<tr bgcolor='#B8B8B8'>
			<th style='border: 1px solid black;'></th>
			   <th class ="text-center" style='border: 1px solid black;'>Student</th>
				<th class ="text-center" style='border: 1px solid black;'>Standard</th>
				<th class ="text-center" style='border: 1px solid black;'>Attendance Status</th>
				<th class="text-center" style='border: 1px solid black;'>Action</th>
			</tr>
		</thead>
		<tbody class="container-studentattendance">
		<?php foreach ($modelsStudentattendance as $indexStudent => $modelStudentattendance): ?>
			<tr class="studentattendance-item">
				<td class="vcenter" style='border: 1px solid black;'>
					<?php
						// necessary for update action.
						if (! $modelStudentattendance->isNewRecord) {
							echo Html::activeHiddenInput($modelStudentattendance, "[{$indexStudent}]AttendanceReportDetailsId");
						}
					?>
					</td>
					<td style='border: 1px solid black;'>


				 <?= $form->field($modelStudentattendance, "[{$indexStudent}]StudentId")->label(false)->dropDownList(ArrayHelper::map(Student::find()->all(),'StudentId','StudentName'), ['prompt' => 'Select Student','class'=>'form-control i','onChange'=>'
			$.post("index.php?r=attendancereport/standard&aid=' . '"+$("select#attendancereport-academicyearid").val()+"&ascid=' . '"+$("select#attendancereport-ascid").val()+"&sid=' . '"+$(".i").val(),function(data){

                        $(".s").each(function(k,v)
						{
						 $(".s").html(data); //Populates the Standard drop-down having class .s with the data from the Standard function
						}
						);
                    });

	']) ?>
				</td>

				<td style='border: 1px solid black;'>

						<?= $form->field($modelStudentattendance, "[{$indexStudent}]Standard")->label(false)->dropDownList([], ['prompt'=>'Select Standard','class'=>'form-control s']) ?>

				</td>

				<td style='border: 1px solid black;'>


				 <?= $form->field($modelStudentattendance, "[{$indexStudent}]AttendanceStatus")->label(false)->dropDownList(['Present'=>'Present', 'Absent' => 'Absent'], ['prompt'=>'Select Attendance Status'])?>
				</td>

				<td class="text-center vcenter" style='border: 1px solid black;'>
				<button type="button" class="add-studentattendance btn btn-success btn-xs"><span class="fa fa-plus"></span></button>
					<button type="button" class="remove-studentattendance btn btn-danger btn-xs"><span class="fa fa-minus"></span></button>
				</td>
			</tr>
		 <?php endforeach; ?>
		</tbody>
	</table>
	<?php DynamicFormWidget::end(); ?>

</div>
    <div class="form-group">
       <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
		 <?= Html::resetButton('Reset',['class' => 'btn btn-default'])?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

When I try to open a Bootstrap 5 Modal I get the following error in console:

vendor.bundle.base.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at On._initializeBackDrop (vendor.bundle.base.js:9:52555)
    at new On (vendor.bundle.base.js:9:51462)
    at On.getOrCreateInstance (vendor.bundle.base.js:9:7913)
    at HTMLAnchorElement.<anonymous> (vendor.bundle.base.js:9:55451)
    at HTMLDocument.n (vendor.bundle.base.js:9:4238)

Here is the link to open the modal:

<li class="nav-item"> <a class="nav-link" data-bs-toggle="modal" data-bs-target="#websettingsModal" href="#"><?php echo lang('WEBSITE_SETTINGS'); ?></a></li>

And the modal itself:

<div class="modal fade" id="websettingsModal" tabindex="-1" aria-labelledby="websettings" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="websettings">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

If anyone could help that would be great.

Thanks,

Dan

I don't want to use type="number" on the inputs but would rather use a javascript function that would return either true or false when submitting the form with onsubmit= "return function()".

This way I can put up an alert & display the field in error & it won't change the look of the page. The problem is I can't figure out how to use the elements of the array in the commands needed to test them.  

I can figure out how to check them for numeric values individually but at this point I just need to figure out how I can use the elements of the array in the command :    documet.form_name.input_name.value  so I can check them all. 

Here's a temporary code:

<html>
<head> 
 </head>
<body>
<script>
const arrayone= ["it_c","it_h","ot_c","ot_h."];
function hasNumericValue(arr) { // check for numeric values posted in the array of the input fields
var linker;
var items;
  for (let i = 0; i < arr.length; i++) {
items=arr[i];
linker="document.tester."+items+".value";
alert("you made it to step2"+ linker)
    if (linker == 10) {
      alert("it works true");
      return true;
    }
  }
  alert("it doesn't worlk False");
  return false;
}
</script>
<form name="tester" method="post" action="" onsubmit="return hasNumericValue(arrayone);" >
<input name="it_c" type="text" value="">  <br> 
<input name="it_h" type="text" value=""> <br> 
<input name="ot_c" type="text" value=""> <br> 
<input name="ot_h" type="text" value=""> <br> 
<input type="submit" value="submit">
</form>
</body>
</html>

I am uploading multiple files and moving files to folder  all files are moving but in inspect page hidden sell_document filed show only one file name if i try to save in data base all files are saving with same name

can you help me all files name  get and  show in inspect page if it is show in inspect page i can save backend easily

It feels like such a standard thing to want to do but my research is saying that it is not possible.

An example is:

In my application, i hit an API and display stuff on the page.  I just want to hit the api externally and update stuff on the page.  I know i can use polling, but i have always turned my nose up at that - feels very brute force.

Any pointers here would be lovely.

Thanks All

I have started fiddling with MERN stack as i was looking for something to progress my knowledge.  It has all been raw PHP and i fancied expanding my horizens.

I know that this is a PHP forum, but i love the users on here so i am hoping that there is sympathy for me posting here (hope that this post is in the most appropriate channel)

I am making a controller where i will write all of my api endpoints.

My question is about best practices.

Should i be writing the following where i break down what is being passed in:

 const {first_name, last_name, email, password, isAdmin} = req.body;
    const user = new User({
        first_name,
        last_name,
        email,
        password,
        isAdmin
    });

or should i just accept whatever is passed in, like this

const user = req.body;
    const newUser = new User(user);

This is my first project so i really am finding my feet.

For clarity, this would be an add user function

export const addUser = async (req, res) =>{
    const user = req.body;
    const newUser = new User(user);
}

As always, i appreciate youre responses.

I have a few instances for redirecting to another webpage with a click.

Then I got to thinking (always leads to trouble), is there a difference or benefit between using:

1) a plain old HTML<a>

2)window.location in the <> tags 

3) creating a JavaScript listener

I want to show an alert or confirmation when somebody click on "delete" button.  There are many examples on line and I have read at least 10 posts on some exchange website which sadly has never worked for me (those of you who are old users of internet probably remember a stupid website called expertvillage.  This expertexchange sites must be related).

The code is pretty straight forward and it actually generate a confirm alert but no matter which option the viewer clicks it goes ahead and deletes (send the viewer to a page that deletes).  Just as if there was no confirmation alert at all.

I do not know JS and frankly never liked it, but I think it not working has more to do than just me not liking the language.

Here is a code, any idea or suggestions is highly appreciated:

<form action=deletetest.php method=POST>

<input type=submit value=\"Delete records\" onclick=\"ConfirmDelete()\">

</form>

<script>

function ConfirmDelete()

    {

    return confirm("Are you sure you want to delete?");

    }

</script>

I have a simple form which contain a drop down menu for quantity.

After quantity is selected a script does a cost calculation and value is shown.  However the user should not be able to proceed without selecting quantity.  I am getting all sorts of illogical outcomes after each change or correction I make.

Initially the validation would just ignore the Quantity and check the second item.

Then after some changes to the code, now it keeps asking for Quantity even after the user has selected from the list.

Here is the code, do you see any errors?  Thanks in advance.

print "<script>
function validateForm()
    {
    let xss = document.forms[\"frmCustomize\"][\"SQty\"].value;
    if (xss == \"0\")
        {
        alert(\"Please select quantity\");
        return false;
        }    
    var fffnnn = document.forms[\"frmCustomize\"][\"CCnumber\"].value;
    if (fffnnn == null || fffnnn == \"\")
        {
        alert(\"Please enter your card number.\");
        return false;
        }

</script>";

the form :

print "<form action=M1.php method=POST id=C4 onsubmit=\"return validateForm()\" name=frmCustomize>";

// **************** QUANTITY *******************
print "<tr><td valign=top><b>Quantity:</td>

<td valign=top>
<select name=SQty id=SQty onchange=\"CalculateTotal()\">
<option value=0>Please select quantity</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option></select></td></tr>";

Regards

Emmanuel Katto

    $result='Osucess'
echo $result;

i have this jquery ajax:

 	$("#add_sub").submit(function (e) { 
		e.preventDefault();
		var formDatax = new FormData($('#add_sub')[0]); 
$.ajax({
				type: "POST",
				url: 'answers.php',
				data:  formDatax,

			    //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false,
			success: function(data){

				
				if(data.charAt(0) ==="O"){
					alert(data);
					
				}else{
					alert("failed");				}
				
			}	
				
		});
});

but it does not work at all.what is the problem??

<div id="mydiv">
  radio buttons 
 </div>
<div id="div2">
  form populates here
 </div>

<script>
  //listen for a radio to be clicked and then display the appropriate form in div2  
 if(radio1){ document.getElementById("div2").innerHTML = blah blah blah   
 if(radio2){  
document.getElementById("div2").innerHTML = blah blah blah   
etc.

Now I want to listen for a change in any input on the form to trigger a response.

However, I am having difficult accessing the form inputs.

document.getElementById("name").addEventListener("click", displayDate);
function displayDate() {
alert('Hurray');
}

//does not work and essentially disables the JavaScript that follows

I managed to gain success with

document.getElementById("div2").addEventListener("click", displayDate);

But this triggers the associated function with any click at any location in the div.

How can I "drill down" to the specific inputs inside the form?

how can i display the latex well for this page dynamically generated.

<div class="que_text">1. how \(\underline{decent}\).ike.</div><div class="que_ans">what<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							<button class="Edit_ans">Edit answer</button></form>
                  			<form id="aQue1" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
						
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer><div class="que_text">2. John \(\underline{refused}\) that she had stolen his friend's money.</div><div class="que_ans">say<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							
							<button class="Edit_ans">Edit answer</button></form>	<form id="aQue2" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
							
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer>

<div class="que_text">1. how ...............ike.</div><div class="que_ans">what<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							<button class="Edit_ans">Edit answer</button></form>
                  			<form id="aQue1" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
						
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer><div class="que_text">2. John......that she had stolen his friend's money.</div><div class="que_ans">say<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							
							<button class="Edit_ans">Edit answer</button></form>	<form id="aQue2" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
							
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer>

And i try to post to php as:

	$("button.Add_ans").click(function (e){
		e.preventDefault();
		
        var formData =  $(this).closest('form').serialize();
        
        // Loads the event data from the DB
        	$.ajax({
				type: "POST",
				url:'/Addanswer.php',
				data: formData,
			    dataType: 'json',
			    cache:false,
			    //encode:true,
			success: function(response){
				//console.log(JSON.stringify(response));

				// Alert event data for now
				alert(response);
					});
	                   
				}
			});


    });

My problem is that when i have more than 4 questions the ajax fails to work especially after the 5th question on page. what is wrong here because i xpect to have more than 50 questions

Essentially, I have a webpage with several DIVs and I want the div that is in FOCUS to change color and thereby become highlighted.

Additionally, I would want other DiVs to return to their original color (probably white) at the same occurrence.

Using ONBLUR seemed "old school", so in the name of progress, I've created my problem. LOL

Using this code

const divs = document.querySelectorAll('div');

divs.forEach(e => {
  e.addEventListener('click', (e) => {
  
    // remove the class from the others
    divs.forEach(d => d.classList.remove('active'));
    
    // add the class to the current one
    e.target.classList.add('active');
  });
})

with correlating CSS to change the DIV background color has its own issues (as it seems to be working on <h1> and <h2>inside the div, but not the full div itself).

Things began to work when I added

document.getElementById(e.target.id).style.background = "blue";

to replace the ACTIVE class..

My questions:

How can I "see" the variable d value?

I've tried lots of alterations and cannot see its value, ID, etc. (Mostly the script FAILS at that point when I try to "see" d.)

My assumption is that knowing d will allow me to make further adjustments (to clear the background onblur [thus, a different focus]).

Also, I want to clear all DIVs of the highlight with a click on a non-DIV element.

Any helpful info or explanations are appreciated.

I adapted a "javascript game code" from tutorial https://spicyyoghurt.com/tutorials/html5-javascript-game-development/create-a-smooth-canvas-animation in my codepen : 

https://codepen.io/eaglehopes/pen/MWMgvjm

My problem was I could not properly restart the animation(i.e. gameloop) where it begins! I am using "R" key from keyboard to restart the amination, but every time I restart, not the positions but the initial velocities of the objects changes so code become undeterministic - changine each time with the same input. 

Can anybody say that where am I doing wrong again? 

Thanks.

I have 1 problem and need help:

Articles in the default Sngine blog do not have cover images (Attach file 1)

I want to use the article image as the cover image

or

Mandatory Force users to upload images when posting (because upload does not have a mandatory function) (Attach file 2)

Can you help me?

I am so grateful to you!!

__feeds_article.tpl.txt blogs.tpl.txt blogs-upload.txt

The retrieving data is 100% working, but it reflects in the select options only in the first request, then when I try to reselect another date I receive the below console error, and choices still keep the initial retrieved data
choices.min.js:11   Trying to initialise Choices on element already initialised

Choices setValue Function

var el = document.getElementsByClassName("table_number")[0];
if (el) {
  function setChoices(values) {
    const tableNumbers = new Choices(el, {
      removeItemButton: true,
    }).setValue(values);
  }
  setChoices(values);
}

Ajax Code

let shiftDate = document.getElementById('reservation_shift_date');
      shiftDate.addEventListener("change", function(){
          let request = new XMLHttpRequest();
          request.open("POST","get_tables.php",true);
          request.setRequestHeader("content-type","application/x-www-form-urlencoded");
          request.onreadystatechange = function(){
              if(request.readyState == 4 && request.status == 200){
                  setChoices(JSON.parse(request.responseText));
              }
          }
          request.send("date="+shiftDate.value);
      });

get_tables.php  

if($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['date'])){

  $stmt = $conn->prepare("SELECT table_id FROM reservation WHERE shift_date = ?");
  $stmt->execute([$_POST['date']]);
  $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
  foreach($rows as $row){
    $reserved_tables_id[] = $row['table_id'];
  }

  $in = implode(',',$reserved_tables_id);

  $execute_query = mysqli_query($dbConnection,"SELECT id, table_name FROM tables WHERE id NOT IN ($in)");

  while($row = mysqli_fetch_assoc($execute_query)){
    $tbl_id = $row['id'];
    $tbl_name = $row['table_name'];
    $arr[] = ["value"=>$tbl_id,"label"=>$tbl_name];
  }
  echo json_encode($arr);
}

I have an index.html and script.js. I have included script.js in index.html.

I am building a countdown timer. The script.js has values like

  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

How do I call days, hours, minutes etc to the index.html separately so that I can style the countdown timer?

Say

<div class="red">days</div>    <div class="green">hours</div> ...  etc

Thanks