I want to make a div visible when clicking on a button. Button should ask Yes/No confirmation. Div should be visible only when user clicks on 'Yes'.
My code is here
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show Div" onclick="confirm_hide(this)"/>
JavaScript
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else return false;
}
function clicked() {
var name = document.getElementById('name').value;
if(confirm('Hello ' + name + ', great to see you!'))
{
document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!';
document.getElementById('mainDiv').style.display = "none";
}
}
<div id="mainDiv">
<input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
<input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>
<div id="nameDiv"></div>
According to a similar question posted before there is no way to
change the confirm dialogs button.
I would suggest you can use bootstrap modal or jQueryUI.
There is even a workaround in the jQueryUI for this.
Or you can use bootstrap Modal. Here is the link for it
I hope my suggestions help with your problem.
You can do this
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else {
document.getElementById('Mydiv').style.display = 'none';
return false;
}
}
You can do like this also:
function confirm_hide(ele){
if(confirm('Do you wish to hide?')){
document.getElementById('Mydiv').style.display = 'block';
document.getElementById('mainDiv').style.display = 'none';
}
}
<div id="Mydiv" style="display:none;" >Haiii</div>
<div id="mainDiv">
<input type="button" name="answer" value="Show Div" onclick="confirm_hide()"/>
</div>
HTML
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show" class="confirm">
JS
var div = document.getElementById("mydiv");
var button = document.getElementsByClassName("confirm");
button.addEventListener('click',confirm_hide());
function confirm_hide(){
var hide = confirm('Do you wish to hide?');
if(hide == true){
button.style.display = 'none';
div.style.display = 'block';
}
else{
button.style.display = 'block';
div.style.display = 'none';
}
}
Related
I have two radio buttons: Click the first radio button and a three textboxes appear if they start entering information and then change their mind and select the second radio button it does not clear the text they have entered. So what I am trying to figure out is if there is a way make it clear the text from those textboxes when a new radio button (of the same group) is chosen. Any help is greatly appreciated!
http://jsfiddle.net/k0paz2pj/
<input
type="radio"
value="Yes"
name="lien"
id="lien"
onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input
type="radio"
value="None"
name="lien"
id="nolien"
onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input
type="text"
name="lienlname"
id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input
type="text"
name="lienladdress"
id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input
type="text"
name="lienldate"
id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<br>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>
One approach, staying with the plain JavaScript from your question/JS Fiddle demo:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
// getting all the input elements within '#div1' (using a CSS selector):
var inputs = document.querySelectorAll('#div1 input');
// iterating over those elements, using Array.prototype.forEach,
// and setting the value to '' (clearing them):
[].forEach.call(inputs, function (input) {
input.value = '';
});
}
}
JS Fiddle demo.
A marginally more concise form of the above (or, if not more concise, with less repetition):
function showhideForm(lien) {
var isYes = lien.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
JS Fiddle demo.
And, finally, a version that moves away from the obtrusive JavaScript of in-line event-handling (onclick, onchange, etc):
function showhideForm() {
// 'this' in the function is the radio-element to which
// the function is bound as an event-handler:
var isYes = this.value.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
// finding the elements with the name of 'lien':
var lienRadios = document.getElementsByName('lien');
// iterating over those elements, using forEach (again):
[].forEach.call(lienRadios, function (lien) {
// adding a listener for the 'change' event, when it
// occurs the showhideForm function is called:
lien.addEventListener('change', showhideForm);
});
JS Fiddle demo.
References:
Array.prototype.forEach().
document.getElementsByTagName().
document.getElementsByName().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
String.prototype.toLowerCase().
String.prototype.trim().
You can always use this when another radio is checked:
$("#div1 .clearfix input:text").val("");
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
$("#div1 .clearfix input:text").val("");//here use to clear inputs
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
After (hate) comments (kidding) a js approach:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
//js
container = document.getElementById('div1');
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
inputs[index].value = "";
}
}
}
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);" />
<label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);" />
<label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
I am trying to do show and hide div base on radio button click but it can not work perfect.
I am currently using javascript function to control the content display.
This is javascript code :
function udatabase() {
document.getElementById('ifCSV').style.display = "none";
}
function ucsv() {
document.getElementById('ifCSV').style.display = "block";
}
This is my radio button:
<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
<div id="ifCSV" style="display:none">
<input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
</div>
After click on csv, there is no response in html page.
Your javascript onclick function name cannot same with your id name inside input text. You should change one of the name.
Your html code here:
<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
After edited
<input type="radio" name="data" onclick="udatabase()" id="tdatabase"> Database
<input type="radio" name="data" onclick="ucsv()" id="tcsv"> CSV <br/>
This should be work properly after you change the name.
<script type="text/javascript">
window.onload = function() {
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
}
function yesnoCheck() {
var testA=document.getElementById('testAmount').value;
var dola=document.getElementById('fxd').value;
if (document.getElementById('s').checked) {
if(testA>50000){
document.getElementById('ifTSH').style.display = 'block';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
else{
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
}
if (document.getElementById('d').checked) {
if((testA*dola)>50000){
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'block';
document.getElementById('ifUSD1').setAttribute("required", "true");
}
else {
document.getElementById('ifTSH').style.display = 'none';
document.getElementById('ifUSD').style.display = 'none';
document.getElementById("ifUSD1").removeAttribute("required");
}
}
}
I am able to show/hide div onclick successfully.
But onclick div display for a second and page get refresh.
I have use javascript.
Code:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide(#Count);" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
If the submit button is inside a <form> you need to return false from the showHide if you don't want the page to get submitted after clicking on it:
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false; // <-- that's important to prevent the page from submitting
}
</script>
Also please bear in mind that an id attribute cannot start with a number in HTML. So please fix your markup:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="mydiv_#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(id) {
var ele = document.getElementById(id);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false;
}
</script>
It happens because your page is being submitted. Try using <input type="button"...> instead of <input type="submit"...>
Difference here: Difference between <input type='button' /> and <input type='submit' />
And your controls id can't start with a number and must be unique:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="div_#Count" style="display: none;">
<input type="submit" id="reply_#Count" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}
I have a check box. If i select the check box then i want to display a particular div and if it is left unchecked then hide div . Can someone help me regarding this. I have done the code for this and working fine in Firefox. But its not working in IE8/IE9. Why? Can someone help . Thanks In advance.
<script language="javascript">
function showIPAddress(chkbox) {
//var chkbox = document.getElementById("chk1");
if(chkbox.checked == true) {
document.getElementById("div1").style.display = "block";
}
else {
document.getElementById("div1").style.display = "none";
}
}
</script>
<input type="checkbox" id="chk1" name="chk1" value="1" onClick="showIPAddress(this)" /> <b class="account">Test Checkbox</b>
<div id="div1" name="div1" style = "display:block">
<b>IP Address: </b><input name="ip"></input>
</div>
I get it work with a simpler code:
<script>
function showIPAddress(chk) {
document.getElementById("div1").style.display = chk.checked ? "block" : "none";
}
</script>
<input type="checkbox" id="chk1" value="1" onClick="showIPAddress(this);" /> <b class="account">Test Checkbox</b>
<div id="div1" style="display:none;">
<b>IP Address: </b><input name="ip"></input>
</div>
try this:
if(chkbox.checked == true) {
document.getElementById("div1").style.display = "";
}
else {
document.getElementById("div1").style.display = "none";
}
Not much sure but have you tried this :
document.getElementById("div1").style.visibility="visible"/"hidden".
Also instead of onClick it should be onclick.
i have a div tag where i entered sime text. now i want, as the user clicks on the button, a cursor should pop-up and user edit the text. as user clicks on save button the text should displays min the div tag inplace of old text..
my div tag is as:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" type="hidden" onclick="edit1();"/>
Div Tag
</div>
here i want to have a cursor when user clicks edit button and as user ebters text and clicks save the ' div tag ' text should get replaced by new text..
how this can be done using java script..
What you are doing makes no sense from either a technical or semantic view. Just use a textarea.
<textarea id="content" value="sample text" disabled="true" /></textarea>
<input type="button" id="edit" value="edit" onClick="edit()" />
<input type="button" id="save" value="save" onClick="save()" />
function edit() {
document.getElementById('edit').style.display = 'none';
document.getElementById('save').style.display = 'block';
document.getElementById('content').disabled = false;
}
function save() {
document.getElementById('save').style.display = 'none';
document.getElementById('edit').style.display = 'block';
document.getElementById('content').disabled = true;
}
#content {
width: 300px;
height: 200px;
}
#edit, #save {
padding: 2px;
width: 50px;
}
#save {
display: none;
}
Example here
// This sample code is with prompt (popup input) if you want to use textbox, the code to be replaced accordingly.
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" style='display:hidden' onclick="edit1();"/>
<div id="text1"> </div>
</div>
<script>
function button1()
{
document.getElementById ("btndiv").display = '';
}
function edit1()
{
var val = prompt ("Enter some value");
document.getElementById ("text1").innerHTML = val;
document.getElementById ("btndiv").display = 'hidden';
}
</script>
I suggest creating an internal div enclosing just the text, like this:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="editbtndiv" onclick="edit1();" value="edit"/>
<input type="button" id="savebtndiv" onclick="save1();" value="save"/>
<input type="text" id="inputdiv" style="display:none;" />
<div id="divtext"> Div Tag </div>
</div>
Then, to display the input field and hide the text:
var editObj = document.getElementById("editbtndiv");
editObj.style.display = "none";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "block";
var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "block";
var txtObj = document.getElementById("divtext");
txtObj.style.display = "none";
Then user does his job, clicks save and you can hide the input field and show the text:
var editObj = document.getElementById("editbtndiv");
editObj.style.display = "block";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "none";
var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "none";
var txtObj = document.getElementById("divtext");
txtObj.value = divObj.value;
txtObj.style.display = "block";