Hiding and showing div in Jquery - javascript

I want to Hide a div On a button click. Here I am having 2 divs (Login and container). When the page loads, container will be hidden. And On click on a #submit button, I want to show the container div and hide the Login div.
The problem is Now login page is showing when the page loads, but After clicking the button I cannot make the div hide or show
Javascript:
<script>
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
</script>
HTML:
<div id="login" >
<div id="loginformcontainer">
<form>
<label> Username:
<input type="text" name="uname">
</label>
<label> Password:
<input type="password" name="pwd">
</label>
<div class="buttons1">
<button type="button" id="submit" value="Login" class="btn">
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
<div>
<div id="container" style="display: none;">
<p> Index Page</p>
</div>

Write your code in document.ready function so it work,
$(document).ready(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
or, its shorthand,
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
for changing its visibility every time you can use toggle() function like,
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container, #login').toggle();
});
});

See if this is the issue, you have not a closing </div> tag here:
</div>
<div> //<----------------here you can see an opening tag instead
<div id="container" style="display: none;">
put a closing </div> above.
and try putting your script in doc ready:
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});

As it is a submit button handling the forms, submit event might be more useful. In this way you can validate and prevent from submitting.
Please check the jQuery docs for submit.

Look on the demo
$('#container').hide();
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
})
I believe that you not declare the <div id="container" ></div>
Write your script in document.ready inside the <script> function so it work...
Or you can't declare the library of Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Your html
<div id="signIn" >Sign In</div>
<div id="login" >
<div id="loginformcontainer">
<form>
<label> Username:
<input type="text" name="uname">
</label>
<label> Password:
<input type="password" name="pwd">
</label>
<div class="buttons1">
<button type="button" id="submit" value="Login" class="btn">
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
<div>
Your Jquery
$('#login').hide();
$('#signIn').click(function() {
alert("try");
});
$("#submit").click(function() {
$('#login').fadeOut();
//do your code
});
Upon page loads, the login div will hide and if you click the sign in then login div will just fade in. If the user clicks the submit button, before you hide the login div, make sure you will validate the user action. Refer to jquery documentation for further explanation.

Isn't submit button causing postback and thus you're loosing css style set by javascript.

Related

Retrieve data after pressing submit button

<div class="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</div>
How to retrieve data in textarea field after clicking on submit button. Using jquery, ajax?
This code should work:
function getdata(Event){
Event.preventDefault()
let chatInput = $('#chat-input').val();
$('#result').text(chatInput)
}
$('#message-send').click(getdata);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="chat-input-holder"> <!-- replace div with form -->
<textarea class="chat-input" id="chat-input"></textarea>
<input type="submit" value="Send" id="message-send" class="message-send"/>
</form>
<p> for the example we will place the text on the div bellow. but use the data however you like</p>
<div id='result'>
</div>
Note that I changed the div tag into a form tag, and added some IDs.
You can find here a solution using jQuery. The output is currently store in a div with id="out", you can customize the code.
document.forms["chat-input-holder"].addEventListener('submit', e => {
e.preventDefault();
let text = $(".chat-input").val();
$("#out").html(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</form>
<div id="out"></div>

How not to lose Div focus when inside button is clicked

Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>
you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});

Change submit button to close button

How can i change behaviour of button if form submit was successful?
<form method="post" enctype="multipart/form-data" style="margin: 0;" id="frmGenerate">
<div class="clearfix">
<div class="input-group">
<input type="text" placeholder="Customer Name:" name="CustomerName">
<input type="text" placeholder="Generated Url:" name="CustomerUrl" readonly="readonly" />
</div>
</div>
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
</div>
</div>
</form>
And here is my JS code:
$('#frmGenerate').submit(function(e) {
var clientName = $(this).find('input[name="CustomerName"]').val();
$.ajax(
{
url: '#Url.Action("GenerateToken","Admin")',
type: 'GET',
data: { customerName: clientName },
success: function(response) {
if (response.result) {
$('#frmGenerate').find('input[name="CustomerUrl"]').val(response.message).select();
$('#frmGenerate').find('button.btn').text('Close');
} else {
alert(response.message);
}
}
});
e.preventDefault();
});
This is modal windows, which i open to generate token. When it's generated successful then i set generated token in modal input and change text of button to close, but i don't know how to change button's behaviour.
Better approach would be not to change existing button, but hide it and show another.
HTML:
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
<button type="button" class="btn btn-close hide">Close</button>
</div>
</div>
JS:
$('#frmGenerate').find('.btn').hide();
$('#frmGenerate').find('.btn-close').show();
Depends on what type of button you are using. Button must be used like: <button></button> Not like <button/>
And then use:
$(".btn").html('Close');
you can change attribute of button
$('#frmGenerate').find('button.btn').attr('type', 'button');
and then:
$('#frmGenerate').find('button.btn').on('click', function(){ /*close function */});
I see you have changed the text of your button to 'Close' after the form has been submitted. So the remaining part is the jQuery that handles a click event on the button.
....
$('.btn').click(function(){
var buttonText = $(this).val();
if(buttonText === 'Close'){
//code when close button is clicked
}else if(buttonText === 'Generate'){
//code when Generate button is clicked...
}
});//end button.click function
And I would use input type='button' or button than input type='submit'. Why dont you submit form using ajax as well? much better.
Hope this helps...

Local-storage not showing variables until after page reload

See it live here: http://evanwknight.com/4240/#about. The variables go into local storage, but not until you click send message, then refresh the page.
<form id="form-one" name="form-one">
<div class="form-group-one">
<textarea class="names" id="message" rows="1">Hey Evan! ; )</textarea>
</div><br>
<button class="btn btn-success" id="submit" type="submit">Send Message</button>
</form>
// where the variables show
<div class="messages" id="onee">
<span class="bubble you" id="displayMessage"></span>
<div id="myMessage">
<span class="MYbubble me">Hey there! <img src="img/battery.png" width="15px"></span>
</div>
// js
<script type="text/javascript">
$(document).ready(function () {
$('.messages').hide();
$('#submit').click(function (e) {
e.preventDefault();
$('#onee').show();
$('#myMessage').fadeIn(2000);
$('#form-one').hide();
$('#form-two').show();
var displayMessage = $('#message').val();
localStorage.displayMessage = displayMessage;
});
$('#displayMessage').html(localStorage.displayMessage);
});
</script>
It's not showing up till after the reload because you're only setting it after the form is submitted.
You would need to put
$('#displayMessage').html(localStorage.displayMessage);
into the click event as well as after you set it.
...
localStorage.displayMessage = displayMessage;
$('#displayMessage').html(localStorage.displayMessage);
});
$('#displayMessage').html(localStorage.displayMessage);

show form field on clicking a link with javascript/jquery

How can I show a form field by clicking a link , i want to show the field (with jquery/javascript) on samee place of link, so that link disappears and form box appears? Thanks.
Hey, here's a simple example:
CSS:
.myclassname .form{display:none;}
HTML:
<div class="myclassname">
Link
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
</div>
</div>
jQuery:
$(function(){
$('.myclassname .mylink').click(function(){
$(this).hide();
$('.myclassname .form').show();
return false;
});
});
Cheers
G.
Here is the simple code by using HTML and JavaScript.
<body>
MY
<div id="myform" style="display:none">
<form>
<label>Name</label>
<input type="text">
<input type="submit">
</form>
</div>
<script>
function myfunction(){
document.getElementById("myform").style.display = "block";
document.getElementById("mylink").style.display = "none";
}
</script>
</body>
Thank's
Put the link in a div-element. On clicking the link, empty the div and append the form box.

Categories

Resources