Hide div on click - javascript

<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
YES <input type="radio" name="name" value="yes" />
NO <input type="radio" name="name" value="no" checked />
<p />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function() {
$('#result').hide();
$('#submit').click(function() {
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
Here is the jsfiddle
Why is the second hide not working after clicking and fadeOut the div

You have to use .preventDefault() to prevent the default behaviour of the submit button. Or use a normal button(type='button') instead of a submit button.
Try,
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
DEMO

To post you need to AJAX and preventDefault to not submit
Also never call anything in a form submit
$(function() {
$('#result').hide();
$('#form1').on("submit", function(e) {
e.preventDefault(); // stop form submission
$('#hideme').hide();
$.post(this.action, { "name": $("input[name='name']").val()},function(data) {
$('#result').html(data).fadeIn(5000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
<form id="form1" method="POST" action="someaction.php">
YES <input type="radio" name="name" value="yes" /> NO <input type="radio" name="name" value="no" checked />
<p />
<input type="submit" value="HIDE NOW!" />
</form>
</div>

Related

How can I tell the browser to empty a field by using JQuery and then call the function?

I inserted a form on a html page, which contains several fields the user is supposed to fill ("name", "surname", a textarea, and so on); I then added a button and assigned the id Click to it:
<input type="button" name="button" value="Click" id="cliccami">
I linked the html page to a JQuery file.
By using JQuery I want to add a function clearAll which clears all the fields in the form when the user clicks on the button. I want to use another function main which calls the function clearAll when the button is clicked, as in the following:
function main() {
$("form").on("button", clearAll);
}
How can I write the function clearAll (to empty the fields in the form) by using JQuery?
Inside the function you can target the closest() form of this element to find all the elements to clear them like the following way:
function main() {
$("form").on("click", "#cliccami", clearAll);
}
function clearAll() {
$(this).closest("form").find("input[type=text], textarea").val("");
}
function main() {
$("form").on("click", "#cliccami", clearAll);
}
main();
function clearAll() {
$(this).closest("form").find("input[type=text], textarea").val("");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div>
<label>First Name:</label>
<input type="text" id="first-name">
</div>
<div>
<label>Last Name:</label>
<input type="text" id="last-name">
</div>
<div>
<label>Comments:</label>
<textarea id="comments"></textarea>
</div>
<input type="button" name="button" value="Click" id="cliccami">
</form>
Use jQuery's .val() function to set the value of a input element. Check the snippet for an example:
function clearAll() {
$(":input[type=text]").val("");
}
function main() {
$("#cliccami").on("click", clearAll);
}
main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Click" id="cliccami">
You can bind your function using the onclick attribute. And use reset method to reset the entire form this way.
function main(){
// reset form
$('#my-form')[0].reset();
// do whatever you want
alert('Form cleared!');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Form</h2>
<form id="my-form">
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group">
<label for="comments">Comments:</label>
<textarea class="form-control" id="comments"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" onclick="main()" class="btn btn-default">Clear All</button>
</form>
</div>
Try this
<form id="form1" action="">
<input type="text">
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="button" name="button" value="Click" id="cliccami">
</form>
function clearAll() {
$('#form1 input, #form1 textarea, #form1 select').each(function() {
$(this).val('');
});
}
$("#cliccami").on('click',function(){
clearAll();
});
$('#clearit').click(function(){
$(":input[type=text]").val("");
setTimeout(function(){ afteremptyfield(); }, 1000);
})
function afteremptyfield(){
alert("Function trigged after clearing fields")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Clear and trigger a function" id="clearit">
This is how it could be done....

Disable the button during the initial load, enable after the submit

I want to have the btnDisableFilteredList disabled during the initial page load. Then I want to enabled the enable it after the btnSearch button is click. How do I do it using jQuery?
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" /><input type="submit" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
You need to give the btnDisableFilteredList the disabled prop first:
disabled="disabled"
Then setup an on click event listener on the btnSearch input to remove the disabled prop from the btnDisableFilteredList input.
$(function() {
$("#btnSearch").on("click", (e) => {
e.preventDefault();
$("#btnDisableFilteredList").prop("disabled", false);
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" />
<input type="submit" id="btnSearch"value="Filter"/>
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" disabled="disabled"/>
</form>
Try in this way:
$(document).ready(function() {
$("#btnSearch").click(function () {
$("#btnDisableFilteredList").css("display", "inline-block");
});
});
#btnDisableFilteredList {
display: none;
}
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search:
<input type="text" name="SearchString" />
<input type="button" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
Look at this codepen
I used type="button" instead of type="submit" to avoid reloading the page, then to submit the form you can use jQuery's AJAX Function

PHP submit an form only if checkbox checked

I have a form with a check box and an input text. Here is my form:
<form action="index.php?option=com_platiniumchristmas&view=success" method="post">
<label>
<input type="checkbox" name="termsConditions" id="chbx" value="Yes" onclick="foo()" />
<?php echo JText::_( 'COM_PLATINIUMCHRISTMAS_TERMSCONDITIONS_TEXT');?>
</label>
<input type="submit" value="Emitir Voucher" class="btn btn-success" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="friendName" style="width: 100%;" />
<input type="hidden" name="canal" value="<?php echo $_POST[" canal "]; ?>"/>
</div>
</form>
The idea is only to submit the form if the checked box value is checked. How can I go about this. I have tried using javascript but no success.
The javascript I tried to Use:
<script type=”text/javascript”>
var checkbox = document.getElementById("chbx");
function foo(){
if(checkbox.checked){
alert("meap");
};
};
</script>
You don't need JavaScript at all. Just use the required attribute for the constraint validation API.
<form action="index.php?option=com_platiniumchristmas&view=success" method="post">
<label>
<input type="checkbox" name="termsConditions" id="chbx" value="Yes" required />
<?php echo JText::_( 'COM_PLATINIUMCHRISTMAS_TERMSCONDITIONS_TEXT');?>
</label>
<input type="submit" value="Emitir Voucher" class="btn btn-success" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="friendName" style="width: 100%;" />
<input type="hidden" name="canal" value="<?php echo $_POST[" canal "]; ?>"/>
</div>
</form>
This will stop the form from submitting unless the checkbox is checked. Do remember, you still need backend validation as always to verify since requests can be forged if enough effort is put into it.
try complete example, it should work.
and then correct your code.
<!DOCTYPE html> <html> <head> <script> function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
} } </script> </head> <body>
<form name="myForm" action="index.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
</body> </html>
Thanks
Amit
$("#form").submit(function(e) {
if(!$('input[type=checkbox]:checked').length) {
alert("Please select the checkbox.");
//stop the form from submitting
return false;
}
return true;
});
<form id='form'>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" >
</div>
</form>
use this
You lose the context in your code. try:
<script type=”text/javascript”>
function foo(){
var checkbox = document.getElementById("chbx");
if(checkbox.checked){
alert("meap");
};
};
</script>

How to show a login form when clicked on sign-in link

i want to show a login form when a click is done on a link . i want to make default behaviour of div "hide ".. how can i do that ? may form is by default showing on page., please help me . it will b grate ful for you .
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
javascript:
$(document).ready (function() {
$('.signin').click(function() {
$('.form').show();
return false;
});
});
Add style to the "form" to hide it.
<div style="display:none;" class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
Set display property of form class to none as shown belo in using css.
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
css:
.form{
display:none;
}
javascript:
$(document).ready (function()
{
$('.signin').click(function()
{
$('.form').show();
$('.signin').hide();
});
});

HTML/Javascript radio button forms that redirects to different links

I need to create a radio button form where the selection would redirect you to a different index.html link when a Continue button is pressed. I cant seem to find an easy way to do this. Help!!
Basically as follows:
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>
In html add a data-href attribute for each button and ID to submit button
<form>
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR> </BR>
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue" id="btnFormSubmit">
</form>
Javascript:
var submit = document.getElementById('btnFormSubmit');
submit.addEventListener('click', submitForm);
function submitForm(event){
event.preventDefault();
event.stopPropagation();
var href = '',
inputs = this.parentNode.getElementsByTagName('input')
for(var i=0;i<inputs.length;i++){
if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){
href = inputs[i].getAttribute('data-href');
window.location = href;
}
}
}
Using jQuery will be like that, add the url to the value field of the radio.
<form method="post">
<input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR>
<input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>
<input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR>
<input type="submit" value="Continue">
</form>
jQuery code:
$(function(){
$("form").submit(function(e) {
e.preventDefault();
window.location = $(this).find('input[type="radio"]:checked').val();
});
});
Live example:
http://jsfiddle.net/nnEny/
This might be too obvious but
<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
</form>
<form>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR>
</form>
<form>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR>
<input type="submit" value="Continue">
</form>

Categories