i am creating web form based on given Doctype but the web form did not add Buttons so i wrote custom script as following script add the required button when executed from Browser Console as in the picture
<div class="row form-section visible-section" data-fieldname="proposals_donor_section"><div class="section-head">
Proposal's Donor
<span class="ml-2 collapse-indicator mb-1" style="display: none;"></span>
</div><div class="section-body"><div class="form-column col-sm-12" data-fieldname="__column_2">
<form>
<div class="frappe-control input-max-width" data-fieldtype="Select" data-fieldname="donor">
<div class="form-group">
<div class="clearfix">
<label class="control-label" style="padding-right: 0px;"> </label>
<span class="help"></span>
</div>
<div class="control-input-wrapper">
<div class="control-input flex align-center"><select type="text" autocomplete="off" class="input-with-feedback form-control ellipsis" maxlength="140" data-fieldtype="Select" data-fieldname="donor" placeholder=""><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><div class="select-icon ">
<svg class="icon icon-sm" style="">
<use class="" href="#icon-select"></use>
</svg>
</div></div>
<div class="control-value like-disabled-input" style="display: none;"></div>
<p class="help-box small text-muted"></p>
</div>
</div>
<span class="tooltip-content">donor</span></div><div class="frappe-control input-max-width" data-fieldtype="Float" data-fieldname="percentage">
<div class="form-group">
<div class="clearfix">
<label class="control-label" style="padding-right: 0px;">Percentage %</label>
<span class="help"></span>
</div>
<div class="control-input-wrapper">
<div class="control-input"><input type="text" autocomplete="off" class="input-with-feedback form-control" data-fieldtype="Float" data-fieldname="percentage" placeholder=""></div>
<div class="control-value like-disabled-input" style="display: none;">0.000</div>
<p class="help-box small text-muted"></p>
</div>
</div>
<span class="tooltip-content">percentage</span></div></form>
<button type="button" class="btn btn-default add-more">Add More</button></div></div></div>
which i need is where i have to add this script to make it permanently works?
as in https://frappeframework.com/docs/user/en/guides/app-development/adding-custom-button-to-form you can add custom button .but its not serve my request?
i tried this :
frappe.web_form.after_load = function() {
// Add “Add More” button
var addButton = document.createElement(‘button’);
addButton.setAttribute(‘type’, ‘button’);
addButton.setAttribute(‘class’, ‘btn btn-default add-more’);
addButton.innerText = ‘Add More’;
var formColumn = document.querySelector(‘.visible-section[data-fieldname=“proposals_donor_section”] .form-column[data-fieldname=“__column_2”]’);
formColumn.appendChild(addButton);
// Handle click event of “Add More” button
addButton.addEventListener(‘click’, function() {
var donorField = document.querySelector(‘.visible-section[data-fieldname=“proposals_donor_section”] [data-fieldname=“donor”]’).cloneNode(true);
var percentageField = document.querySelector(‘.visible-section[data-fieldname=“proposals_donor_section”] [data-fieldname=“percentage”]’).cloneNode(true);
donorField.querySelector(‘select’).value = ‘’;
percentageField.querySelector(‘input’).value = ‘’;
formColumn.appendChild(donorField);
formColumn.appendChild(percentageField);
});
};
but did not work?
please help
which i need is where i have to add this script to make it permanently works?