Show Hide div is successfull but page refresh on click. razor - javascript

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>
}

Related

Why does HTML say that my variable is not defined?

When I try to use the variable, it says it's not defined (error: "ReferenceError: hufc1 is not defined
at HTMLInputElement.onclick", this worked in my old code but not anymore. The code below is the full code to tell you what im trying to do.
<p id="redirect" style="display: none"><font color="32CD32"><em>You have entered the right Log In Infromation and You will be redirected into the document soon.</em></font></p>
<iframe id="embed" style="display: none"src="https://docs.google.com/document/d/1wZ9WVpkJAjdYVIyGEhgRBaEHulVKetOol17tizUVyLM/edit?usp=sharing" height='1080' width='1920'></iframe>
<p id="loginuser" style="display: block">USERNAME:
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">PASSWORD:
<input type="password" name="dasnk2">
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick=javascript:validate(text1.value,"Harrison",dasnk2.value,"88888888a") onclick=javascript:validate(text1.value,"Isaac",dasnk2.value,"IsABitch") onclick=javascript:validate(text1.value,"Adam",dasnk2.value,"faa222014") onclick=javascript:validate(text1.value,"Kelvin",dasnk2.value,"six921six921") >
<script>
function validate(text1,dasnk2,text3,text4) {
if (text1 === dasnk2 && text3 === text4) {
var redirect = document.getElementById('redirect');
var embed = document.getElementById("embed");
redirect.style.display = "block";
embed.style.display = "none";
setTimeout(function() {
embed.style.display = "block";
redirect.style.display = "none";
loginuser.style.display = "none";
loginpass.style.display = "none";
login.style.display = "none";
}, 5000);
} else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>```
If you want to keep your solution, you can pass value of input tag as parameter to function like below
onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"IsABitch")
function validate(text1,dasnk2,text3,text4) {
if (text1 === dasnk2 && text3 === text4) {
var redirect = document.getElementById('redirect');
var embed = document.getElementById("embed");
redirect.style.display = "block";
embed.style.display = "none";
setTimeout(function() {
embed.style.display = "block";
redirect.style.display = "none";
loginuser.style.display = "none";
loginpass.style.display = "none";
login.style.display = "none";
}, 5000);
} else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
<p id="redirect" style="display: none"><font color="32CD32"><em>You have entered the right Log In Infromation and You will be redirected into the document soon.</em></font></p>
<iframe id="embed" style="display: none"src="" height='1080' width='1920'></iframe>
<p id="loginuser" style="display: block">USERNAME:
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">PASSWORD:
<input type="password" name="dasnk2">
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Harrison",document.getElementsByName("dasnk2")[0].value,"88888888a") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"IsABitch") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Adam",document.getElementsByName("dasnk2")[0].value,"faa222014") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Kelvin",document.getElementsByName("dasnk2")[0].value,"six921six921") >
You can not get text1.value and dasnk2.value inline. You need move to a javascript function like below.
function validate(){
var name = document.getElementsByName("text1")[0].value;
var pass = document.getElementsByName("dasnk2")[0].value;
if((name == "test" && pass == "test") || (name == "test1" && pass == "test1") || (name == "test2" && pass == "test2") || (name == "test3" && pass == "test3")){
alert('Valid');
}else{
alert('Invalid');
}
}
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">Password:
<input type="password" name="dasnk2">
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit"
onclick="validate()">

Make a div invisible in JavaScript after confirmation

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';
}
}

Show div upon submit

I am wanting to show a div (depending on the the value input) but I am seeing no errors in the console to point me in the right direction but there is something wrong with my code:
<style type="text/css">
#outputOne{display: none;}
#outputTwo{display: none;}
#outputThree{display: none;}
</style>
</head>
<body>
<form method="POST" onsubmit="return showResults()">
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<input type="submit" id="submit" />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
<script>
function showResults(){
if(value <= 100){
document.getElementById('outputOne').style.display = "block";
return true;
} if(value > 500){
document.getElementById('outputTwo').style.display = "block";
return true;
}if(value > 10000){
document.getElementById('outputThree').style.display = "block";
return true;
}
}
</script>
If you want to see something you should prevent submit by returning false instead of true because now the form will be submited in all the cases and you will never see the div shown since the page will be refreshed.
Hope this helps.
You need to define value variable
And then return false on every if so that div will show on submit otherwise page will refresh and all default setting will be shown
Ok, so there are a few problems:
You never define value inside that function... you need to do that. Second, a form submission will refresh the page, undoing any DOM changes you did. This can be fixed by changing it to a button which calls your function. Here's an updated version of your code that works:
<style type="text/css">
.hide{display: none;}
.show{display: block;}
.submit{height:20px; width: 100px;}
</style>
</head>
<body>
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<button id="submit" class="submit" onClick="showResults()"></button>
<div id="outputOne" class="hide" >Value One</div>
<div id="outputTwo" class="hide" >Value Two</div>
<div id="outputThree" class="hide" >Value Three</div>
<script>
function showResults(){
var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value);
if(value <= 100){
document.getElementById('outputOne').className = "show";
} else {
document.getElementById('outputOne').className = "hide";
}
if(value > 500){
document.getElementById('outputTwo').className = "show";
} else {
document.getElementById('outputTwo').className = "hide";
}
if(value > 10000){
document.getElementById('outputThree').className = "show";
} else {
document.getElementById('outputThree').className = "hide";
}
}
</script>
I've also switched the css to use classes, which is a bit more flexible and better practice.
Credit to Zakaria Acharki and mohsin azeem for spotting the form error causing a refresh, and to the always-helpful charlietfl for that and for pointing out my own silly error for the submit button.
Try substituting oninput event for onsubmit event
<head>
<style type="text/css">
#outputOne {
display: none;
}
#outputTwo {
display: none;
}
#outputThree {
display: none;
}
</style>
<script>
function showResults() {
var value = this.value;
console.log(value);
if (value <= 100) {
divs[0].style.display = "block";
divs[1].style.display = divs[2].style.display = "none";
}
if (value > 500) {
divs[1].style.display = "block";
divs[0].style.display = divs[2].style.display = "none";
}
if (value > 10000) {
divs[2].style.display = "block";
divs[0].style.display = divs[1].style.display = "none";
}
}
window.onload = function() {
divs = document.querySelectorAll("div[id^=output]");
Array.prototype.forEach.call(document.forms[0].querySelectorAll("input")
, function(el) {
el.setAttribute("placeholder", "enter a number");
el.oninput = showResults;
});
}
</script>
</head>
<body>
<form method="POST">
<input type="text" id="valueOne" />
<br />
<input type="text" id="valueTwo" />
<br />
<input type="text" id="valueThree" />
<br />
<input type="submit" id="submit" disabled />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
</body>

Radio button clears text boxes

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>

Show/Hide divs, "one by one" and "all at once"

I'm using this to show/hide some divs, at the end I have a button to show the divs one by one.
How can I have a second button to show/hide all of them at once without messing too much with the HTML?
Basically each div contains an input field, so the user clicks the "Add one more" button to get an extra field. By default, all fields are hidden so I need a button to show them all at once (I have 14 divs to show/hide).
Any help will be appreciated.
Javascript
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
HTML
<table>
<tr>
<td style="width: 150px;">
<div id="box1" style="display: none;">First</div>
</td>
<td style="width: 150px;">
<div id="box2" style="display: none;">Second</div
</td>
<td style="width: 150px;">
<div id="box3" style="display: none;">Third</div
</td>
</tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');">
Here's the basic functionality, though it needs some refinement:
var d = document,
table = d.getElementsByTagName('table')[0],
divs = table.getElementsByTagName('div'),
toggle = d.getElementById('toggleButton'),
allToggle = d.getElementById('allToggle'),
count = 0;
function toggles(){
var elem = divs[count];
elem.style.display = 'block';
count++;
}
toggle.onclick = function(){
toggles();
};
allToggle.onclick = function(){
if (allToggle.getAttribute('data-show') == 1){
for(var i=0,len=divs.length;i<len;i++){
divs[i].style.display = 'none';
allToggle.setAttribute('data-show',0);
allToggle.value = 'Show all';
}
}
else {
for(var i=0,len=divs.length;i<len;i++){
divs[i].style.display = 'block';
allToggle.setAttribute('data-show',1);
allToggle.value = 'Hide all';
}
}
}
​
JS Fiddle demo.
The above based on the following HTML:
<table>
<tr>
<td style="width: 150px;">
<div id="box1" style="display: none;">First</div>
</td>
<td style="width: 150px;">
<div id="box2" style="display: none;">Second</div>
</td>
<td style="width: 150px;">
<div id="box3" style="display: none;">Third</div>
</td>
</tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" />
<input id="allToggle" type="button" value="Show all" />​
have a button with a function that selects all of the divs by a class (that you'll have to add) and hides/shows them. If you just want one button you'll have to remember your state, which in the example below I do with a global.
<button id="showhideall">
$(document).ready(function(){
var allshowing = true;
$("#showhideall").click(function(){
alert(allshowing);
if(allshowing){
$(".foo").hide();
allshowing=false;
} else {
$(".foo").show();
}
});
}​);​
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
function toggle3(contentDiv) {
if (contentDiv.constructor == Array) {
for(i=0; i < contentDiv.length; i++) {
toggle2(contentDiv[i]);
}
}
else {
toggle2(contentDiv);
}
}
function toggle2(showHideDiv) {
var ele = document.getElementById(showHideDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
<input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');">
<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['box1', 'box2', 'box3']);">

Categories

Resources