So basically I have this sign up button which when clicked on expands a hidden form.
What I want to be able to do is when the button is clicked the the first time, then the form should expand as it does at the moment, however I want it so that once the form is expanded, the same button's link should change so the form could be submitted.
As I have it at the moment when I click the button once the form has been expanded, it simply collapses the form back to how it was to start with.
Here is my code:
// jQuery Script that does the toggling for expanding and collapsing the hidden form
<script>
$(document).ready(function(){
$("#button-1").click(function(){
$("#special1").toggle()
})
})
</script>
//CSS rule for hiding the form (collapse)
<style>
#special1{ display: none }
</style>
// HTML form
<center>
<form action="form_process.php" id="special1">
<div>
<input type="text" class="input" name="forename" size="20" maxlength="40" placeholder="First Name"/> <br />
<input type="text" class="input" name="surname" size="20" maxlength="40" placeholder="Surname"/> <br />
<input type="email" class="input" name="email" size="20" maxlength="40" placeholder="Email"/> <br />
<input type="password" class="input" name="password" size="20" maxlength="40" placeholder="Password"/> <br />
<br/>
</form>
// This is the button that expands and collapses the above form
<input type="submit" value="Sign Up" id="button-1" class="submit"/>
</center>
In the click event, check the visibility of the form and accordingly, display or submit it.
This should work -
$(document).ready(function(){
$("#button-1").click(function(){
if($("#special1").is(":visible")){
$("#special1").submit();
}else{
$("#special1").show();
}
})
})
You should unbind the click event after the first click.
$("#button-1").click(function(){
$("body").off("click","#button-1");
$("#special1").toggle();
})
$(document).ready(function(){
$("#button-1").click(function(e){
e.preventDefault();
$("#special1").toggle()
})
});
or
$(document).ready(function(){
$("#button-1").click(function(e){
$("#special1").toggle();
return false;
})
});
Related
I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.
I have the following HTML code
<div class = "login">
<form>
<input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br>
<input type="password" id="password" name="password" placeholder="Password" style="text-align:center"> <br> <br>
<input onclick="loginButton();" name="login_btn" id="login_btn" type="submit" value="Login">
</form>
</div>
And the following JavaScript:
<script type="text/javascript">
function loginButton() {
console.log("this function was called")
}
</script>
In my console, when I click the submit button, "this function was called" appears for only a brief second, and then disappears. Yet when I put the submit button outside of the form, the message stays, and fully executes the rest of my function.
Your form gets submitted and the page reloads - because of type="submit" on input element.
Change it either to
type="button"
or
onclick="loginButton(); return false;"
Basically what I am trying to do is hide the spans initially and show the respective span when I click on an input field and when you leave that input field, that span goes away.
So I have a form that looks something like this (simplified):
<form id="form">
<div id="contact-div-1">
<input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
</div>
<span>
Please Enter Your First Name
</span>
<div id="contact-div-2">
<input type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
</div>
<span>
Please Enter Your Last Name
</span>
<div id="contact-div-3">
<input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
</div>
<span>
Please Enter A Valid E-mail Address
</span>
</form>
This is currently the JavaScript code that I have but it is not working properly.
$("#form span").hide();
$("input").focus(function(){
$(this).next('span').fadeIn("slow");
}).blur(function(){
$(this).next('span').fadeOut("slow");
}); //end blur
The <span> elements are siblings with the parent <div> elements of each <input>, so you need to use $(this).parent():
$("input").focus(function(){
$(this).parent().next('span').fadeIn("slow");
}).blur(function(){
$(this).parent().next('span').fadeOut("slow");
});
Example on JSFiddle
Also, to reduce repetition in your code, your "focus" and "blur" handlers can be combined, using .bind() with .fadeToggle():
$("input").bind("focus blur", function() {
$(this).parent().next("span").fadeToggle("slow");
});
Updated JSFiddle
There's nothing next to the input, try
$(this).parent().next('span').fadeIn("slow");
Working Code:
HTML
<form id="form">
<div id="contact-div-1">
<input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
<span> Please Enter Your First Name </span>
</div>
<div id="contact-div-2">
<input type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
<span> Please Enter Your Last Name </span>
</div>
<div id="contact-div-3">
<input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
<span> Please Enter A Valid E-mail Address </span>
</div>
</form>
js
$("#form span").hide();
$("input").on('focus', function(){
var s = $(this).siblings('span');
s.fadeIn("slow");
}).blur(function(){
$(this).next('span').fadeOut("slow");
});
Fiddle: Working fiddle
Since your span is sibling of the parent div, instead of the input, you must navigate to the div
$("#form span").hide();
$("input").focus(function(){
$(this).parent().next('span').fadeIn("slow");
}).blur(function(){
$(this).parent().next('span').fadeOut("slow");
}); //end blur
If you have control over the HTML, and both the span and input hold related information, it may also make sense to put them close together (i.e., child of the same div). Your original js code would work, then.
HTML
<form id="form">
<div id="contact-div-1">
<input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
<span>
Please Enter Your First Name
</span>
</div>
<div id="contact-div-2">
<input type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
<span>
Please Enter Your Last Name
</span>
</div>
<div id="contact-div-3">
<input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
<span>
Please Enter A Valid E-mail Address
</span>
</div>
</form>
JQuery
$("#form span").hide();
$("input").focus(function(){
$(this).next('span').fadeIn("slow");
}).blur(function(){
$(this).next('span').fadeOut("slow");
});
DEMO
You can give id's to your spans that are a function of say the name attribute of the corresponding input and then refer to them directly that way... this way you are also not as captive to whether or not you change the design where the hierarchy isn't the same etc.
For example:
<span id="span_FNAME">...</span>
Then jquery
$("input").focus(function() {
var s = '#span_'+$(this).attr("name");
$(s).fadeIn("slow")
...
I have some divs and when clicking on the button Expand/collapse i need a function that allows my client to add more divs on the form or not, like on the picture attached
i have tried the follwing code, its not working when clicking on the button, nothing happens
<div class="divVisible" id="mytable">
<p><label class="field2">Centro de Custo:</label><input type="text" class="text" id="centroCusto" name="centroCusto"></p>
<p><label class="field">Conta Contabil:</label><input type="text" class="text" id="contaContabil" name="contaContabil"/></p>
<p><label class="field">Periodo:</label><input type="text" class="num" id="date" name="date"/></p>
<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>
<p><label class="field">Saldo Total:</label><input type="text" class="num" id="saldoTotal" name="saldoTotal"/></p>
</div>
<input id="show_hide" type="button" value="Collapse/Expand" />
</div>
</fieldset>
</form>
</body>
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>');
});
</script>
If you append the HTML you will just be creating a new element each time you click. You could always just have the HTML on the page with display:none, and then use jQuery .toggle() or .slideToggle() to expand/collapse.
I have two forms, one is shown and the other is hidden. On click of submit button of form A, form A should disappear, and in its place, form B should appear.
In my code, On click of submit button(id="signup-btn1") of form "signup", form "signup" should hide and form "signup2" should show. They are both in exactly the same position according to the styles. It's just a matter of switching the first form content for the second.
The HTML is as follows:
<div class="signup-form">
<form class="signup" name="sign-up" method="post" action="">
<input type="email" name="signup-email" value="" placeholder="E-mail" class="signup-email" />
<input type="password" name="signup-password" value="" placeholder="Password" />
<input type="password" name="signup-confirmpassword" value="" class="c-password" placeholder="Confirm Password" />
<input type="submit" id="signup-btn1" name="signup-btn" value="Sign up" class="signup-btn" />
</form>
<form class="signup2" name="sign-up2" method="post" action="">
<h2>Step 2</h2>
<p>Please enter your school name to complete the sign up.</p>
<input type="text" name="school-name" value="" class="school-input" placeholder="School Name" />
<input type="submit" name="complete-signup" value="Complete Sign up" class="signup-btn" />
</form>
</div>
Using jQuery is preferred and should result in far less code. Thanks
Place each form in a div, then:
$("button").click(function(){
$("#div1").toggle();
$("#div2").toggle();
})
Work if your page have only 2 above forms :)