I have a login form. When the inputs get focused the "forgotten password" and "remember me" elements get shown by adding a css class, when they blur, the elements are hidden again by removing the class "sho". I would like the elements to keep the class "show"if I click either one of them or the login link
$(document).ready(function() {
$('.login *').focus(showlogin);
$('.login *').blur(hidelogin);
});
function showlogin(){
$('.login .hidden').addClass("show");
}
function hidelogin(){
$('.login .hidden').removeClass("show");
}
Html:
<form class="login">
<input type="text"/>
<input type="password"/>
<a class="loginbutton" href="#">Log in</a>
<br />
<a class="hidden" href="#">Forgotten password</a>
<label class="hidden"><input type="checkbox" /> Remember me</label>
</form>
Instead of binding to blur, bind to a click outside the login form.
Here's some code I have in my page that closes my login box when I click outside it, you can adapt it to your needs:
$(document).mousedown(function (e) {
if ($(e.target).closest("#signin").length == 0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
Related
I would like to submit form when an element is selected - skipping pressing the submit button.
I tried using onchange="this.form.submit()", but it's not working here.
This is the code:
<form action="" method="get">
<div class="ui floating dropdown labeled search icon button dd">
<input type="hidden" name="nutr_code">
<span class="text">Select nutrient</span>
<div class="menu">
<div class="item" data-value="ca">Calcium</div>
<div class="item" data-value="fe">Iron</div>
<div class="item" data-value="mg">Magnesium</div>
<div class="item" data-value="zn">Zinc</div>
</div>
</div>
<br><br>
<input type="submit" value="Show results">
</form>
Because you are using GET method you can redirect with javascript by constructing the url yourself.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
location.href = 'http://example.com/?nutr_code=' + value;
}});
Second option is changing the input field 'nutr_code' with the value from the callback as shown above
$('input[name="nutr_code"]').val(value);
and submit the <FORM/> from js.
$('form').submit();
EDIT:
Example of second option.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
// Uncomment if semantic is not updating the input before submit.
//$('input[name="nutr_code"]').val(value);
$('form').submit();
}});
You need to define action in form tag or add some method to submit button
<input type="submit" value="Show results" onclick="someFunction()">
You need to define someFunction() too if you follow this way. Thanks
You Can Use Jquery
$(document).ready(function(){
$("input[name='nutr_code']").on('input',function(e){
$("input[type='submit']").trigger( "click" );
});
});
<script type="text/javascript">
function CheckBox(checkerbox, div) {
if (checkerbox.checked) {
document.getElementById(div, Urbanoo).style.display = "block"
} else {
document.getElementById(div, Rurall).style.display = "none"
$("#Rurall").find("*").prop("disabled", true);
}
}
function CheckBox1(checkerbox1, div) {
if (checkerbox1.checked) {
document.getElementById(div, Rurall).style.display = "block"
} else {
document.getElementById(div, Urbanoo).style.display = "none"
$("#Urbanoo").find("*").prop("disabled", true);
}
}
</script>
How to hide a checkbox in function another and disabled all elements to the checkbox disabled?
<input name="Rural" type="checkbox" onclick="CheckBox1(this,'Rurall');" />
<input name="Urbano" type="checkbox" onclick="CheckBox(this,'Urbanoo');" /> Urbanoo </center>
<div id="Urbanoo" style="display:none" >
<g:render template="../DomUrbano/form"/>
</div>
The problem is that when I turn on a check box not the other box is not disabled
<div id="Rurall" style="display:none">
</br>
<g:render template="../DomRural/form"/>
</div>
I think I see what you are attempting but frankly it's less than super clear.
SO what I think you want is;
Hide other checkboxes if I check one
If I do uncheck a box, show the other one again
Show a "partner" area if I check a box
Disable other NOT partner area inputs if I check a box
I modified your markup some to make it easier and also added some additional to clearly show what is happening. I also added a data element for the partner to the input so we can make this all simpler and only have one function; now called via an event handler and NOT with inline code in markup.
Revised markup:
<span class="myinputs"><input class="mycheck" name="Rural" type="checkbox" data-partner="#Rurall" /> Rurall</span>
<span class="myinputs"><input class="mycheck" name="Urbano" type="checkbox" data-partner="#Urbanoo" /> Urbanoo</span>
<div id="Urbanoo" class="hidden others">the Urbannoo
<g:render template="../DomUrbano/form" />
<input type="textbox"/>
</div>
<div id="Rurall" class="hidden others">the Rurall
<g:render template="../DomRural/form" />
<input type="textbox"/>
</div>
Code:
$('.mycheck').on('change', function() {
var amIChecked = $(this)[0].checked;
$(this).parent().siblings('.myinputs').toggle(!amIChecked);
var pt = $(this).data('partner');// get the partner selector
$(pt).toggle(amIChecked);// show the partner in the others list
//do the enable in the partner
$('.others').filter(pt).toggle(amIChecked).find("*").prop("disabled", !amIChecked);
//do the disable in the othes list not the partner
$('.others').not(pt).find("*").prop("disabled", amIChecked);
});
Play with it all here: https://jsfiddle.net/MarkSchultheiss/cLyb103x/1/
We have a magento site that is using the WebForms2 plugin and ends up using something like the following generated code for a form:
HTML
<form action="http://example.com/magento/index.php/webforms/index/iframe" method="post" name="webform_2" id="webform_2" enctype="application/x-www-form-urlencoded" class="webforms-lg-test" target="webform_2_iframe">
<input type="hidden" name="submitWebform_2" value="1"/>
<input type="hidden" name="webform_id" value="2"/>
<div id="fieldset_0" class="fieldset fieldset-0 ">
<ul class="form-list">
<li class="fields ">
<div id="field_11" class="field type-text webforms-fields-11 webforms-fields-name">
<label id="label_field11" for="field11">Name</label>
<div class="input-box">
<input type='text' name='field[11]' id='field11' class='input text ' style='' value="" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required">* Required Fields</p>
<button type="button" class="button" id="webform_2_submit_button" onclick="webform_2_submit()" title="submit">
<span>
<span>Submit</span>
</span>
</button>
<span class="please-wait" id="webform_2_sending_data" style="display:none;">
<img src="http://example.com/magento/skin/frontend/default/default/images/opc-ajax-loader.gif" alt="Sending..." title="Sending..." class="v-middle"/>
<span id="webform_2_progress_text">Sending...</span>
</span>
</div>
</form>
JS
var webform_2 = new VarienForm('webform_2', 0);
var webform_2_submit = function(){
var form = webform_2;
if(form.validator && form.validator.validate()){
form.submit();
$('webform_2_submit_button').hide();
$('webform_2_sending_data').show();
}
};
The tricky part is that we have an additional tool that works with all forms. Previously we just had it hook into the forms submit handler, but this particular method that Magento/WebForms uses, does not trigger the submit handler.
An example of our tool's code:
var forms = document.getElementsByTagName('form');
for(i=0; i<forms.length; i++) {
forms[i].addEventListener('submit', function() {
alert('form submitted');
}
}
We were also using a jQuery approach, but pared it down to reduce dependancies. It also did not work.
$('form').on('submit', function(e) {
alert('form submitted');
});
Question
Is there something specific in Magento that I could use with this implementation that I could hook into instead of a standard submit handler? Or a different/better way to observe a form's submit handler?
Using Prototype I was able to override the existing submit handler.
VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
//-- your code can go before OR after the default form behavior
//-- include this if you want to include the previous submit behavior
$super(url);
return false;
});
This is my code:
Javascript:
$(".test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
HTML:
Inputs inside div:
<div class="test">
<input type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I want to detect if user leaves "div.test". Unfortunately, "focusout" works also when I move focus to other object inside this div.
Look at this fiddle: http://jsfiddle.net/Piotrek1/wfukje3g/6/
Click on first input and use Tab to switch through textboxes. "
Lost focus" should appear only if user move out from the div, but it happens always. Why is that and how to change it?
The $ operator returns a collection. You have two inputs inside the <div class="test">. So it matches all elements and children with the .test class.
I think what you want two divs with separate input elements and two different classes OR, use an ID on the actual input element so the $ operator only matches the input id you want this event to fire on. http://jsfiddle.net/wfukje3g/7/
$("#test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
<div class="sometest">
<input id="test" type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I have implemented piece of code to handle div focus out
$(document).ready(function () {
var count = 1;
$("#name").focusout(function (e) {
if($(this).has(e.relatedTarget).length === 0) {
$("#output").append("<label style='width:100%;'>"+ count++ +" Name div focus out </label>");
}
});
});
Inputs inside div:
<div id="name" class="test">
<input type="text" id="firstname"/>
<input type="text" id="lastname"/>
</div>
Inputs outside div:<br>
<input type="text" id="dob"/>
<div id="output" style="width:100%"></div>
In this piece of code I have used relatedTarget.
relatedTarget will provide the next focused element If next element is not the child of this div then it is div focus out.
Try this in your code.
I hope this will be helpful.
Thanks
JSFIDDLE LINK - Sample code
Below script will create effect fade in and fade out when user hover mouse into login box
<script>
$("#login").hover(function() {
$("#loginForm").slideToggle('500').css('display', 'block');
}, function() {
$("#loginForm").slideToggle('500')
});
</script>
but when i want select my email from <input type="name" name="email_address" />
this div #loginForm will automatically closed :
so how to keep this box always show when user select their email address from autocomplete list ?
This issue only happen in browser mozilla firefox.
FYI : change to <input type="name" name="Email" /> .. this will list your gmail email address
Jsfiddle
As the drop-down is created by the browser, jQuery thinks the mouse leaves #login and will slide up again. To prevent this from happening, you could add an delay to the slideUp animation. I created a fiddle to show you what I mean.
$("#login").hover(function () {
$("#loginForm").clearQueue().slideDown(500);
}, function () {
$("#loginForm").delay(1500).slideUp('500');
});
Note the clearQueue() method. This will make sure that when the user has selected an email and has its mouse over the element with #login it will prevent the slideUp() from happening.
I rewrote your HTML and script. I'm keeping the login box open if the textbox is still on focus. Also changed slideToggle to slideUp/slideDown You can try this
HTML
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" name="email_address" id="email"/></span> </span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" id="pass"/></span> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
Script
$("#login").hover(function() {
$("#loginForm").slideDown('500').css('display', 'block');
}, function() {
if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
$("#loginForm").slideUp('500')
});
Demo: http://jsfiddle.net/r6sQP/4/
I think it will be better without 500 millisec:
$("#loginForm").slideToggle().css('display', 'block');