So I have an hidden field, which I want to fill with multiple other input values, when I click on the submit button of an form.
So I use the event.preventDefault(); and then fill the field using JS and afterwards submit the form.
But when I check the returned value in the database I have an empty string instead of the filled values.
What am I doing wrong and how do i have to fix my code?
This is the whole JS file for that functionality:
if (getHiddenLicenseField() != undefined) {
$('.buybox--button').click(function(event){
event.preventDefault();
fillHiddenLicensePlateField();
$(this).closest('form').submit();
});
}
function getHiddenLicenseField() {
return $('.personalizeAttr')[0];
}
function getLicencePlateInputList() {
return $('.custom-input-inner')[0].getElementsByTagName('input');
}
function fillHiddenLicensePlateField() {
let hiddenCustomField = getHiddenLicenseField();
for (let input of getLicencePlateInputList()) {
hiddenCustomField.value += input.value;
}
}
HTML
Field where the user inputs the data:
Hidden Field, where the input of the user gets inserted to:
<input class="personalizeAttr" type="text" name="sAttr1" data-pers-article="2" value="" placeholder="">
Form:
<form name="sAddToBasket" method="post" action="https://www.123autokennzeichen.de/checkout/addArticle" class="buybox--form" data-add-article="true" data-eventname="submit"> <input type="hidden" name="sActionIdentifier" value=""> <input type="hidden" name="sAddAccessories" id="sAddAccessories" value=""> <input type="hidden" name="sAdd" value="123ak10002"> <input style="display:none" class="personalizeBuyAttr personalize_sAttr1" type="text" name="sAttr1" value="" placeholder="sAttr1">
<div class="buybox--button-container block-group">
<div class="buybox--quantity block">
<div class="js--fancy-select select-field quantity--select">
<select id="sQuantity" name="sQuantity" class="quantity--select">
<option value="1" test="">1</option>
...
<option value="100" test="">100</option>
</select>
</div>
</div>
<button class="buybox--button block btn is--primary is--icon-right is--center is--large" name="In den Warenkorb">
<span class="buy-btn--cart-add">In den</span> <span class="buy-btn--cart-text">Warenkorb</span> <i class="icon--arrow-right"></i>
</button>
</div>
<input type="hidden" name="__csrf_token" value="A14oWCR0O16TU8TmYucIFTdnN8Vz3j">
</form>