JavaScript display a div when I click an input? - javascript

I want to display a block div when I clicked an input field.
<input class="indifferent" type="radio" name="decision" value="indifferent"> Indifferent </br>
<div class="input" style="display: none;"> Please help for our company! </br> <input type='text' name='help'> </br> </div>
How can I execute it?

Here is a simple non-jquery dependent solution:
<input class="indifferent" type="radio" name="decision" value="indifferent" onclick="document.getElementById( 'hidden' ).style.display = 'block' "> Indifferent <br>
<div id="hidden" class="input" style="display: none;"> Please help for our company! <br> <input type='text' name='help'> <br> </div>

$(".indifferent").click(function(){
$(".input").toggle();
});
Each click on .indifferent will change it's display between showing and hiding.

Add the following jQuery.
$('input').on('click', function() {
$('.input').css('display', 'block');
});
JS FIDDLE

I always prefer to add a class when click insteed of a sigle property (to whatever element) as it will allow you to add now or in the future more style to your div. It's more versatil:
$(document).ready(function () {
$('.indifferent').click(function () {
$('.input').addClass("display")
});
});
FIDDLE

Related

How to get nearest previous input checkbox with name "checkthis" using queryselector on an element?

<input name="checkthis" type="checkbox">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckboxCheckthis">
How to get previous input checkbox with name "checkthis" using queryselector on an element?
function findPreviousInputcheckboxCheckthis(ev) {
checkboxCheckthis = ev.target.querySelector( "input[name='checkthis']);
}
Edit: There are many more input checkboxes with name="checkthis" before and after the snippet I posted. They are nested in other element also.
I simply want the nearest previous checkbox in the html-source starting from the target, nested or not.
Based on your below comment, I have updated the answer snippet where you need to add parent div structure and then you can find the checkthis name attribute quickly. Please check below working snippet:
function findPreviousInputcheckbdfoxCheckthis(ev) {
var selectElement = document.getElementById(ev);
selectElement.querySelector('input[name="checkthis"]').style.visibility = "hidden";
}
<div id="div1">
<input name="checkthis" type="checkbox" value="previous">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox" value="next">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckbdfoxCheckthis(this.parentElement.id)" placeholder="Previous checkbox">
</div>
Here, I have added div1 id and you can repeat the same by using using ID and rest the JavaScript will be same and it will find your first previous "name=checkthis" checkbox.
Hope this solution will be work for you!
Also, below is the link where I have used multiple repeat structure. Please refer it also:
https://jsfiddle.net/kairavthakar2016/3d8g49nm/96/

How to hide a div using radio button

I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}
Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>
Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.
Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>

Show a div when keyword is enter in search box

Basically what I want to do is show a div if a keyword has been entered in the search box. For example I type "Television" into the box and it will show a div an ID of Television, but I want to do this for about 5 results. Is this possible to be done with Javascript?
This is all I've got:
HTML:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
Javascript:
function showDiv() {
document.getElementById('noresults').style.display = "block";
}
jsFiddle
Live site
You can use the onkeypress attribute to compare your text box value with predefined strings.
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeypress="checkMatch(this)">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
function checkMatch(obj) {
/* get obj text and compare is to some other string */
}
Sure. your code would look something like this:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeyup="showDiv(this.value)">
<button type="button" name="answer" class="pure-button">Search</button>
</form> <script>
function showDiv(value) {
if (value.charAt(value.length - 1) == ' ')
document.getElementById('noresults').style.display = "block";
else
document.getElementById('noresults').style.display = "none";
}
</script>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
So, as Tsikon has already answered You need to have an event defined for your text field and a JS function associated (showdiv()) with it
For eg: Onkeypress/Onchange and length of the field >0
You can probably think of displaying the div only when atleast 3 characters are entered by when you probably know what to display in div.

Checked Another hidden radio Button

hello,
I'm trying to select hidden radio input when selecting another one
<div class="questions">
<div class="questions_title">
<span> Q : What Are you doing now ?</span>
</div>
<div class="answers">
<script>
$('#answerid_').on('checked', function() {
$('#degres_').prop('checked', true);
return false;
});
</script>
<div class="field">
<input type="radio" value="1915" id="answerid_1" name="answerid_1" class="required">
<input type="hidden" value="0" id="degres_1" name="degres_1">
<span class="questions_label">Working. </span>
</div>
<div class="field">
<input type="radio" value="1916" id="answerid_2" name="answerid_1">
<input type="hidden" value="1" id="degres_2" name="degres_1">
<span class="questions_label">Playing.</span>
</div>
<div class="field">
<input type="radio" value="1917" id="answerid_3" name="answerid_1">
<input type="hidden" value="2" id="degres_3" name="degres_1">
<span class="questions_label">not Sleeping </span>
</div>
<div class="field">
<input type="radio" value="1918" id="answerid_4" name="answerid_1">
<input type="hidden" value="3" id="degres_4" name="degres_1">
<span class="questions_label">Nothing.</span>
</div>
</div>
I need => When selecting any answer the according next hidden degree would be checked too
You can't check a hidden-type input. However, you can check a radio-type invisible input (with display:none style).
it should be..
$('[id^=answerid_]').on('change', function() {
$(this).next().prop('checked', true);
return false;
});
You need wild card to attach event and change event.
Live Demo
$('[id^=answerid_]').on('change', function() {
$(this).next(':hidden').prop('checked', true);
return false;
});
Instead of using check of hidden I would suggest you to set the value of hidden field.
$(this).next(':hidden').val("true");
you can try this
JS CODE
$('[id^=answerid_]').on('change', function() {
$(this).siblings('[id^=degres_]').prop('checked', true);
alert($(this).siblings('[id^=degres_]').prop('checked'));
return false;
});
DEMO
You can't check a hidden-type input. it is expecting a value, so the value could be 1 if previous is cecked or 0 if not checked.
after use the folowing code
$('[id^=answerid_]').on('change', function() { $(this).siblings('[id^=degres_]').prop('checked', true); //alert($(this).siblings('[id^=degres_]').prop('checked')); return false; });
and changing hidden input to another radio because it now work and by adding
style="margin-left: -16px; position: absolute;"
for every answer input to be above degrees radio it work successfully.
but in the last question it's not work or check degree input :(

Append an input after a textarea with Javascript or jQuery

I have a textarea in a DIV that I can not modify.
I need to add an element, an input checkbox, just after the text area with javascript.
This is the code :
<div id="msgrapidosinick"><p class="msguser">My Wall</p>
<form method="post" id="messaggioajaxd" name="frm2">
<textarea class="areamsgnoava" name="messaggio"></textarea>
<input type="hidden" value="1" name="invia" id="invia">
<input type="hidden" value="1" name="riceve" id="riceve">
<input type="hidden" value="/assyrian" name="pagina" id="pagina">
<input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
</form>
</div>
So just after the textarea I need to add an element, that is a input checkbox, when the textarea is clicked.
How do I do that?
Please help me.
Just to let you know my site loads also jQuery 1.3.2
Thank you
You can use the aptly-named after() method:
$("textarea[name=messaggio]").click(function() {
$(this).after("<input type='checkbox' name='yourCheckBoxName' />");
});
If you want to avoid creating the check box if it already exists, you can do something like:
$("textarea[name=messaggio]").click(function() {
var $this = $(this);
if (!$this.next(":checkbox").length) {
$this.after("<input type='checkbox' name='yourCheckBoxName' />");
}
});
Presuming you only want the checkbox created on the first click to the textarea, you could do something like this:
$("#messaggioajaxd textarea").click(function(){
if ($('#createdCheckbox').length==0){
$('<input />').attr('type','checkbox').attr('id','createdCheckbox').insertAfter($(this));
}
});
Example on jsfiddle
Niklas beat me to it but here is what I was going to suggest...
Demo: http://jsfiddle.net/wdm954/ppnzf/1/
$('textarea.areamsgnoava').click(function() {
if ($('input.new').length == 0) {
$(this).after('<input type="checkbox" class="new" />');
}
});
I think that some IE version will not like that you add a field dynamically. If you can add an element to the form, may be you could change the form totally, and inject it as a new form instead, using div.innerHTML or using the DOM.
And add the checkbox in the original HTML as hidden, and show it if the textarea is clicked.
eg:
<div id="msgrapidosinick"><p class="msguser">My Wall</p>
<form method="post" id="messaggioajaxd" name="frm2">
<textarea class="areamsgnoava" name="messaggio"></textarea>
<input type="checkbox" name="checkBox" id="checkBox" style="display:none">
<input type="hidden" value="1" name="invia" id="invia">
<input type="hidden" value="1" name="riceve" id="riceve">
<input type="hidden" value="/assyrian" name="pagina" id="pagina">
<input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
</form>
</div>
Then if you have the reference of the textarea DOM node:
textarea.onfocus = function(ev){
var ta = ev.target || ev.srcElement;
ta.form.checkBox.removeAttribute('style');
}
Or using jQuery and focus.

Categories