I am creating a Prestashop module, which is basically a multistep modal for reservation, which is sent as an email after submission. The problem is that the last step of the modal needs to be an overview and I can't visualize the user input without submitting and refreshing the page (which closes the modal). I have called the prestashop attributes in the modal, so the user can choose and edit them there.
I am using this https://github.com/ngzhian/multi-step-modal (Progress bar with back buttons). I have 5 steps - the most important ones right now are the one where you choose the attributes - step 4 and the one where you see the overview and send the email - step 5.
If you check out the link, you will see that there are the buttons which navigate the modal steps in the footer. What I have there is this:
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 1)">Back
</button>
<button type="button" class="btn btn-primary step step-1" data-step="1" onclick="sendEvent('#demo-modal-3', 2)">Next
</button>
<button type="button" class="btn btn-primary step step-3" data-step="3" onclick="sendEvent('#demo-modal-3', 2)">Back
</button>
<button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 3)">Next
</button>
<button type="button" class="btn btn-primary step step-4" data-step="4" onclick="sendEvent('#demo-modal-3', 3)">Back
</button>
<button type="button" class="btn btn-primary step step-3" data-step="3" onclick="sendEvent('#demo-modal-3', 4)">Next
</button>
<button type="button" class="btn btn-primary step step-5" data-step="5" onclick="sendEvent('#demo-modal-3', 4)">Back
</button>
<button type="submit" class="btn btn-primary step step-4" data-step="4" onclick="sendEvent('#demo-modal-3', 5)">Next
</button>
<button class="btn btn-primary step step-5" data-step="5" type="submit" name="button_pressed_reservation">Reserve
</button>
</div>
Now when you look at the last "Next" button, you will notice, that it is type="submit". This reloads the page and closes the modal, but the user input is not displayed if the form is not submitted.
What i need to do is submit the modal 2 times without closing it, so I can display the variables that the user has input in the overview. For example in the fifth step of the modal I have the smarty variables displayed like so:
<div id="overview" class="modal-body step-5" data-step="5">
<label>{$adults_reservation}</label>
<br>
<label>{$children_reservation}</label>
<br>
<label>{$customer_message_reservation}</label>
<br>
<label>{$customer_name_reservation}</label>
<br>
<label>{$customer_mail_reservation}</label>
<br>
<label>{$customer_phone_reservation}</label>
<br>
</div>
and after the first submission I need to submit the form again, so that it is sent as an email.
NOTE:
I have called the prestashop attributes in the 4-th step like so:
<div class="modal-body step-4" data-step="4">
<div id="step-4-attributes">
{foreach from=$groups key=id_attribute_group item=group} {if !empty($group.attributes)}
<div class="clearfix product-variants-item">
<span class="control-label">{$group.name}</span> {if $group.group_type == 'select'}
<select class="form-control form-control-select" id="group_{$id_attribute_group}" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute}" title="{$group_attribute.name}" {if $group_attribute.selected} selected="selected" {/if}>{$group_attribute.name}</option>
{/foreach}
</select>
{elseif $group.group_type == 'color'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" {if $group_attribute.selected} checked="checked" {/if}>
<span {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if} {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}><span class="sr-only">{$group_attribute.name}</span></span>
{/foreach}
</ul>
{elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left">
<label>
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" {if $group_attribute.selected} checked="checked" {/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}
</div>
{/if} {/foreach}
</div>
</div>
Related
I've got a Submit button that's used to insert item:
<div class="col-md-12">
<div class="form-body">
<div class="form-group pull-right">
<label for="exampleInputEmail1"> </label> `
<button type="button" id="subbtn" class="btn btn-success margin-t12" ng-click="Submit();">Submit</button> //button
<button type="button" class="btn btn-default margin-t12" ng-click="back();">Cancel</button> </div>
</div>
</div>
Now when I press the Submit button I noticed sometime the item inserted twice with same details. I applied below solution already but the issue not resolved yet.
$('#subbtn').attr("disabled", 'disabled'); //button disable
setTimeout(function () {
$('#subbtn').removeAttr("disabled")
}, 10000);
I'm just wondering what I've overlooked...
I'm currently using bootstrap wizard with progress bar of this template to create a form by steps as:
#model MyProject.ViewModels.Test.TestViewModel
<form asp-controller="Test" asp-action="Create" asp-route-returnurl="#ViewData["ReturnUrl"]" method="post" class="needs-validation" role="form" novalidate>
<div class="container-fluid">
<ul class="twitter-bs-wizard-nav nav nav-pills nav-justified">
<li class="nav-item">
<a href="#progress-station-profile" class="nav-link" data-toggle="tab">
<div class="step-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Station Profile">
<i class="bx bxs-user-detail"></i>
</div>
</a>
</li>
</ul>
<div class="tab-pane" id="progress-station-profile">
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label asp-for="CallLetters" class="form-label"></label>
<input asp-for="CallLetters" class="form-control" required autofocus/>
<div class="invalid-feedback">Call Letters is required.</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label asp-for="Market" class="form-label"></label>
<input asp-for="Market" class="form-control" required autofocus/>
<div class="invalid-feedback">Market is required.</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label asp-for="Format" class="form-label"></label>
<select asp-for="Format" class="form-select" required>
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
<div class="invalid-feedback">Format is required.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label asp-for="Frequency" class="form-label"></label>
<input asp-for="Frequency" class="form-control" autofocus/>
</div>
</div>
</div>
<ul class="pager wizard twitter-bs-wizard-pager-link">
<li class="next">
<a href="javascript: void(0);" class="btn btn-primary">
Next
<i
class="bx bx-chevron-right ms-1">
</i>
</a>
</li>
</ul>
</div>
..///next step etc..
<input type="submit" class="btn btn-primary me-1" value="Save"/>
</form>
As you can see, some of my fields are required, and I want to achieve to validate those fields via client-side validation when the user clicks the "Next" button because it validates at the end of the form (submit button), and the user has no idea what step was wrong. So it will be awesome if I can validate it when the user clicks the next button
UPDATE
I already find a way to show validations as:
//first step
<div class="tab-pane step" id="progress-station-profile">
//fields here
<button onclick="return validate('progress-station-owner')"
class="btn btn-primary">
Next
</button>
</div>
//Step 2
<div class="tab-pane step" id="progress-station-owner">
//fields here
<button onclick="return validate('progress-station-owner')"
class="btn btn-primary">
Next
</button>
</div>
//Step 3
//fields
<button type="submit" class="btn btn-primary me-1"> Save Station</button>
And I use function as:
function validate(step){
let window = document.getElementById(step);
window.querySelectorAll("input,select,textarea").forEach(e=>{
if(!e.checkValidity()){
e.classList.toggle("is-invalid");
event.preventDefault();
event.stopPropagation();
return false;
}
});
return true;
}
So, if I try to click button Next validations don't allow me to continue, that is correct, but now I have a big problem:
If I click Next on the first step it goes to the second step and shows the second step but it tries to execute the "Next" button of the second step automatically, so validations appear once step 2 showed up. Why is it happening?
I have these 2 inputs (buttons)
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
<input *ngIf="isEdit" type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</div>
where if isEdit is false then I want to show the button "Add data" else I want to show the button "Update" but I wonder if there's a way to simplify this a bit more rather than using 2 inputs for each. Thanks in advance!
else capability was added somewhat recently; that's probably why most documentation doesn't have it (yet). But you can write this way:
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit; else update" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
</div>
<ng-template #update>
<input type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</ng-template>
It works; but I don't know how much better it is compared to what you have.
I have two button groups which I want to response to each other. When one button is clicked, another should be clicked to and vice versa but somehow this simple functionality doesn't work as it should, nothing happens when buttons are activated. What's the problem?
<div class="row">
<div class="col-lg-6">
<div class="btn-group">
<button id="pol1" onclick="document.getElementById('chin2').click()" type="button" class="btn btn-primary">Polski</button>
<button id="chin1" onclick="document.getElementById('pol2').click()" type="button" class="btn btn-primary">Chiński</button>
</div>
</div>
<div class="col-lg-6">
<div class="btn-group">
<button id="pol2" onclick="document.getElementById('chin1').click()" type="button" class="btn btn-primary">Polski</button>
<button id="chin2" onclick="document.getElementById('pol1').click()" type="button" class="btn btn-primary">Chiński</button>
</div>
<button type="button" class="btn btn-danger">Przetłumacz</button>
</div>
Actually your Button click is works..
but you put nested click .. and you didnt mentioned anything on that ...
so button click happens twice or sometimes but you dont know...
Here is the Example have some alert for that click ...
<input type="submit" id="byBtn" value="Change1" onclick="document.getElementById('byBtn1').click()"/>
<input type="submit" id="byBtn1" value="Change" onclick="document.getElementById('byBtn').click()"/>
i have the bootstrap-button.js and have this markup, but when i click on the button, it does not toggle it to show that it has been clicked. any tips as to what is missing?
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" data-toggle="button"> 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" data-toggle="button"> 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" data-toggle="button"> Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
second part of the question is how to get the data into javascript as to which button was clicked? if 1Fail was clicked, it should toggle and js code to detect that 1Fail was clicked. Thanks in advance.
The problem seems to be that you added data-toggle="button" to every check button, which is not necessary. Because you already have data-toggle="buttons-checkbox" in the outer div element .
So change it to look like this:
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" > 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" > 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" > Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
EDIT:
Sorry, I didn't notice your second question. When a button is clicked an active class will be added to it, so you can detect this with jQuery's hasClass method.