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();
}
Related
I have a form where I would like to hide the submit button unless the input is focussed/selected.
There is only one input apart from the submit.
I need to do this using pure JS (or perhaps CSS/Sass), not jQuery etc.
Basic example:
<form>
<input type="text" placeholder="Example field">
<input type="submit value="Submit">
</form>
First get references to your objects, so change the HTML for example :
<form>
<input id="input_1" type="text" placeholder="Example field">
<input id="submit" type="submit" value="Submit" />
</form>
With some CSS we will hide the submit by default:
#submit{
display:none;
}
We have added Id's, now we add the event listeners for focus on input..
document.getElementById("input_1").addEventListener('focus', function(){
document.getElementById("submit").style.display = 'block';
}
, true);
The second param into the eventListener will execute when the event is fired..
You will need to do more work on this..
https://jsfiddle.net/7uzkzr67/
Here is the pure CSS solution;
.showonfocus{
display:none;
}
.inputfield:focus + .showonfocus{
display:inline;
}
<form>
<input type="text" placeholder="Example field" class="inputfield">
<input type="submit" value="Submit" class="showonfocus">
</form>
You can use the onblur and onfocus events to manipulate your html elements. You can try something like,
HTML
<form>
<input type="text" placeholder="Example field" onblur="setVisible('hidden');" onfocus="setVisible('visible');">
<input id="submit" type="submit" value="Submit" style="visibility:hidden">
</form>
Javscript
function setVisible(state) {
document.getElementById("submit").style.visibility = state;
}
Here is the working DEMO: https://jsfiddle.net/qbotxpL6/
Hope this helps!
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çais" />
<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
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);
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.
I have a fairly simple HTML form which has a number of HTML input buttons on it (input type="button"). The buttons use a small piece of JavaScript to change the displayed value when clicked (Yes and No). I am happy with this functionality but would like to know the best way to record the values for later submission into a database.
I have this at the moment:
<script>
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";}
else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";}
}
</script>
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
</p>
<input type="submit" value="Save">
</form>
Any ideas would be greatly appreciated.
You can always use hidden form elements, they will get sent to the server just like text inputs:
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";
document.getElementById("yn_answer").value="No";
} else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";
document.getElementById("yn_answer").value="Yes";
}
}
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
<input type="hidden" name="yn_answer" id="yn_answer" value="Yes" />
</p>
<input type="submit" value="Save">
</form>