Get Javascript Array to Submit to the Database

makamo66 · April 20, 2021, 1:30pm

<?php 
$user_id = 1;
?>
<br />

<?php echo $this->Form->create($mealplan); ?>

<div id="draggables_box">
 
<p>Click to show the tiles and then click again to hide them. Drag the tiles to the right side to create your menu. </p>
<div style="float:right; margin-right: 6px;"><a href="javascript:location.reload(true)">RESET</a></div>	


<table style="border: none" width="100%">

<tr>
<?php for ($i = 1; $i <= 4; $i++) {

echo "<td><div id='clickMe" . $i .  "' class='tile_button'>" . $i . "00 cal tiles</div></td>";
}
?>

</tr>
<tr>
<?php for ($i = 5; $i <= 8; $i++) {
echo "<td><div id='clickMe" . $i .  "' class='tile_button'>" . $i . "00 cal tiles</div></td>";
}
?>
</tr>
</table>

<?php for ($i = 1; $i <= 8; $i++) {
echo "<div id='showMe" . $i .  "' style='display: none'>";
?>

<?php 
foreach ($tiles as $tile):

if ($user_id ==  $tile->user_id){
if ( $i == $tile->cat_id ) {
?>
<!-- begin of draggable div-->
<div id="draggable<?php echo $tile->id; ?>" class="draggable_meal draggable ui-widget-content item">
<div class="calorie_icon"> <?= $tile->cals_per_serving; ?> CALS</div>


<span><?php echo $tile->short_description; ?></span>
<?php 

echo $this->Form->hidden('cals_per_serving'. $tile->id, [
    'id' => 'cals_per_serving'. $tile->id,
	'multiple' => 'true',
    'value' => $tile->cals_per_serving,
]);

?>

</div><!-- end of draggable div-->
<?php
} //end if
} //end if
endforeach;

?>
</div><!-- end of showMe div-->
<?php
} //end for
echo $this->Form->control('draggables[]', [
'id' => 'draggable3',
'multiple' => 'true',
'value' => 'draggable3',
'label' => ''
	
]);
echo $this->Form->control('draggables[]', [
'id' => 'draggable4',
'multiple' => 'true',
'value' => 'draggable4',
'label' => ''
]);

?>

<br style="clear: both;" />
</div><!-- end div for draggables_box -->

<div id="droppable_box" class="droppable ui-widget-header">
<b>Total Calories:&nbsp;&nbsp;<div name="response" id="response"></div></b>

<p>Drag the meal tiles over here.</p>

</div><!--end div for droppable_box -->


<br style="clear: both;" />

<div style="margin: 0px auto; width: 622px;">

<p><b style="color: red;">  <?= $this->Flash->render() ?></b></p>

<br style="clear: both;" />



<?php
echo $this->Form->button('Submit Form', ['id'=>'myId']);

echo $this->Form->end(); 
?>

<br />
</div>

makamo66 · April 20, 2021, 1:31pm

I didn’t include the javascript.

makamo66 · April 20, 2021, 3:25pm

user_id and draggables are fields in the database. cals_per_serving is not a field.

makamo66 · April 20, 2021, 3:34pm

I tried using the code that I had baked at one point and inserted the baked action/function in the controller but the form didn’t submit with the baked code either.

makamo66 · April 20, 2021, 3:50pm

I used a baked add.php as my form and added the draggables text input and the form still stays on the same page when the submit button is clicked.

makamo66 · April 20, 2021, 3:54pm

Here is the baked form with the addition of draggables text inputs. It doesn’t work any better than the form I had created. It stays on the same page when the submit button is clicked.

<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Mealplan $mealplan
 */
?>
<div class="row">
    <aside class="column">
        <div class="side-nav">
            <h4 class="heading"><?= __('Actions') ?></h4>
            <?= $this->Html->link(__('List Mealplans'), ['action' => 'index'], ['class' => 'side-nav-item']) ?>
        </div>
    </aside>
    <div class="column-responsive column-80">
        <div class="mealplans form content">
            <?= $this->Form->create($mealplan) ?>
            <fieldset>
                <legend><?= __('Add Mealplan') ?></legend>
                <?php
                    echo $this->Form->control('user_id', ['options' => $users, 'empty' => true]);

                    echo $this->Form->control('event_name');?>
					
     <?php echo $this->Form->control('event_date', ['id' => 'MealplanEventDate']); ?>

                   <?php  echo $this->Form->control('end_date');
                ?>
				
				<?php
echo $this->Form->control('draggables[]', [
    'id' => 'draggable3',
	'multiple' => 'true',
    'value' => 'draggable3',
	'label' => ''
	
]);

echo $this->Form->control('draggables[]', [
    'id' => 'draggable4',
	'multiple' => 'true',
    'value' => 'draggable4',
	'label' => ''
]);

?>
            </fieldset>
            <?= $this->Form->button(__('Submit')) ?>
            <?= $this->Form->end() ?>
        </div>
    </div>
</div>

makamo66 · April 20, 2021, 4:00pm

I keep refreshing my page but the form inputs don’t get reset to null. The text that I entered in the text inputs remains there even after I do a hard-reload with CTRL + SHIFT + R.

Zuluru · April 20, 2021, 4:07pm

And what does your add function in your controller look like?

makamo66 · April 20, 2021, 4:10pm

I am using the baked add function so it looks like this:

 public function add()
    {
        $mealplan = $this->Mealplans->newEmptyEntity();
        if ($this->request->is('post')) {
            $mealplan = $this->Mealplans->patchEntity($mealplan, $this->request->getData());
            if ($this->Mealplans->save($mealplan)) {
                $this->Flash->success(__('The mealplan has been saved.'));

                return $this->redirect(['action' => 'index']);
            }
            $this->Flash->error(__('The mealplan could not be saved. Please, try again.'));
        }
        $users = $this->Mealplans->Users->find('list', ['limit' => 200]);
        $this->set(compact('mealplan', 'users'));
    }

makamo66 · April 20, 2021, 4:10pm

Both my template and the add function in my controller are baked versions now.

makamo66 · April 20, 2021, 4:22pm

I changed the entire controller to the baked version instead of just the one add function and the form still stays on the same page when the submit button is clicked.

dirk · April 20, 2021, 4:44pm

As far as i understand, you want to add a mealplan with some tiles.
Each tile represents a amount of calories.

I will give you a simple example, with nearly no javascript, which you can use for testing in a clean, new example project:
The tiles are selected via checkboxes and upon clicking “submit” it displays which tiles were selected. maybe it is useful for you to get a start.

If you want to use it, please create a new mysql database and connect your new project with this database

The example tables you will need are as follows
you need 4 tables:
1) users

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

CREATE TABLE users (
id int(11) NOT NULL,
forename varchar(255) NOT NULL,
surname varchar(255) NOT NULL,
email varchar(190) NOT NULL,
password varchar(255) NOT NULL,
userrole_id int(11) NOT NULL,
authtoken varchar(255) DEFAULT NULL,
resettoken varchar(255) DEFAULT NULL,
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
modified timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO users (id, forename, surname, email, password, userrole_id, authtoken, resettoken, created, modified) VALUES
(1, ‘Gobo’, ‘Fraggle’, ‘gobo@fraggle.rock’, ‘supersecretsquirrel’, 3, ‘’, ‘’, ‘2021-04-11 06:19:31’, ‘2021-04-11 06:19:31’),
(2, ‘Red’, ‘Fraggle’, ‘red@fraggle.rock’, ‘secretsquirrel’, 2, ‘’, ‘’, ‘2021-04-11 06:21:07’, ‘2021-04-11 06:21:07’),
(3, ‘Wembley’, ‘Fraggle’, ‘wembley@fraggle.rock’, ‘squirrel’, 1, ‘’, ‘’, ‘2021-04-11 06:21:47’, ‘2021-04-11 06:21:47’);

ALTER TABLE users
ADD PRIMARY KEY (id);

ALTER TABLE users
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

2) userroles

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

CREATE TABLE userroles (
id int(11) NOT NULL,
name varchar(190) NOT NULL,
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
modified timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO userroles (id, name, created, modified) VALUES
(1, ‘User’, ‘2021-04-11 05:55:27’, ‘2021-04-11 05:55:27’),
(2, ‘Editor’, ‘2021-04-11 05:55:33’, ‘2021-04-11 05:55:33’),
(3, ‘Administrator’, ‘2021-04-11 05:55:42’, ‘2021-04-11 05:55:42’);

ALTER TABLE userroles
ADD PRIMARY KEY (id),
ADD UNIQUE KEY name (name);

ALTER TABLE userroles
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

3) tiles

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

CREATE TABLE tiles (
id int(11) NOT NULL,
name varchar(190) NOT NULL,
short_description text,
cals_per_serving int(11) NOT NULL,
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
modified timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO tiles (id, name, short_description, cals_per_serving, created, modified) VALUES
(1, ‘100 calories tile’, ‘’, 100, ‘2021-04-11 06:12:19’, ‘2021-04-20 15:40:47’),
(2, ‘200 calories tile’, ‘’, 200, ‘2021-04-11 06:12:38’, ‘2021-04-20 15:40:39’),
(3, ‘300 calories tile’, ‘’, 300, ‘2021-04-11 06:13:03’, ‘2021-04-20 15:40:27’),
(4, ‘400 calories tile’, ‘’, 400, ‘2021-04-11 06:13:21’, ‘2021-04-20 15:40:06’),
(5, ‘500 calories tile’, ‘’, 500, ‘2021-04-11 06:13:39’, ‘2021-04-20 15:39:55’),
(6, ‘600 calories tile’, ‘’, 600, ‘2021-04-20 15:41:01’, ‘2021-04-20 15:41:46’),
(7, ‘700 calories tile’, ‘’, 700, ‘2021-04-20 15:41:20’, ‘2021-04-20 15:41:20’),
(8, ‘800 calories tile’, ‘’, 800, ‘2021-04-20 15:41:37’, ‘2021-04-20 15:41:37’);

ALTER TABLE tiles
ADD PRIMARY KEY (id),
ADD UNIQUE KEY name (name);

ALTER TABLE tiles
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

4) mealplans_tiles

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

CREATE TABLE mealplans_tiles (
id int(11) NOT NULL,
mealplan_id int(11) NOT NULL,
tile_id int(11) NOT NULL,
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
modified timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO mealplans_tiles (id, mealplan_id, tile_id, created, modified) VALUES
(1, 2, 1, ‘2021-04-13 03:50:45’, ‘2021-04-13 03:50:45’);

ALTER TABLE mealplans_tiles
ADD PRIMARY KEY (id);

ALTER TABLE mealplans_tiles
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

After creating the tables, please do “bake all” for all the tables.

Then open the file

/templates/mealplans/add

and replace the whole content with:

> <?php
> /**
>  * @var \App\View\AppView $this
>  * @var \App\Model\Entity\Mealplan $mealplan
>  */
> ?>
> <div class="row">
>     <aside class="column">
>         <div class="side-nav">
>             <h4 class="heading"><?= __('Actions') ?></h4>
>             <?= $this->Html->link(__('List Mealplans'), ['action' => 'index'], ['class' => 'side-nav-item']) ?>
>         </div>
>     </aside>
>     <div class="column-responsive column-80">
>         <div class="mealplans form content">
>             <?= $this->Form->create($mealplan) ?>
>             <fieldset>
>                 <legend><?= __('Add Mealplan') ?></legend>
>                 <?php
>                     echo $this->Form->control('name');
>                     echo $this->Form->control('user_id', ['options' => $users]);
>                     //echo $this->Form->control('tiles._ids', ['options' => $tiles]); //=> this line was baked by cakephp
>                     echo $this->Form->select('tiles._ids',$tiles, ['multiple'=>'checkbox','name'=>'myCheckbox']); //==> this line replace the line before
>                 ?>
>             </fieldset>
>             <?php
>               //echo $this->Form->button(__('Submit'));  // => this line was baked by cakephp
>               echo $this->Form->button(__('Submit'),['onclick'=>'alert("You selected the tiles with id: "+getCheckedCheckboxesFor("myCheckbox[]"));']); //=> this line replaces the line before
>             ?>
>             <?= $this->Form->end() ?>
>         </div>
>     </div>
> </div>
> 
> <script type="text/javascript">
> function getCheckedCheckboxesFor(checkboxName) {
>     var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
>     Array.prototype.forEach.call(checkboxes, function(el) {
>         values.push(el.value);
>     });
>     return values;
> }
> </script>

then go to http://whateverhost/mealplans/add
it should look something like this:

Zuluru · April 20, 2021, 6:24pm

This can mean one of two things.

A) It is posting the data but something is preventing it from saving, and it’s coming back to the Add page. It should show an error message in this case; if it’s not, then maybe your layout is broken and not showing Flash messages?

B) Something (JavaScript, most likely, but could also be built-in browser validation of required fields) is preventing it from submitting the data at all.

The solutions to these two things are quite different. Can you tell which one it is?

makamo66 · April 20, 2021, 7:05pm

It shows the error: “The mealplan could not be saved. Please, try again.” after I click on the submit button. The only javascript script on the page is the built-in debug kit:
<script id="__debug_kit" data-id="2db6087b-0cc5-4979-a9d2-ad55fad60adb" data-url="http://localhost/" src="/debug_kit/js/toolbar.js?1618654153"></script>

makamo66 · April 20, 2021, 7:14pm

The javascript debug kit is there when I remove the square brackets and the page submits to a new page too so it can’t be the javascript that is stopping it.

dirk · April 20, 2021, 7:17pm

in the lower toolbar is a link to „variables“. can you click on it and then there should be a variable „errors“ filled with a message

makamo66 · April 20, 2021, 7:25pm

I get the following error:

[
'mealplan' => [
'draggables' => [
'scalar' => 'The provided value is invalid',
'maxLength' => 'The provided value is invalid',
],
],
]

In MealplansTable.php it is set as follows:

public function validationDefault(Validator $validator): Validator
    {

        $validator
            ->scalar('draggables')
            ->maxLength('draggables', 255)
            ->allowEmptyString('draggables');

makamo66 · April 20, 2021, 8:02pm

I changed MealplansTable.php to the following and emptied the cache but nothing changed

        $validator
            //->scalar('draggables')
	     ->isArray('draggables')
             ->maxLength('draggables', 255)
	     ->allowEmptyArray('draggables');
            //->allowEmptyString('draggables');

Zuluru · April 20, 2021, 8:03pm

This is super helpful information. Could have saved everyone a ton of bother including this earlier.

makamo66 · April 20, 2021, 8:29pm

In addition to the earlier changes, I commented out //->maxLength('draggables', 255) in the $validator and I’m happy to say that the form now submits.

Topic		Replies	Views
Trying to save a javascript cookie to the database Need Help	3	275	April 21, 2021
Sava localstorage data Need Help	16	1785	January 10, 2020
Update Input Options with Javascript Need Help	4	446	May 6, 2021
[SOLVED] Error : cannot convert value of type `array` to string Need Help	8	9681	December 30, 2018
Saving an array to database as string Need Help	1	677	May 10, 2021

Get Javascript Array to Submit to the Database

Releases

Documentation

Community

Get Javascript Array to Submit to the Database

Related topics

Releases

Documentation

Community