Javascript hide after click - javascript

I use this code to show a form after a link is clicked:
$(function () {
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
});
});
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
Now I need the link "msg" to disappear, what would the code look like? I'm totally new in js
UPDATE:
<script language="javascript" type="text/javascript">
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
</script>
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }

What is the problem in saying hide like after show the form like bellow
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
DEMO

Related

jcryption form submit not working with button click

I am using jcryption for encrypting the form.It works fine if i use submit button in form. Instead if i use button and submit the form manually my jcryption method is not getting called.
below is my code
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#login").bind('click', function(){
document.authenticatorform.username.value=$("#username").val();
document.authenticatorform.password.value=$("#password").val();
alert('outer hello');
$("#authenticatorform").jCryption({
getKeysURL:"<%=request.getContextPath()%>/keypairrequest",
beforeEncryption:function() {
alert('inner hello');
document.authenticatorform.submit()
return true; },
encryptionFinished:function(encryptedString, objectLength) {return true;}
});
});
});
</script>
<body>
<form:form method="post" action="login.htm" name="authenticatorform" id="authenticatorform">
<input type="hidden" name="username"/>
<input type="hidden" name="password"/>
</form:form>
<input type="button" id="login"/>
</body>
</html>
In the code only outer alert is printing.
Is it possible to call jcryption in other than submit button?
Any help will be greatly appreciated!!!!!
Try using on click function instead of bind
Try this:
$("#login").on('click', function(){
//your codes goes here
}

why doesn't listener activate?

I have the following html:
<form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post">
<input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения">
<input type="button" name="addMoney" value="Пополнить" class="btn">
</form>
and following js:
$(function () {
$('#OutSum').keypress(function (e) {
if (e.which == 13) {
alert(2);
return false;
}
});
$("input[name='add-money']").on("click",function(){alert(1);});
});
when I click on button - listener doesn't activate.
What do I wrong ?
JSFIDDLE
change add-money to addMoney in the line $("input.... So it should become:
$("input[name='addMoney']").on("click", function () {
alert(1);
});
Because you gave your input a name of addMoney in your HTML but in your JS, you are trying to access an input with a name of add-money.

jquery custom div to confirm delete action

I have this jquery to delete a customer comment.
my problem is in "if(confirm" part. I want to show a div asking if user is sure about deleting this comment. not just a browser default alert box.
how can I do this?
var Progressajax = false;
$(document).ready(function() {
$(".delete_post").on('click',function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var I = element.attr("id");
if(confirm('Are you sure?')){
$.ajax({
type: "POST",
url: "/js-calls/post_delete.php",
data: "id="+I,
success: function(){
Progressajax = false;
$(".volta"+I).fadeOut(600, function(){
$(".volta"+I).remove();
});
}
});
}
return false;
});
});
and is there something that I can improve here?
thanks
One simple solution would be to just utilize jquery .hide() and .show() to hide/show the div element when you need to. You could enhance this to leverage bootstrap as mentioned above to make it more of a visually appealing modal dialog, but this should give you an idea of how the code should work.
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="Delete Item" id="btnDelete"/>
<div id="confirmBox">
<p>Are you sure you want to delete this record?</p>
<br />
<input type="button" value="Yes" id="btnYes"/>
<input type="button" value="No" id="btnNo" />
</div>
<script type="text/javascript" src="jQuery_v1.10.2.js"></script>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
$(document).ready(function () {
$('#confirmBox').hide();
$('#btnDelete').on('click', function (e) {
$('#confirmBox').show();
});
$('#btnYes').on('click', function (e) {
//Do Delete Action Here
alert("Item Deleted");
$('#confirmBox').hide();
});
$('#btnNo').on('click', function (e) {
//Cancel Action Here
alert("Action Cancelled");
$('#confirmBox').hide();
});
});

Jquery click, show and hide function

please help me with my snippet.. I have this code and I don't know what is wrong.. This is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
When I click next It seems does not go to the next form.. thank you all.
This may be due to some missing attibutes of your form
HTML
<form id="krishna">
<input type="text" readonly value="krishna" />
<br />
<button type='button' id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" />
<br />
<button type='button' id="prev">Previous</button>
</form>
Script
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function () {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function () {
$("#radha").hide();
$("#krishna").show();
});
});
check here
You need to prevent the default action, which is the form submit. When you prevent the default action from happening, you will see the desired result
Check this fiddle
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function (e) {
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function (e) {
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
P.S I am not sure why you are still using jquery 1.3.x.
Also, check the fiddle for the updated HTML
Because it is trying to submit the form. So you need to make that button type to button. It is "submit" by default in a form.
JSFidle Demo
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>
Your code is fine but What is happening here that your submit button required post request. So you can prevent this behavior by e.preventDefault() function of jquery. I have updated the jquery code as below.
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function(e){
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function(e){
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
visit the following link to get demo on jsfiddle :
http://jsfiddle.net/4N95Q/
This is how I did it.
http://jsfiddle.net/GnzWZ/2/
$('form button').click(function(e){
$("#radha, #krishna").toggle();
return false;
});
Notes:
return false is the jquery solutions for preventdefault.
You can simplify your selectors and optimize your code a little more.
Avoid making style changes that should be originally made in CSS.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</div>
<div id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
console.log("next click");
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
Working fine if you change
form
in the
div

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially
You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements
try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});
Here's an example using toggle:
http://jsfiddle.net/x5qYz/
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});
$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});
Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.

Categories

Resources