Chekboxgroup with data-iterator in form

[wouldbenerd]

Hi there,

I’m still pretty new. And I thought I was beginning to ‘get’ things. But this one has got me stumped.

I am trying to concatenate the displayed text of the checkbox in a form checkbox group. not sure why the [object Object] ends up in between the code and the name. This also happens for the id. but then in between the code and the $index. I also can’t seem to manage to set the value of these checkboxes.

I am also not sure why the data is not appearing inside my form submit action. Am i supposed to give the same name to all the checkboxes?

Also not sure how to set the value dynamically to the code of the object and the array.

My code view in yammer looks like this.

					<form id="id_register" method="post" is="dmx-api-form" post-data="json" action="register/user_application/admin/" class="record_form"
						dmx-on:success="login_modal.hide();post_record_success.show();register_modal.hide();register_modal.id_register.reset()" dmx-on:submit="id_password2.setValue(&quot;&quot;)">

						<input id="id_firstname" name="firstname" class="form-control" placeholder="firstname" required="" maxlength="60">
						<input id="id_lastname" name="lastname" class="form-control" placeholder="lastname" required="" maxlength="60">
						<input id="id_email" name="username" type="email" class="form-control" placeholder="Username/Email" required="" maxlength="60">
						<input id="id_password3" name="password" type="password" class="form-control" placeholder="Password" required="" maxlength="60" data-rule-equalto="password2" data-msg-equalto="Please enter the same password again.">

						<input id="id_password2" name="password2" type="password" class="form-control" placeholder="Password" required="" maxlength="60">


						<div class="form-group row" id="id_companies_group" is="dmx-checkbox-group" name="companies">
							<div class="col col-sm">
								<legend class="col-form-label">Companies</legend>
							</div>

							<div class="col col-sm-12" is="dmx-data-iterator" id="code" dmx-bind:data="get_companies.data" dmx-repeat="get_companies.data">
								<div class="custom-control custom-checkbox">
									<input class="custom-control-input" name="companies" type="checkbox" dmx-bind:id="code + $index">
									<label class="custom-control-label" dmx-bind:for="code + $index" dmx-text="code + ' - ' + name"></label>
								</div>
							</div>
						</div>
					</form>

get _companies.data consists of an array of objects that contains the fields: _id, code, name, etc

This is what it looks like in my App structure

[wouldbenerd]

I go this to work in the end by redoing it a bunsh of times. See end result of checkboxes code below. But I cannot submit, it gives an error

I am trying to populate an array by setting the name of each checkbox to companies[] this seems to be causing the error on form submit.

						<div class="form-group" id="input1_group" is="dmx-checkbox-group">
							<legend class="col-sm-2 col-form-label">Companies</legend>
							<div class="row" dmx-repeat="get_companies.data" is="dmx-data-iterator" id="iterator1" dmx-bind:data="get_companies.data">
								<div class="col">
									<div class="form-check">
										<input class="form-check-input" type="checkbox" dmx-bind:value="name" dmx-bind:id="'cp_comp' + $index" name="companies[]">
										<label class="form-check-label" dmx-bind:for="'cp_comp' + $index" dmx-text="name"></label>
									</div>
								</div>
							</div>
						</div>

[Teodor]

Hello
Can you please explain what are you trying to achieve?
Why are you using the data iterator like that?

[wouldbenerd]

populate form with dynamic list of checkbox options.
submit form with array of strings , each string representing a checked box.

I am submitting to an API with JSON format.

so the submitting JSON body should be something like.

{
   "other_field" : "str_val",
   "companies" : [ "comp 2", "comp 3", "comp 6", ]
}

The ‘companies’ value should be the result of the checkboxes

[Teodor]

Ok, but then why are you using the iterator and not a repeat region, which repeats your dynamic checkboxes?
The iterator is used when you have many records and want to iterate through them in cases like:

Loop Through Database Records with the Data Iterator Component

[wouldbenerd]

Thanks, I’ll try it.
I am still learning.
It just made sense to me like this.

[wouldbenerd]

like this then?

The checkboxes are rendering as they should.
But when i submit the form I am still getting the.
checkbox is not defined -- dmxAppConnect.js7 error.

Is this How it should be?

<div class="form-group" id="input1_group" is="dmx-checkbox-group">
	<legend class="col-sm-2 col-form-label">Companies</legend>
	<div class="row">
		<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="get_companies.data" key="code">
			<div class="col">
				<div class="form-check">
					<input class="form-check-input" type="checkbox" dmx-bind:value="code" dmx-bind:id="'cp_comp' + $index" name="companies[]">
					<label class="form-check-label" dmx-bind:for="'cp_comp' + $index" dmx-text="name"></label>
				</div>
			</div>
		</div>
	</div>
</div>

[Teodor]

The repeat is now better - you can directly apply it on the row, in order to avoid the additional div around the column, but that shouldn’t affect the functionality.

We are going to check the checkbox error now.

[Teodor]

Seems like a small bug in App Connect. We are going to fix this in this week’s update.

[wouldbenerd]

Thanks for your efforts @Teodor

[Teodor]

This has been fixed in Wappler 2.4.4

[wouldbenerd]

Thanks for the info!