I've run into a follow-up problem with this excellent solution:
Select checkbox when clicking in textarea (JavaScript?).
I need to apply the solution to more than one textbox in the same form. Is it possible in any way to alter the code into something like this (not working):
<html>
<body>
<textarea id="iamtextarea" rows="4" cols="10" onfocus="onFocusTextArea('iamtextarea');" onblur="onBlurTextArea('iamtextarea');">Enter some text in textbox</textarea>
<input type="checkbox" name="iamcheckbox" id="iamcheckbox" checked="checked"> I am checkbox<br>
<input type="hidden" name="hiddenString" id="hiddenString" value="Enter some text in textbox">
</body>
</html>
<script type="text/javascript">
function onFocusTextArea(variableName) {
document.getElementById("iamcheckbox").checked = false;
}
function onBlurTextArea(variableName) {
if(document.getElementById(variableName).value==document.getElementById("hiddenString").value) {
document.getElementById("iamcheckbox").checked = true;
}
}
</script>
What I want to do is to pass a variable id of the textarea to the javascript function so that I can use the same function for more than one textarea. Is that possible?
See jsfiddle here. This takes an element and a checkboxid
function onFocusTextArea(checkboxId) {
document.getElementById(checkboxId).checked = false;
}
function onBlurTextArea(element, checkboxId) {
if (element.value === "") {
document.getElementById(checkboxId).checked = true;
}
}
Some sample HTML
<textarea id="iamtextareaone" onfocus="onFocusTextArea('checkboxone');" onblur="onBlurTextArea(this, 'checkboxone');"></textarea>
<textarea id="iamtextareatwo" onfocus="onFocusTextArea('checkboxtwo');" onblur="onBlurTextArea(this, 'checkboxtwo');"></textarea>
<input type="checkbox" id="checkboxone" checked="checked">Checkbox One<br>
<input type="checkbox" id="checkboxtwo" checked="checked">Checkbox Two<br>
Related
I am trying to copy the value of the textbox to the textarea However the value gets copied using the javascript function but it disappears from the textarea after a second. What am i doing wrong?Why does it get disappear after being copied?
this is the html:
<html>
<head>
<title>
</title>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<input type="submit" value="Add" onClick="fn_copy()" />
</form>
</body>
and this is the javascript code:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
Thank you.
Change your button type to button instead of submit. Otherwise your page will be refreshed (default behavior with submit) and hence the content of your textarea reset.
<input type="button" value="Add" onClick="fn_copy()" />
Your problem is that you are using input of type submit, when you click it, the fuction fn_copy execute, but also do a post request, and that is why the value disappears.
Change the input for a button like that and it will work
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<button type="button" onclick="fn_copy()">Add</button>
</form>
You can sse a working sample here: https://jsfiddle.net/8e5e4wuz/
http://www.w3schools.com/jsref/event_preventdefault.asp
Use preventdefault to stop it from submitting.
Try this. Add any id to the button, for example btn, and do this:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
fn_copy();
event.preventDefault();
})
Im trying to figure out how can Javascript check if input field has any value, then it removes class value "is-invalid".
I have this code so far:
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>
<script>
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
element.classList.remove("is-invalid");
}
</script>
As you can see theres a red border (class="is-invalid") around the input. As soon as user puts any value in the inputfield, Javascript will remove class value "is-invalid".
Or might there be an easier option with jQuery?
You have a mistake in your code. You have used
element.classList.remove("is-invalid");
which is wrong, you have to use it like
checkInput.classList.remove("is-invalid");
You can use like this in javascript.
function check(){
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
checkInput.classList.remove("is-invalid");
} else {
checkInput.classList.add("is-invalid");
}
}
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName" onkeyup="check()">
</form>
In Jquery you can try like
$('#inputName').keyup(function(e){
if ($('#inputName').val()) {
$('#inputName').removeClass("is-invalid");
} else {
$('#inputName').addClass("is-invalid");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>
You need to add an event listener to the element to know when it changes.
var checkInput = document.getElementById("inputName");
checkInput.addEventListener('keyup', (e)=>{
if (e.target.value!==''){
e.target.classList.remove("is-invalid");
}
})
what I am missing in this code, If I just want the input submit button to enable/disable/enable.. as long as I fill or unfill the input text?
sorry I am doing my best to learn javascript...can anyone help me fix this code?
<form name="myform" method="post">
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value=""/>
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>
<script>
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true;
function checkFormsValidity(){
var myforms = document.forms["myform"];
if (myforms.checkValidity()) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}
</script>
This is the fiddle: https://jsfiddle.net/1zfm6uck/
Am I missing declaring onLoad mode or something like this?
Thanks!
Actually - if it wasn't a jsfiddle example your code would work great:
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true;
function checkFormsValidity(){
var myforms = document.forms["myform"];
if (myforms.checkValidity()) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}
input[type='submit']:disabled{
color:red;
}
<form name="myform" method="post">
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value="" required="required" />
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>
The problem was the jsfiddle put your javascript code inside a clousure, so the checkFormsValidity function is not available in the scope of your input.
I added a required="required" to your input to make sure it's a required field (which will affect the checkValidity() of your form).
function checkFormsValidity(){
needs to be change to:
checkFormsValidity = function(){
Personally I wouldn't check validity that way, but in terms of making your code work without error, that will do it.
Edit: Also add required="required" to the input.
I'm new to JavaScript. Here's my code:
<script>
function text_input_type(type)
{
if(type=='list'){
document.getElementById("note_input").innerHTML="<input type=\"text\" name=\"body\">";
}
else{
document.getElementById("note_input").innerHTML="<textarea id=\"note_input\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>";
}
}
</script>
<textarea id="note_input" name="body" cols="27" rows="5"></textarea>
<input type="radio" name="type" value="text" onclick=text_input_type('list') />
<input type="radio" name="type" value="list" onclick=text_input_type('text') />
I want it so that depending on which radio button you press it changes from a textarea to a input text type. The problem is instead of changing the input from a textbox to a smaller text input it just prints the code inside the box.
Hope this helps you in solving your problem.
<script>
function text_input_type(type)
{
if(type=='list'){
document.getElementById("note_input").innerHTML="<input type=\"text\" id=\"note_input1\" name=\"body\">";
}
else{
document.getElementById("note_input").innerHTML="<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>";
}
}
</script>
<div id="note_input"><textarea id="note_input1" name="body" cols="27" rows="5"></textarea></div>
<input type="radio" name="type" value="text" onclick=text_input_type('list') />
<input type="radio" name="type" value="list" onclick=text_input_type('text') />
Try this code, you will get what you want.
Your code is correct, except for a small change.
<html>
<body>
<input type="radio" name="type" value="text" onclick="text_input_type('list');" />
<input type="radio" name="type" value="list" onclick="text_input_type('text');" />
<div id="note_input">
</body>
</html>
Should work fine
Bind the click handlers with Javascript too—inline Javascript isn't really necessary:
var elems = [].slice.call( document.getElementsByTagName("input") );
elems.forEach( function( elem ){
elem.onclick = function(){
var type = this.value;
if( type === 'list' ){
alert("type is list");
} else {
alert("type is not list");
}
};
});
Example.
I'm aware that this can be a little complicated. What we're simply doing is attaching a click function to each of the input tags on the page. We set the value of the clicked input tot he type variable and check if that variable is equal to the string list. If it is, then we fire the code in the if. If not, we fire the code in the else.
Essentially what this does is make it easier for you. You just put this code in your JS file and you don't have to worry about assigning the onclick on the elements themselves (and it looks you were doing it for two of them).
However, your code will work if you surround the onclick with quotes, like so:
onclick="text_input_type('list');"
I have the following form from http://regain.sourceforge.net/:
<form name="search" action="search.jsp" method="get">
<p class="searchinput">
<b>Suchen nach: </b>
<input name="query" size="30"/>
<select name="order" size="1" ><option selected value="relevance_desc">Relevanz</option><option value="last-modified_asc">Dokumentendatum aufsteigend</option><option value="last-modified_desc">Dokumentendatum absteigend</option</select>
<input type="submit" value="Suchen"/>
</p>
</form>
the search form works fine. The URL looks like the following:
http://localhost:8080/regain/search.jsp?query=queryfieldvalue&order=relevance_desc
Now I want to add a checkbox to manipulate the value of the input field query.
If the checkbox is checked then the query value should look like filename:"queryfieldvalue"
http://localhost:8080/regain/search.jsp?query=filename%3A%22queryfieldvalue%22&order=relevance_desc
What's the best way to do this? Javascript? Do you have a short example for me because I'm really new to javascript.
Thanks a lot in advance.
one way with pure javascript (without jquery) would be
<script type="text/javascript">
function handler()
{
var check = document.getElementById('check');
var query = document.getElementsByName('query')[0];
if(check.checked)
{
query.value = "filename:\"" + query.value + "\"";
}
else
{
query.value = query.value.replace(/^filename:"/, "").replace(/"$/, "");
}
}
</script>
<form>
<input type="text" name="query" />
<input type="checkbox" id="check" onclick="handler()" />box
</form>
it should more or less work, it would be safer if you give query input field an id and then reference it by id, not name
if you use jQuery, something like this should do:
<input type="checkbox" id="chkQuery">Pass queryfield</input>
<script>
$(document).ready(function{}
$("#chkQuery").click(function(){
if ($(this).is(':checked'))
$("input[name='query']").val("filename:queryfieldvalue");
else
$("input[name='query']").val("queryfieldvalue");
});
});
</script>