How should I bind the Id i am getting in a variable #item.ArticleId to a JavaScript code which gets the id dynamically?
My use case is that I have to show the Comment TextBox at the click on the Add A Comment Button.
Following is the code on how I am getting the Article ID:
<span id="addComment" onclick="AddaComment()"><i class="fa fa-comment" aria-hidden="true" ></i> Add a Comment</span>
<div id="Comment(#item.ArticleId)" style="display:none;">
<input type="hidden" name="ArticleId" id="ArticleId" />
<input type="text" name="Comments" />
<input type="submit" class="btn add-comment" value="Add Comment">
</div>
Below is my code for JavaScript:
function AddaComment() {
var x = document.getElementById("Comment()");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
This is how I solved it:
function AddaComment(id) {
var x = document.getElementById("Comment_"+id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Related
This question already has answers here:
How to prevent form from being submitted?
(11 answers)
Closed 1 year ago.
I've been trying to have a password only form that shows a hidden div on the same page as the form when the password is correct.
I don't want to reload either but not sure how to do that.
function checkPswd() {
var confirmpassword = "admin";
var password = document.getElementById("pass").value;
if (password == confirmpassword) {
document.getElementById('hidden');
if (x.style.display === "none") {
x.style.display = "block";
} else {
alert('tryagain');
x.style.display = "none";
}
};}
.hidden {
display: none;
}
<form method="post">
<label for="pswd">enter password</label>
<input type="password" id="pass">
<input type="button" value="go" onsubmit="checkPswd();" /></form>
<div class="hidden">
<p>this part I want hidden from people who don't know the password</p>
</div>
I'm pretty sure the javascript is wrong but is there another way to do this?
Few things:
You forgot to assign the returned value of document.getElementById('hidden') to x
A button does not have a submit event. You are perhaps looking for the click event
There is no element with the hidden id. You are mixing it up with the element with the hidden class.
function checkPswd() {
var confirmpassword = "admin";
var password = document.getElementById("pass").value;
if (password == confirmpassword) {
var x = document.querySelector('.hidden');
if (x.style.display === "none") {
x.style.display = "block";
} else {
alert('tryagain');
x.style.display = "none";
}
};
}
.hidden {
display: none;
}
<form method="post">
<label for="pswd">enter password</label>
<input type="password" id="pass">
<input type="button" value="go" onclick="checkPswd();" /></form>
<div class="hidden">
<p>this part I want hidden from people who don't know the password</p>
</div>
I have a button where it will remove the readonly attribute of input and also will show the hidden buttons.
The problem is, I need to click my button 2x so that I can do my 2nd function. My target is, how can I achieve the 1 click button only and it'll do my both functions? Remove readonly and show the hidden button.
Thank you
Fiddle: http://jsfiddle.net/rain0221/qfjar0x1/14/
//removing readonly attribute of input
$(document).ready(function() {
$('#btnEditAbout').click(function() {
var Aboutfields = document.getElementsByClassName('abt');
for (var x = 0; x < Aboutfields.length; x++) {
Aboutfields[x].removeAttribute('readonly', 'readonly');
}
});
//showing hidden buttons when edit information is clicked
var btnEditAbout = document.getElementById('btnEditAbout'),
Removeemp = document.getElementById('Removeemp');
Addemp = document.getElementById('Addemp');
function toggle() {
if (btnEditAbout.style.display === "block") {
btnEditAbout.style.display = "none";
Addemp.style.display = "block";
Removeemp.style.display = "block";
} else { // switch back
btnEditAbout.style.display = "block";
Addemp.style.display = "none";
Removeemp.style.display = "none";
}
}
btnEditAbout.onclick = toggle;
});
#btnEditAbout {
display: block;
}
#Addemp {
display: none;
}
#Removeemp {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>
You cannot click a hidden button
You CAN use jQuery more than you do
$(function() {
$('.toggle').on("click", function() {
const edit = this.id === "btnEditAbout"; // what did we click
$("#Addemp").toggleClass('hide',!edit)
$("#Removeemp").toggleClass('hide',!edit)
$("#btnCancel").toggleClass('hide',!edit)
if (edit) $(".abt").removeAttr('readonly');
else $(".abt").attr('readonly',true);
});
});
.hide { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right toggle" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button" class="hide">Add Record </button>
<button id="Removeemp" type="button" class="hide">Remove Record </button>
<button id="btnCancel" type="button" class="hide toggle">Cancel</button>
You can simply call the toggle(); inside the click event of your edit button
//removing readonly attribute of input
$(document).ready(function() {
$('#btnEditAbout').click(function() {
var Aboutfields = document.getElementsByClassName('abt');
for (var x = 0; x < Aboutfields.length; x++) {
Aboutfields[x].removeAttribute('readonly', 'readonly');
}
toggle(); // call the function here
});
//showing hidden buttons when edit information is clicked
var btnEditAbout = document.getElementById('btnEditAbout'),
Removeemp = document.getElementById('Removeemp');
Addemp = document.getElementById('Addemp');
function toggle() {
if (btnEditAbout.style.display === "block") {
btnEditAbout.style.display = "none";
Addemp.style.display = "block";
Removeemp.style.display = "block";
} else { // switch back
btnEditAbout.style.display = "block";
Addemp.style.display = "none";
Removeemp.style.display = "none";
}
}
btnEditAbout.onclick = toggle;
});
#btnEditAbout {
display: block;
}
#Addemp {
display: none;
}
#Removeemp {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>
You are using onclick event twice. You can combine then into one single event like below.
Also rather than checking btnEditAbout.style.display you could check for the window.getComputedStyle of same node. This will check the inline style aswell as the css styles.
Working Example
$(document).ready(function () {
var btnEditAbout = document.getElementById('btnEditAbout');
var Removeemp = document.getElementById('Removeemp');
var Addemp = document.getElementById('Addemp');
function toggle() {
var Aboutfields = document.getElementsByClassName('abt');
for (var x = 0; x < Aboutfields.length; x++) {
Aboutfields[x].removeAttribute('readonly', 'readonly');
}
const computedStyle = window.getComputedStyle(btnEditAbout);
if (computedStyle.display === "block") {
btnEditAbout.style.display = "none";
Addemp.style.display = "block";
Removeemp.style.display = "block";
} else { // switch back
btnEditAbout.style.display = "block";
Addemp.style.display = "none";
Removeemp.style.display = "none";
}
}
btnEditAbout.onclick = toggle;
});
#btnEditAbout {
display: block;
}
#Addemp {
display: none;
}
#Removeemp {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i
class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>
How to show or display if the Monthly() and Annual() functions are being invoked?
Wanted to display:
<input style="display:none;" id="payment_950" type="text"
name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00"
class="form-control" readonly>
Code :
//show and hide payment subscription
function Monthly() {
var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
}
}
//show and hide payment subscription
function Annual() {
var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
if (y.style.display === "none") {
x.style.display = "none";
y.style.display = "block";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
}
}
<input onclick="Monthly()" value="Monthly Subscription" id="monthly" name="payment_description" type="checkbox">
<span class="checkmark"></span>
<input onclick="Annual()" value="Annual Membership" id="annual" name="payment_description" type="checkbox">
<span class="checkmark"></span>
<input style="display:none;" id="payment_750" type="text" name="payment_amount" placeholder="₱750.00" class="form-control" readonly>
<input style="display:none;" id="payment_200" type="text" name="payment_amount" placeholder="₱200.00" class="form-control" readonly>
<input style="display:none;" id="payment_950" type="text" name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00" class="form-control" readonly>
Try this :
var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
var monthly = document.querySelector('#monthly');
var annual = document.querySelector('#annual');
//show and hide payment subscription
function Monthly() {
let bothChecked = check();
if (!bothChecked) {
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
}
}
//show and hide payment subscription
function Annual() {
let bothChecked = check();
if (!bothChecked) {
if (y.style.display === "none")
y.style.display = "block";
else
y.style.display = "none";
}
}
function check() {
if (monthly.checked && annual.checked) {
x.style.display = "none";
y.style.display = "none";
z.style.display = "block";
return true;
}
z.style.display = "none";
return false;
}
<input onclick="Monthly()" value="Monthly Subscription" id="monthly" name="payment_description" type="checkbox">
<span class="checkmark">Monthly</span>
<br/>
<input onclick="Annual()" value="Annual Membership" id="annual" name="payment_description" type="checkbox">
<span class="checkmark">Annual</span>
<input style="display:none;" id="payment_750" type="text" name="payment_amount" placeholder="₱750.00" class="form-control" readonly>
<input style="display:none;" id="payment_200" type="text" name="payment_amount" placeholder="₱200.00" class="form-control" readonly>
<input style="display:none;" id="payment_950" type="text" name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00" class="form-control" readonly>
I am using getElementById to toggle the display of a block in html. The block I am toggling is wrapped in a div like so:
<div id="SunMotion">
<br>
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
This is activated using the button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
The button calls the function in javascript which displays the div using its Id:
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
This works fine until I try to do the same thing with a different block. with a new function specific to that button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
<button class="button button1" onclick="Hologram()">
Hologram Shapes
</button>
<br>
<div id="Hologram">
<br>
<p>
Toggle the switch to run the Hologram program
</p>
<label class="switch">
<div class="grid-container">
<input id="check12" type="hidden">
<div class="grid-container">
<div class="item1"><button id="check12" id="grd" id="script1" onclick="check12()" data-fileName="red.py">Red</button></div>
<input id="check13" type="hidden">
</label>
</div>
<br>
<div id="SunMotion">
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
<br>
<script>
document.getElementById("Hologram").style.display = 'none';
function Hologram() {
var x = document.getElementById("Hologram");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("Hologram").checked = false;
}
}
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
</script>
if you want use that function on another div, you need to use getElementByClass instead. you can check it Here
or, if you still want to use id, just send that id as parameter.
function SunMotion(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById(id).checked = false;
}
}
and, to call that just paste an Id to that function.
<button class="button button1" onclick="SunMotion('SunMotion')">
Motion of the Sun
</button>
Sorry, Typo. you can check my recheck my answer. my Edit is :
onclick="SunMotion('SunMotion')"
Please noted that I changing " by ' in parameter.
Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>
Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>
You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.
Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>