We Keep Coding

Mapping multiple language data in JavaScript

guys! I'm still beginner so I have a problem with mapping in JS if I have multiple langauges to map. With react I could to solve it with the useState and useEffect but in this case I don't know what do do...
function report() {
const reportWindow = document.getElementById("reportWindow");
const pageName = window.location.pathname;
const language = document.getElementsByTagName("html");
let codeBlock = "";
for (let i = 0; i < language.length; i++) {
if (language[i].lang === "en") {
codeBlock = `
<div class="report__base" id="myReport">
<span id="close" onclick="showOld()">×</span>
<div class="report__content" id="report01">
<h3>Report page</h3>
<form method="post" action="https://saro.website/report.php" class="report__form">
<input name="language" id="language" value="${language[i].lang}" style="display: none;">
<input name="page" id="page" value="${pageName}" style="display: none;">
<input name="lang" id="lang" value="English" style="display: none;">
<select name="category" id="category" required>
<option value="Bug">Bug</option>
<option value="Page does not work">Page does not work</option>
<option value="Problem with displying">Page displays incorrectly</option>
<option value="other">Other</option></select>
<input type="text" name="other" id="other" class="issue" placeholder="if other, what is it?">
<textarea name="describe" id="describe" cols="30" rows="10" placeholder="Describe your issue or feedback here" required></textarea>
<i>*Additional informations name, email are not requested</i>
<div class="form__label__left">
<input type="text" name="name" id="name" class="issue" placeholder="Name">
<input type="email" name="email" id="email" class="issue" placeholder="Email">
<input type="submit" class="button__black" value="Send">
</form>
</div>
</div>
</div>`;
} else if (language[i].lang === "ja") {
codeBlock = `
<div class="report__base" id="myReport">
<span id="close" onclick="showOld()">×</span>
<div class="report__content" id="report01">
<h3>レポート</h3>
<form method="post" action="https://saro.website/report.php" class="report__form">
<input name="language" id="language" value="${language[i].lang}" style="display: none;">
<input name="page" id="page" value="${pageName}" style="display: none;">
<input name="lang" id="lang" value="Japanese" style="display: none;">
<select name="category" id="category" required>
<option value="Bug">バグ</option>
<option value="Page does not work">ページがうまく動かない</option>
<option value="Problem with displying">指定したページが一致しな</option>
<option value="other">その他</option></select>
<input type="text" name="other" id="other" class="issue" placeholder="「その他」を選んだ方は、内容をご記入下さい?">
<textarea name="describe" id="describe" cols="30" rows="10" required placeholder="発生している状況やフィードバックをご記入下さい"></textarea>
<i>以下の内容をご記入下さい。(任意)</i>
<input type="text" name="name" id="name" class="issue" placeholder="お名前">
<input type="email" name="email" id="email" class="issue" placeholder="メールアドレス">
<input type="submit" class="button__black" value="送信">
</form>
</div>
</div>`;
} else if (language[i].lang === "zh") {
codeBlock = `
<div class="report__base" id="myReport">
<span id="close" onclick="showOld()">×</span>
<div class="report__content" id="report01">
<h3>问题反馈</h3>
<form method="post" action="https://saro.website/report.php" class="report__form">
<input name="language" id="language" value="${language[i].lang}" style="display: none;">
<input name="page" id="page" value="${pageName}" style="display: none;">
<input name="lang" id="lang" value="Chinese" style="display: none;">
<select name="category" id="category" required>
<option value="Bug">问题</option>
<option value="Page does not work">页面 没 有 反应</option>
<option value="Problem with displying">页面 显示 错误</option>
<option value="other">其他</option></select>
<input type="text" name="other" id="other" class="issue" placeholder="如果 是其他问题， 是 什 么？">
<textarea name="describe" id="describe" cols="30" rows="10" required placeholder="在这里描述下 你的 问题 或 反馈 "></textarea>
<i>附加 信息， 不 需要</i>
<input type="text" name="name" id="name" class="issue" placeholder="名字">
<input type="email" name="email" id="email" class="issue" placeholder="邮件">
<input type="submit" class="button__black" value="发送">
</form>
</div>
</div>`;
}
reportWindow.innerHTML = codeBlock;
}
}
There is a code, but I would to love to make it more clear and readable I would like to leave only one codeBlock as a varible and don't multiple it. Somebody could to help me and solve it in JS? ^^" thanks in advance - I would love to expand my knowladge about JS so it would be helpful in my studying this language.

You're in the right way, that code needs to be simplified!
And you're purpose to expand your knowledge is mirable. 😉
JavaScript is perfect for HTML page manipulation. Sometimes you use frameworks or libraries like React or Vue.js, JQuery, Angular to make things cleaner and easier.
There are also libraries which simplify language translation inside our code, like for example I18N.
If you write in plain JavaScript (called Vanilla JS), sometimes you have to write, debug, maintain a lot of code. You should consider to use a framework or at least a library.
In this case I really suggest you to:
avoid to put HTML strings inside JavaScript code, it's not very readable
avoid to duplicate code. You could simplify it for example using a language map like in the example below and then modifying the HTML using classes and ids.
const languageMaps = {
'en': {
'bug': 'Bug',
},
'ja': {
'bug': 'バグ',
},
// ...
};
const language = 'en';
document
.getElementById("bug-option")
.firstChild
.nodeValue = languageMaps[language].bug;
I know it's not that much, but I hope it could help.
Good luck with your study! 😉

Text not carrying over to POST variable

Here is the HTML: Line 18 below is not carrying over to $_POST['storename'] after Submit is hit. All other text fields are carrying over just fine. The only difference is that this autofills with data from database using PHP and AJAX. I've attached all coding in reference to that field.
Here's the link to the site: http://drmwebdesign.com/project002/product-insert.php
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="text" name="pname" id="pname" value="<?php echo $pname;?>" placeholder="Product Name" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="brand" id="brand" value="<?php echo $brand;?>" placeholder="Product Brand" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="price" id="price" value="<?php echo $price;?>" placeholder="Product Price" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="upc" id="upc" value="<?php echo $upc;?>" placeholder="Product UPC" />
</div>
</div>
<div class="row uniform">
<div class="12u">
<input type="text" name="storename" id="storename" class="form-control" placeholder="Enter Store Name" />
<div id="storeList"></div>
</div>
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" value="Submit Product" /></li>
</ul>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$('#storename').keyup(function(){
var query = $(this).val();
if(query != '')
{
$.ajax({
url:"php/storelist.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#storeList').fadeIn();
$('#storeList').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#storename').val($(this).text());
$('#storeList').fadeOut();
});
});
</script>

Try the following :
1) Use the chrome network to check the request / response
2) If the field contains a long data check the max post size
3) If the field is a list, and you are selecting multiple choices you need to check this question
4) check if multiple fields have the same name/id

$(document).on('click', 'li', function(){
$('#storename').val($(this).text());
$('#storeList').fadeOut();
});
Triggers when you press the submit button, setting #storename value to nothing.
Add a class to the store names and target onclick using that.

Form name attribute causing the issue in IE

When I submit the form values to 2check out payment gateway I got PE101 error(i.e Require values not passed).
After debugged my code I come to know that PE101 error causing issue only in IE because of name attribute has empty value.
Same code working in Chrome but when I tried in IE, Edge it's causing the issue.
can anyone please tell me why 2check out payment gateway not taking the form values without name attribute that in from IE.
$("#idNavPremimum").click(function() {
alert("k");
$("input[name*='quantity']").val("88");
$("input[name*='li_0_price']").val("99");
$("input[name*='email']").val("uday.a#gmail.com");
$("#payment").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="payment" action='https://sandbox.2checkout.com/checkout/purchase' method='post'>
<div class="form-group">
<label for="quantity" class="col-md-1 control-label">No. of users</label>
<div class="col-md-2">
<!----------------------This control causing the issue--------------------->
<input type="text" maxlength="3" class="form-control specialCharRestrict" id="quantity" name="">
<!----------------------This control causing the issue ends--------------------->
</div>
<label for="ddlPriceCalcMonths" class="col-md-1 control-label">No. of months</label>
<div class="col-md-2">
<select id="ddlPriceCalcMonths" class="form-control clsPriceValDetails" disabled>
<option value="1">1</option>
<option value="3">3</option>
<option value="6">6</option>
<option value="12">12</option>
</select>
</div>
<label for="txtTotalPrice" class="col-md-1 control-label">Total price</label>
<div class="col-md-2">
<input type="text" class="form-control clsPriceVal" id="txtTotalPrice" readonly/>
</div>
<!--<input type='hidden' name='sid' value='901286127' />-->
<input type='hidden' name='sid' value='901286127' />
<input type='hidden' name='mode' value='2CO' />
<input type="hidden" name="currency_code" value="USD" />
<input type='hidden' name='li_0_type' value='product'>
<input type='hidden' name='li_0_name' value='Webstation Premium'>
<input type='hidden' name='li_0_price' value='20'>
<input type='hidden' name='li_0_quantity' value='2'>
<input type='hidden' name='li_0_tangible' value='N'>
<input type='hidden' name='email' value='uday.a#gmail.com'>
<input type='hidden' name='fixed' value='Y' />
<input type='hidden' name='x_receipt_link_url' value='http://webstation.osmosystems.com/' />
</div>
</form>
<div class="form-group">
<button class="button-style btnPos" type='button' data-toggle="modal" data-target="#divwebstationForm" id="idNavPremimum"><i class="fa fa-android fa-fw"></i> BUY NOW <i class="fa fa-cloud-download fa-fw"></i></button>
</div>

This is due to IE implementation of forms behaviour.
As per MS specs name parameter is mandatory for inputs like text.
IE when form is submitted takes into consideration inputs without name property - meaning those are included in the Content-Length header of the Request as well as the FormData contains empty row.
On the other hand Chrome, FF if they encounter input without name they just ignore it.
To sum it up - to make it work on IE you will need to put name property.

Clear only specific fields in HTML form when submitting

I have the following HTML form code:
<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
<div data-role="content"> Delete
<form id="item-form" action="#" formaction="process" data-ajax="false">
<input type="hidden" name="type" value="hidden1" />
<input type="hidden" name="how" value="hidden2" />
<input type="hidden" name="loc" value="hidden3" />
<input type="hidden" name="itemtype" value="hidden4" />
<div align="left">
<h3> Add</h3>
</div>
<div class="popup-hrule"></div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<label for="location_name">Name</label>
<input type="text" name="location_name" id="location_name" value="">
</div>
<div class="ui-block-b" data-schema="types">
<label for="type_name">Type</label>
<select name="type_name" id="type_name">
<option data-item=".textarea:name; .value:id; .repeat:true"></option>
</select>
</div>
<div class="ui-block-a">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<div class="ui-block-b">
<label for="city">City</label>
<input type="text" name="city" id="city" value="">
</div>
<div class="ui-block-a">
<label for="state">State</label>
<input type="text" name="state" id="state" value="">
</div>
<div class="ui-block-b">
<label for="zip">Postal</label>
<input type="number" name="zip" id="zip" value="">
</div>
<div class="ui-block-a">
<label for="_lat">Latitude</label>
<input type="number" name="_lat" id="_lat" value="">
</div>
<div class="ui-block-b">
<label for="_lon">Longitude</label>
<input type="number" name="_lon" id="_lon" value="">
</div>
</div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
</form>
</div>
</div>
Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.
A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.

You're clearing all input elements:
$(this).closest('form').find('input').val('');
If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:
$(this).closest('form').find('input[type!="hidden"]').val('');
Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.

A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.
$("#item-form").remove();
If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.
$('#item-form')[0].reset();
The plain JS way of doing it
document.getElementById("item-form").reset();
Updated after discussion with OP
Cancel
function resetForm() {
$('#item-form')[0].reset();
$(this).closest('[data-role=popup]').popup(‌​'close');
}

Change this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
For this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
So that you are selecting just those input elements with type not equal to hidden.

Select Hide/Show in WordPress Widget Form

So here is the problem, I've been trying to use jQuery to put a select hide/show field into my wordpress widget form. I have all of the fields in place, it's just the script that isn't working. Maybe I am doing something wrong, but I've searched and I can't find an answer, maybe someone can help.
<p class="dot-input-title">
<label for="widget-bw_adspace-__i__-title">Title</label>
<input class="widefat" id="widget-bw_adspace-__i__-title" name="widget-bw_adspace[__i__][title]" type="text" value="" />
</p>
<div class="dot-select-type">
<select id="widget-bw_adspace-__i__-type" class="bw-select widefat" name="widget-bw_adspace[__i__][type]" >
<option value="upload" id="upload" >Upload Ad Image</option><option value="custom" id="custom" >Custom Script</option> </select>
</div>
<div id="dot-input-upload">
<label for="widget-bw_adspace-__i__-src">Upload Ad Image</label>
<img style="width:100%" src="" />
<input type="text" id="widget-bw_adspace-__i__-src" class="widefat bw_src" name="widget-bw_adspace[__i__][src]" value="" />
<input type="button" class="bw_button button" name="widget-bw_adspace[__i__][src]_button" id="widget-bw_adspace-__i__-src_button" value="Upload" />
<p>Use this field to upload or select and image from the media library.</p>
<label for="widget-bw_adspace-__i__-url">Add URL</label>
<input class="widefat" id="widget-bw_adspace-__i__-url" name="widget-bw_adspace[__i__][url]" type="text" value="" />
<p>Add a URL to the selected ad.</p>
</div>
<div id="dot-textarea-custom-script">
<label for="widget-bw_adspace-__i__-custom">Custom Script</label>
<textarea class="widefat" id="widget-bw_adspace-__i__-custom" name="widget-bw_adspace[__i__][custom]" value="" col="20" rows="16"></textarea>
</div>
jQuery(document).ready(function(){
$('#dot-input-upload').hide();
$('#dot-textarea-custom-script').hide();
$('.bw-select').change(function() {
if ($(".bw-select").val() == "upload") {
$("#dot-input-upload").show();
$("#dot-textarea-custom-script").hide();
} else {
$("#dot-input-upload").hide();
};
if ($(".bw-select").val() == "custom") {
$("#dot-input-upload").hide();
$("#dot-textarea-custom-script").show();
} else {
$("#dot-textarea-custom-script").hide();
};
});
});

Ok it's here.
<select id="widget-bw_adspace-__i__-type bw-select" class="bw-type widefat" name="widget-bw_adspace[__i__][type]" >
You're selecting with $('.bw-select') but you've appended bw-select to the ID not the class.
NB $('#bw-select') won't select that element because the ID is invalid, it having a space.

jQuery(document).ready(function(){
change to
$(document).ready(function(){
or change all $ to jQuery ;