Develop Reference

How to change text in html with either JS, PHP or HTML on load?

I'm doing this sort of a dictionary which by now works but I have few more things to edit which I have problems with.
It is a simple page with basic editing. The only more complicated stuff is the search and functioning of the button which is done.
I have 4 different languages, Italian, French, German with Italian as default and English.
I also have a simple "Dizionario IBS" (Italian) welcome like thingy but I want that everytime I change languages (Language change is basically a filter, it switches the search result that comes up after you write inside the search bar) the "Dizionario IBS" switches text to more appropriate like if I were to click on "English" Button which filter search results to english the "Dizionario IBS" would become "IBS Dictionary".
I have tried to change it with JS, PHP and HTML, looked up codes and such here but none of them worked.
I'm very basic in programming so I barely know these languages, I'm sorry if I seem too inexperienced.
I also tried to change the type of the text I want changed, like I made it into a input type = text readonly and <h1>like this</h1> and tried to see if that would make things work.
Any suggestions?
<div id='header'>
<img id='img' src='logo.jpg'>
<div id='header-testo'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="English" />
<input type="hidden" name="linguaa" value="en" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Fran&#231ais" />
<input type="hidden" name="linguaa" value="fr" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Deutsch" />
<input type="hidden" name="linguaa" value="de" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Italiano" />
<input type="hidden" name="linguaa" value="it" />
</form>
</div>
</div>
<div id='body'>
<h1 id="titolo">Dizionario IBS</h1>
<br>
<br>
<br>
<br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus />
<input type="submit" id="searchBtn" value="Vai!" />
<input type="hidden" name="linguaa" />
</form>
</div>
The hidden input is the one that filters the search bar via language, dunno if it's relevant but just saying.
The whole thing works, but I want that every time I click and filter language, the "titolo" text changes to the said language as well.
JS code suggested by a user:
<div id='body'>
<h1 id="titolo"></h1>
<script>
var heading = document.getElementById('titolo');
function languagechange(id) {
if (id == '') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'english') {
heading.textContent = 'IBS Dictionary';
} else if (id == 'french') {
heading.textContent = 'IBS Dictionnaire';
} else if (id == 'italian') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'german') {
heading.textContent = 'IBS W\u00F6rterbuch';
}
}
</script>
<br>
<br> <br> <br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus /><input type="submit" id="searchBtn" value="Vai" />
<input type ="hidden" name="linguaa" />
</form>
</div>
I moved the JS below the title becuase If i remember correctly putting it above didn't show anything. Also the first "if" was to try to set italian as default to always show when loading the page, didn't work however.

There are few things that you need to amend which I have mentioned steps wise below:
1) Firstly, change all your input type from type="submit" to type="button" ONLY under the id='header' forms. Otherwise every time you click the button it submits the form. Or if you want the form to function then prevent it from submitting. As I do not see any need for the language buttons to have a form, I suggest to change the type to button
2) Many elements in your markup has the same id value. This is bad. id attribute should be unique to each element in a DOM.
3) Coming to your solution, add a onclick event to your button like so & pass the unique id of the clicked button using this.id.
<form action="" method="get">
<input type="button" id="english" name="lingua" value="English" onclick="languagechange(this.id);" />
<input type="hidden" name="linguaa" value="en" />
</form>
Then in your JavaScript declare the languagechange() function like so & compare the id passed earlier to determine the language & change the text accordingly
var heading = document.getElementById('titolo');
function languagechange(id) {
if(id == 'english') {
heading.textContent = "English text";
} else if(id == 'french') {
heading.textContent = "French text";
}
}

$(document).ready(function() { $("#titolo").val('Put anything you want');});
try with jquery
onload, this command will change the text in the element 'titolo' with whatever you want.

Maybe this will help you https://angular-translate.github.io/docs/#/guide
If u use angular translate your html will look like this
<div id='body'>
<h1 id="titolo">{{'IBS' | translate}}</h1>
And then u just set up a file for each language with the translation.
Italiano would be
# suppress inspection "UnusedProperty" for whole file
IBS=Dizionario IBS
English would be
# suppress inspection "UnusedProperty" for whole file
IBS= IBS Directory
Afterwards you just need to write a function which selects which file is used if you press the button
U really should take a look at the doc

Input type text value cannot be updated via jQuery

Below is the simple requirement in html, jQuery, servlet
Implementation: Forgot password module
Username text field and send button. --> OK
User enters username and press send button. --> Ok
Fire jquery on click event, post method --> OK
From DB get the security question for username --> OK
Get result in jquery call --> OK
display security question value in text field --> NOK
Some how I feel, the text field is updated and refreshed to old value.
so in my case,
step 1) Text value - placeholder property value
step 2) update from jQuery
step 3) again refreshed to placeholder property value
jQuery
$(document).on("click", "#btnuserName", function() {
$.post("/zmcwebadmin/ForgotPasswordServlet",function(securityQuestion) {
alert("I got the response in ajax "+ securityQuestion);//value is correct
$("input[type=text].txt_securityQuestion").val(securityQuestion); //problem here
console.log("txt_securityQuestion");
});
});
html
<input type="text" id="ForgotPassUname" name="user_name" class="changepassformat"placeholder="Enter Username">
<button class="buttonformat" id="btnuserName" name="btnuserName">SEND</button><br>
<input type="text" id="txt_securityQuestion" name="txt_securityQuestion" class="changepassformat" placeholder="Security Question"><br>
<input type="text" id="SecurityAns" name="SecurityAns" class="changepassformat" placeholder="Enter the Answer">
Entire html code
<body background="../Images/zebra_background.jpg">
<div id="header">
<span style="float: left">ZMC Server </span> <img
src="../Images/zebra_logo.png" width=150px height=50px
style="float: right; padding-top: 5px">
<form id="form_logout">
<input type="image" class="logbuttonformat" id="logoutbtn"
src="../Images/logout_deselected.png" onclick="changeLogoutImage()"
alt="submit" style="padding: auto">
</form>
</div>
<form id="form_forgotpswd" >
<p class="slectedNameformat"> FORGOT PASSWORD </p>
<input type="text" id="ForgotPassUname" name="user_name" class="changepassformat"placeholder="Enter Username">
<button class="buttonformat" id="btnuserName" name="btnuserName">SEND</button><br>
<input type="text" id="txt_securityQuestion" name="txt_securityQuestion" class="changepassformat">
<br>
<input type="text" id="SecurityAns" name="SecurityAns"class="changepassformat" placeholder="Enter the Answer">
<br><input type="button" class="buttonformat" value="SUBMIT">
</form>
</body>
</html>

You need id selector instead of class selector here as txt_securityQuestion is id of element and not its class:
$("#txt_securityQuestion").val(securityQuestion);

How to serialize div tag's child elements by jQuery?

I use jQuery and ajax.
In the first. it is my html.
<form id="frm" name='frm' action="." method="post">
<div style="position: absolute; top:270px;">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</div>
</form>
And, I create submit function like below in JS.
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
console.log(serialized_date);
However, the "console.log" logged "set" paramater.
but, btn1 or btn2 can't show the log.
I guess it is child of the mybuttons div tag.
I don't want to remove the tag. because, I create dynamically the html by javascript.
$('#mybuttons').innerHTML = "<input type="\submit\" class="\buttonbig3\" name=\"btn1\" value=\"1\" /><br />";
Could you tell me how to serialize child tag.

I hope will be helpful , just find the button that does submit and added to the serialized
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
var btn = $(document.activeElement);
serialized_date += "&" + btn.attr("name") + "=" + btn.val();
console.log(serialized_date);
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm" name='frm' action="." method="post">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</form>

Serialize don't add submit button values to the data as submit buttons should be used only to submit the form, not to send specific data. You have to change the type="submit" to something else if there is specific data you want to get out of it.

serialize() docs
The .serialize() method creates a text string in standard URL-encoded
notation. It can act on a jQuery object that has selected individual
form controls, such as , , and : $( "input,
textarea, select" ).serialize();
Buttons can't be serialized. Only the elements with user inputs can be serialized like textbox, radio button, etc
If you place an input box inside the div, you will find it in your console.log.
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
<input id="hidden-qid" type="hidden" name="rias" value="hoge" />
</div>
Now if you try submitting the form, you will get that input text inside the div element. So it's not about child elements here.

Triggering events in html using same button

I want to trigger an event with a button that changes the visibility of a set of elements (inputs of type text and button) from hidden to visible. Now everytime I click on the triggering button, I want a new set of the same elements to appear on a new line. How can that be done? Here is a snippet of the code:
<script type="text/javascript">
function generatenew()
{
document.add.property1.style.visibility="visible";
document.add.button2.style.visibility="visible";
document.add.button3.style.visibility="visible";
document.add.button4.style.visibility="visible";
}
</script>
</head>
<body>
<form name='add' method="post" action="">
<div id="div"></div>
<input type="button" value="+Add" onclick="generatenew();">
<input type="button" value="Edit" name="button2" style="visibility:hidden">
<input type="text" style="visibility:hidden" size="50" name="property1" placeholder="<street> <city> <ZIP> <country> <lockunitID>">
<input type="button" style="visibility:hidden" name="button3" value="open main door">
<input type="button" style="visibility:hidden" name="button4" value="open apartment door">
<div id="abc"><input type="button" value="save"></div>

If I well understood your question, all you have to do is putting a function that is triggered by an onClick event, (element.onClick=function();) You put all your input type tags in the function, and then you end your function bay calling appendChild method so that each click triggers the display of your elements.

Submitting HTML Forms with Slider as input (WebFX)

How can I submit the value of this slider to a CGI application (like you would a check box)?
Not sure if the input tag for the slider is messing something up?
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1"
name="slider-input-1"/>
</div>

If I were you, I'd try tweaking the <input> tag's type attribute, setting it to text or hidden.
(I don't know enough about the framework/environment you're using to say for sure.)

OK got it:
<form action="/cgi-bin/Lib.exe" method=POST name="slider" ID="Form2">
<input type="hidden" name="user" value="" ID="Text1">
</form>
<input type="button" value="Delete" class="btn" onclick="setval()" onmouseover="hov(this, 'btn btnhov')" onmouseout="hov(this, 'btn')" ID="Button1" NAME="Button1"/>
function setval()
{
//alert(s.getValue());
document.slider.user.value = s.getValue();//set value of hidden text box to value of slider
document.slider.submit();
}