Jquery Hide/show not working - javascript

I am just learning Jquery, I wanted to know if anyone can tell me what is wrong with my script. When a user hits submit on the form, I want 2 two div tags to open and the one containing the form to close.
Thanks!
This is the script
<script>
$('#form_container').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
These are the div and form
<div id="mydivhide1" style="visibility:hidden">1111</div>
<div id="mydivhide2" style="visibility:hidden">2222</div>
<div id="form_container">
<form id="form_710370" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>

Submit your form not div like,
$('#form_710370').submit(function(){
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
And hide your div's by using display:none not by visibility:hidden like,
<div id="mydivhide1" style="display:none">1111</div>
<div id="mydivhide2" style="display:none">2222</div>
Updated if your script is written before your DOM elements then use $(function(){...}) like,
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});

Here's a fiddle: http://jsfiddle.net/cdJU9/1/
I've added CSS to hide the top divs, I think your inline style of visibility hidden was overriding the JS.
CSS
#mydivhide1, #mydivhide2{ display: none; }
HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
The fiddle throws an error for some reason but you get the idea ?

You can do like this, please focus your syntax with semicolon at the end.
<script>
$('#saveForm').click(function(){
$(this).parent().hide();
$('#mydivhide1, #mydivhide2').show();
});
</script>

it should be
<script>
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>

it should be:
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
})

You've got a typo in there:
<form id="form_710370" method="post" convert.php">
should be
<form id="form_710370" method="post" action="convert.php">
And for the JS:
$('#form_710370').submit(function() {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
})
edit: http://jsfiddle.net/GZEmw/

Related

Get the hidden input when clicking on textbox

i need a little help about how to do it..
I have done lot of search but haven't find it.. So please if someone can help me out.
I have this little code here:-
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" style="display: none;">
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>
As you can see i added style="display: none;" in the div where is situated the submit button.
I don't have lot of knowledge in jQuery or javascript but i need a simple javascript code that will change the "display:none" to "display:block" when someone click on the textbox..
Please i need your help, thank you very much...
Another way to do this is:
$(function () {
$('#myuniquetextbox').click(function(e) {
$('#whats-new-options').css('display', 'block');
});
});
Try this
$("#myuniquetextbox").on("focus",function(){
$("#whats-new-options").show();
})
Try below code
$("#mytextbox").focus(function() {
// this is when textarea is focused and button should show
$("#whats-new-options").show();
});
​
$("#mytextbox").blur(function() {
// this is when textarea is not focused and button should hide
$("#whats-new-options").hide();
});​
Try using bellow
<script>
$("#myuniquetextbox").click(function(){
$("#aw-whats-new-submit").slideToggle();
});
</script>
$("#aw-whats-new-submit").hide();
$("#myuniquetextbox").click(function() {
$("#aw-whats-new-submit").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" >
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>
you can also do this
$(function () {
$('#myuniquetextbox').on('click',function(e) {
$('#whats-new-options').css('display', 'block');
});
});
Check your code here

jQuery - select child of child of element

I want to select the second div-child of the first div-child of a form.
If I have this html:
<form id="hello"></form>
<form method="get">
<p class="search-box"></p>
<div class="tablenav top">
<div class="alignleft actions bulkactions"> </div>
<div class="alignleft actions"></div>
<div class='tablenav-pages one-page'></div>
</div>
</form>
<div class="tablenav bottom"></div>
..I want to select the second child div of the "tablenav top" div inside the form. And then insert a div next to it.
This is apparently wrong:
jQuery(document).ready(function($) {
$("form div:first-child div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>");
});
edit: I should have specified a few more things - the very first form is inside a hidden div, and the form itself contains a few divs. And the last div also contains a few divs. Apparently this affects what sort of code will work.
Try this
jQuery(document).ready(function($) {
$($("form .tablenav .alignleft")[1]).after("<div class='alignleft actions'><p>New div!</p></div>");
});
Edit: Using eq(1) to get the second element in the array of jQuery objects is a much cleaner way.
jQuery(document).ready(function($) {
$("form .tablenav .alignleft").eq(1).after("<div class='alignleft actions'><p>New div!</p></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="hello"></form>
<form method="get">
<p class="search-box"></p>
<div class="tablenav top">
<div class="alignleft actions bulkactions"> </div>
<div class="alignleft actions"></div>
<div class='tablenav-pages one-page'></div>
</div>
</form>
<div class="tablenav bottom"></div>
You need to use :first as the :first-child looks at all elements within the container, not just the div specified. Also note that nth-child indexes are 1-based, so the div you're looking for is actually nth-child(3). Try this:
$("form div:first div:nth-child(3)").after("<div class='alignleft actions'><p>New div!</p></div>");
Example fiddle
This works for me:
jQuery(document).ready(function($) {
$("form .tablenav > div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>");
});
Check out this
fiddle.
Try this.
$( ".tablenav.top div:nth-child(2)" ).after(your code..)
$("form .tablenav > div:first div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>");
worked for me

html get div tag in many levels

I got class required on div tag, and I want to remove it change function of text field, but I can't get to that div level, please help me to reach this.parent.parent.closest('div')
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange(removeRequired(this, this.parent.parent.closest('div')))/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
It seems that what you want is to add/remove the required class based on whether the input is empty or not.
$('.required').on('change', 'input', function(event) {
// add or remove required class
$(event.delegateTarget)
.toggleClass('required', this.value.length === 0);
});
It will work with the following HTML:
<div class='required'>
<div>
<div>
<input type='text' value='123'/>
</div>
</div>
</div>
It sets up event delegation on the outermost <div> elements and then sets or removes the required class based on the input value.
Demo
You dont have to mess up with javascript and jquery. You can bind the change event with jquery like this,
$(document).ready(function () {
$("input[type='text'] ").change(function () {
$(this).closest(".required").removeClass("required");
});
});
try this
$("input[type=text]").closest('div.required').removeClass("required");
onchange function be
$("input[type='text']").change(function(){
$(this).closest("div.required").removeClass("required");
});
or
$("input[type='text']").change(function(){
$(this).parents("div.required").removeClass("required");
});
Why not easily working with id?
<div id="input-wrapper" class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired(this, $('#input-wrapper'))"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
By the way, if you want to reach the div class='required' with parent, you need 3 levels! Althougth the use of closest() is by far a better answer.
You can try:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired.call(this)"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(){
$(this).parent().parent().parent().removeClass('required');
}
</script>

disable javascript function

I'm have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem
Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle
I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});
I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/

simple append issue with jquery

I have a simple question. My JS code is like this, but when I try to add a new element or content to the <div>, it comes up then goes up quickly. I don't know why.
How can I avoid this?
<head>
$(document).ready(function () {
$('#mybtn').click(function () {
$('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
});
});
</head>
<body>
<form id="form1" runat="server">
<button id ="mybtn">generate code</button>
<div id="main"></div>
</form>
</body>
You should stop the button from Submitting the form by setting the button's type to be that of button.
Example :
<button type="button" id="mybtn">generate code</button>
The default type for a <button> element is submit. Which is causing your <FORM> tag to submit.
Try this:
$('#mybtn').click(function (e) {
e.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
return false;
});
Try with:
$('#mybtn').click(function (event) {
event.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});
preventDefault : If this method is called, the default action of the event will not be triggered.

Categories

Resources