First of all, I searched here for the past hour to see if I found an answer to my question before I posted, but you're my last hope! I found a piece of code that nearly works as I want it, but not quite.
I need to get rid of the fade-in and fade-out.
I need the script to check onload which radio button is checked and show the correct div.
Here is my code:
<input type="radio" name="d_method" class="c_email"/>Email
<input name="d_method" type="radio" class="c_collection"/>Colletion
<input name="d_method" type="radio" class="c_post"/>Post
<div id="c_email" style="display:none;">
email textbox
</div>
<div id="c_collection" style="display:none;">
collection textbox
</div>
<div id="c_post" style="display:none;">
post textbox
</div>
And here is the jquery:
$(':radio').change(function() {
var itemSelector = '#' + $(this).attr('class');
$('div').stop().fadeOut(function() {
$(itemSelector).fadeIn();
});
});
Try this
$(function(){
$(':radio').click(function() {
$('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
})
.filter(':checked').click();//trigger the click event
});
Working demo - http://jsfiddle.net/H8VVP/1/
Related
When clicking on the checkbox it hides currently displaying DIV & shows hidden DIV. After this hidden div displayed it has a form to submit on button click.
My problem is when i click on this submit button, the form is hiding again. I have tried stopPropagation(), preventDefault() and many ways & problem still exist. When I use preventDefault() then it shows the div without hiding but the submit is disabled.
I saw many questions related this.but nothing works to me. I want to submit form without hiding the div which the form resides. I'm a beginner with jquery.
$(function() {
$("#active").click(function() {
if ($(this).is(":checked")) {
$("#donorTeam").show();
$("#donor").hide();
} else {
$("#donorTeam").hide();
$("#donor").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="active"> select type
<div id="donor" style="display:block;"></div>
<div id="donorTeam" style="display:none;">
<form>
<button type="submit" id="sub">Add</button>
</form>
</div>
Thanks in advance.
You could try either of these 2 approaches
1.
$(function () {
$('#donorTeam form').on('submit',function (e) {
// Ajax call here
e.preventDefault();
});
});
2 . add onsubmit="return false" to the form attribute
<form onsubmit="return false">
<button type="submit" id="sub">Add</button>
</form>
I have some pre-written code by a developer, Which I have to modify, In that code, A directive is created using textboxe is used inside label, And I added another custom directive in that directive. So the final rendered HTML looks like.
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
As this div.customDropdown is inside label, whenever I click on dropdown, that click is going to textbox also.
So My question is, Is there any way to disable label feature of focusing input elements?
You can prevent the default action of the label's click event using jQuery.
$('label.myClass').click(function(e) {
e.preventDefault();
});
This does it in vanilla JavaScript:
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
I recommend you to use div or span at the place of the label and if you want you can write it before or inside that ..
I know its not simple but you can do it ..
Is there a way for when the mouse has clicked on a link it calls to an input item making it appear. Then when click on anything besides the input item it makes the input item disappear again.
Edit - Added example
Edit 2 - Fixed Emample
<html>
<head>
<style>
#sch{
display:none;
}
</style>
</head>
<body>
Search
<form align = "center" id = "search">
<input id = "sch" type = "text" name = "search" placeholder = "Search Here"></br>
</form>
If its only Display purpose you can do this by JavaScript onclick function.
So With css make your input display: none when your page load but when you click on call JavaScript and make it display:Block
But if you are looking to insert some value and save them to database continue same process and add ajax with it.
For example
<div>
<a id="1">link1</a><input type="text" name="t1" class="hid" id="t1" /><br>
<a id="2">link2</a><input type="text" name="t1" class="hid" id="t2" /><br>
<a id="3">link3</a><input type="text" name="t1" class="hid" id="t3" /><br>
</div>
your CSS
<style>
.hid{
display: none;
}
</style>
Your JS
<script>
$(document).ready(function(){
$("a").on("click", function(){
$("#t1").css("display","none");
$("#t2").css("display","none");
$("#t3").css("display","none");
var Aid = $(this).attr("id");
$("#t"+Aid).css("display","block");
});
});
</script>
The HTML is for structuring the page, not for animating the page, so try to use Javascript or jQuery instead. try to use something like...
document.ready(function(){
$("a").onClick(function(){
$("sh").fadeIn(200)
});
});
I dont know if it is exactly like this, but you have the point.
Hope, that I helped you.
I am trying to set the focus of an input field inside my form when I reveal a modal using ZURB Foundation framework. I am really truly sorry if this question has been asked before I've been having problems finding a solution to this for a while.
This is what I have:
<div id="myModal" class="reveal-modal" data-reveal>
<form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
<label for="curse">Пиши си овде:</label>
<textarea type="text" name="curse" id="curse" placeholder="Напиши што ти душа сака.." required="true"></textarea>
<input type="submit" name="submit" class="button secondary tiny right" value="OK">
</form>
<a class="close-reveal-modal">×</a>
</div>
Everytime I click a button this modal pops up and I want my input field (textarea) to be in focus when I do that. I tried adding the autofocus attribute and I also tried using javascript to set the focus when I click the button or when this div shows or loads (onshow and onload methods). Nothing seems to work for me so any help will be much appreciated.
I think you'll have to use JS or jQuery to handle the opened event like this..
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
modal.find('[autofocus]').focus();
});
Demo: http://codeply.com/go/Ahs4oZDsWn
With Foundation 6 the event name has changed:
$(document).on('open.zf.reveal', '[data-reveal]', function () {
console.log('asdfasdfsadf')
var modal = $(this);
modal.find('[autofocus]').focus();
});
I have created a form with a submit button, the submit button is outside the actual form but its targeting the form using the form attribute for example.
<form id="myform">
</form>
<button form="myform"></button>
I apologize for the week example. This is working accross all browsers except IE 11. IE 8-10 is working 100%. Any ideas on how I can fix this. I prefer not writing scripts. I can do this with jQuery but I prefer to just keep it clean if possible
This is a solution with just a click event and a line of css. ( Minimal )
If your button has to be outside the form due to User Interface design.
I would suggest you add an input submit/button inside the form:
<form id="myform">
<input type="button" value="Submit" class="myButton" />
</form>
<button id="outerBtn">Submit</button>
Hide the input:
.myButton {display:none;} OR {visibility:none;}
Use jQuery to trigger click the input button inside the form:
$('#outerBtn').on('click', function(e){
e.preventDefault();
$('.myButton').trigger('click');
});
Just some quick answer. Should be alright.
If you do not want to write script, I would suggest you just keep your input button/submit inside the form.
<form id="form-any-name">
<input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button[type=\'submit\']').on('click', function() {
$("form[id*='form-']").submit();
});
});
</script>
Simply include document on ready submit catcher you can place that code in main js file since we catching dinamicaly form id starting with form- so in other pages you can have the different foms:)
I would like to post my answer as this post helped me a lot and I came with an idea that works if you want to add the "button outside the form" functionality on older browsers.
I use JQuery but I dont think I would be a major problem to use pure JS as it's not complicated code.
Just create a class just as some of the answers suggested here
.hiddenSubmitButton {
display: none;
}
$("body").on("click", "button[form]", function () {
/*This will get the clicks when make on buttons with form attribute
* it's useful as we commonly use this property when we place buttons that submit forms outside the form itself
*/
let form, formProperty, formAttribute, code, newButtonID;
formProperty = $(this).prop("form");
if (!(formProperty === null || formProperty === "")) {//Most browsers that don't wsupport form property will return null others ""
return; //Browsers that support the form property won't continue
}
formAttribute = $(this).attr("form");
form = $("#" + formAttribute);
newButtonID = formAttribute + "_hiddenButton";
if (document.getElementById(newButtonID) !== null) {
$("#" + newButtonID).click();
return;
}
code = '<input id="' + newButtonID + '" class="hiddenSubmitButton" type="submit" value="Submit" />';
$(form).append(code);
setTimeout(function () {
$("#" + newButtonID).click();
}, 50);
});
One thing I like about creating buttons outside the form is that they allow us to custom the design more easily and we can use this code and it will work on old browsers and also, the browser will use its HTML form validator.
IE understands 'for', you can use "label for=''".
<label for="form_one_submit">Button one</label>
<form action="" id="form_one">
<span></span>
<input type="submit" id="form_one_submit" style="visibility:hidden;">
</form>