I have used jQuery validation. And using twitter bootstrap 2.3.2. Error message will display when I click the submit button. If I click the error message means the text box get focussed. How can I lost the focus ?
<input type="file" name="type1" id="type1">
<label for="type1">This field is required</label>
You could try the following:
$(function(){
$('input').blur();
});
Use this:
<input type="file" name="type1" id="type1">
<label for="type1" onmousedown="return false;" onclick="return false;">This field is required</label>
The onlcick and onmousedown "return false;" will disable the default browser behavior.
Related
I have Laravel 5.5 a page that has two forms but uses the same controller and method. First form is to cater for initial details but the second form is a search form. My search form works but only if you click the search button twice is there a way I could force to click once to submit that form.
View
<form name="FormSearch" id="FormSearch" method="post" action="{!! action(MyController#index',$customID) !!}">
<input type="text" name="searchDets" id="searchDets" value="" />
<input type="submit" class="btn btn-default" name="searchMe" id="searchMe" value= "Search Me"/>
</form>
Js
$('#FormSearch').click(function(e){
e.preventDefault();
$('#filterSearchForm').submit();
});
I would like my view page to submit once.
First of all, I couldn't find the element with id filterSearchForm, so, here is an edit that I made that submits the same form (i.e. FormSearch) when you click on it:
$('#FormSearch').click(function(e){
//e.preventDefault();
$('#FormSearch').trigger('submit');
});
I have used the trigger event that is fired which submits the form FormSearch when you click on the form FormSearch.
Here is it how it works:
$('#FormSearch').click(function(e) {
//e.preventDefault();
$('#FormSearch').trigger('submit');
});
$("#FormSearch").submit(function(e){
e.preventDefault();
alert('submitted');
});
#FormSearch{
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="FormSearch" id="FormSearch" method="post" action="{!! action(MyController#index',$customID) !!}">
<input type="text" name="searchDets" id="searchDets" value="" />
<input type="submit" class="btn btn-default" name="searchMe" id="searchMe" value="Search Me" />
</form>
<p>
** Click anywhere on the black area.
</p>
I hope this was helpful.
I have faced the same issue and it was due to js version . So please check your jquery.validate's version.
You can get more information here submit button twice click issue
I have a problem with my code using the bootstrap plugin.
I have some radio buttuns in the following code:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
I want to put a button to reset the selection. I've tried a reset button (<button type="reset">), jQuery commands, but all fail.
In the Bootstrap API I found an explanation:
http://getbootstrap.com/javascript/#buttons-checkbox-radio
that says:
Visual checked state only updated on click If the checked state of a
checkbox button is updated without firing a click event on the button
(e.g. via or via setting the checked property of
the input), you will need to toggle the .active class on the input's
label yourself.
Please someone could help me find a solution to my problem?
Thanks,
Gabriel.
First of all, you need to remove active class from label tag, then make the properties checked element on radio into false state, try this simple example below :
$('button').click(function () {
$('.btn-group').find('label').removeClass('active')
.end().find('[type="radio"]').prop('checked', false);
});
DEMO
$("button").on('click', function() {
$("input:radio").prop('checked', false);
$("input:radio").closest("label").removeClass("active");
})
This jQuery code should help you. When you click a button, it removes the checked property from all radios and toggles the class of the label as the API says
Have you tried creating a button with id "reset" and add use jQuery to remove the active class?
$("#reset").click( function() {
$(".btn").each( function() {
this.removeClass("active");
});
});
Add Button.prototype.toggle in bootstrap.js line 225
if ($input.prop('type') == 'radio' && !changed) {
this.$element.removeClass('active');
$input.prop('checked', false).trigger('change');
}
hi i am using a form for users subscription on the website with target is _new.
when i click on the submit button that the submitting message shows on the new window but the previous window still holding the data.
How to remove input fields data after submitting.
<form target="_new" action="samplepage.php" method="post">
<input type="text" name="inputtxt1" />
<input type="text" name="inputtxt2" />
<input type="submit" value="submit" />
</form>
Any suggestions???
Make the autocomplete - off
try this
<form target="_new" action="samplepage.php" method="post" autocomplete="off">
<input type="text" name="inputtxt1" />
<input type="text" name="inputtxt2" />
<input type="submit" value="submit" />
</form>
Reset form data using this
$('form').get(0).reset();
$(document).ready(function(){
$('form_name').submit(function(){
$('input[type="text"]').val('');
});
});
You can set value to null for text field using jquery on submit button click
$("input[type=submit]").click(function()
{
$("input[type=text]").val('');
});
EDIT:
I don't know is this a good approach, use blur instead of click event
$("input[type=submit]").blur(function()
{
$("input[type=text]").val('');
});
But it will meet your need.
I have a page with login form (on click, login form slides dowm) and underneath I have a link for registering a new user. With click on 'register new' link, new form pops-up and after validating each field, the submit event doesn't work - because there is a login form too and jQuery tries to trigger submit event of the first form.
How to trigger this specific onsubmit event - for the second form? I tried to hide a first form, but it didn't work and then I try to disabled it, which doesn't work as well.
(forms on separate pages works fine - validated with PHP and JS)
I think this is an easy thing to do .. but I cannot figure out how to do. Till now I overcome this problem, but I really like to find out how to make it work.
Thanks.
Unfortunatelly .. none of this answers works ...
Here is the code:
<div id="loginFormContainer">
<h2 id="loginShow" class="myriad_pro_bold_condensed_italic">Login</h2>
<form name="login_form" action="<?php if(isset($action) && !empty($action)) echo $action; ?>" method="POST" id="login_form" >
<fieldset>
<label>Your name </label>
<input type="text" name="username" maxlength="30" id="username_login" value="" class="required" placeholder="Enter Your Name" />
<label>Your password </label>
<input type="password" name="password" maxlength="16" id="password_login" value="" class="required " placeholder="Enter Your Password" />
</fieldset>
<input type="hidden" name="token" value="<?php if(isset($token)) echo $token; ?>" />
<input type="submit" name="submit-login" id="submit_login" value="Login" />
</form>
<div class="small">Register | Forgotten Password</div>
<div class="error"></div>
</div>
And JS ... should work like: if on register click: register windows pops-up, if on login the login form should slide down.
Right now, both of them slides ...I can remove the login form if I want to register, but the submit button from register form doesn't work.
$("#login_form").hide();
$("#loginShow").click(function(){
$('form#login_form .error').remove();
$("#login_form").slideDown("slow");
$('form#login_form').on("submit", function(event) {
event.preventDefault();
//code validation and ajax submit
}); //end form submit
});
$('#register').click(function(e) {
//$('#loginShow').remove(); //form is removed, but submit event still doesn't work
//if I completely remove login form from php page, then works fine
e.preventDefault();
$('form#register_form').click(function(event) {
event.preventDefault();
//
}); //end form submit
});//end register floating
Oh, yes, one final detail: on Chrome works fine :S, not in FF (v.10)
$(":submit").click(function(e){
$(this).closest("form").submit();
return false;
});
Try this:
var secondForm = $('form').eq(1);
secondForm.trigger('submit');
Just give the second submit button an id.
<input type='submit' id='submit2'>
Now for trigerring validation bind onclick event to the submit2 id
$('#submit2').click(function(){
//logic goes here
});
I got a newletter php form, so what I need is to hide the html input after the user click the submiting button, my code looks like this:
<form id="addressForm" action="index.php" method="get">
<p id="foarm">
<input type="text" name="address" id="address" placeholder="mail#example.com"/><br />
<input type="submit" value="Notificame" id="gogo" />
</p>
<p id="response"><?php echo(storeAddress()); ?></p>
</form>
Any ideas?
Thanks.
Use jquery to hide the form when the submit button is pressed. Something like
$("form#addressForm").submit(function()
{
$("form#addressForm").hide();
return true;
}
Should do it. You could do it without jquery, just using javascript - basically add an onclick event to change the css of the form to display:none when you click submit. Id probably suggest placing it in a div section for ease.