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
Related
Hi I try to research my problem via Stack about 3 hours but I still not found.
So I decide to create the topic to ask about my problem.
I am creating search engine and the below are the result:
If I type test text into input form then click "enter" button from keyboard, the search result will working correctly.
If I type test text into input form then click "Search" button from webpage, the search result is not working.
My problem is result No 2.
This is my code:
<form action="search_content.php" method="POST" >
<div class="input-group mainsearch-home">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" >search</button>
<input type="hidden" name="homesearchfield" value="search">
</div>
</div>
</form>
What I do wrong?
I thought that my problem is happens from input type hidden data.
So I would like to know how to get value from input text box and send value to my target page.
I have added some php code from my "response" page on below.
$viewstate = isset( $_POST["homesearchfield"] ) ? $_POST["homesearchfield"] : "" ;
$sql="SELECT * FROM `article` WHERE topic_article LIKE '%$viewstate%' order by id_article DESC";
Currently your form doesn't know that the button is meant to submit the form, which can be fixed by changing the type on the button:
<button type="submit" class="button button--search" >search</button>
You could also use:
<input type="submit" class="button button--search" value="search" />
An option for controlling the data is using JavaScript / jQuery to control the action of the form. This way also allows you to view the data being posted before its actually sent and you can even comment out the post and just work on getting the form with the right data you are looking to get back.
also for serialize to work, you need to have a name for each item you want to pass back data.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script lang="JavaScript">
$(function(){
$("#button").click(fuction()
{
var formData = $("#form").serialize();
alert(formData);
/*
$.post({"search_content.php",
formData,
function(returndata)
{
//do something
//this will load the return data into the div tag on the fly
$("#divReturn").html(returndata);
},
"text"
});
//*/
});
});
</script>
<form id="form" onsubmit="return false;" >
<div class="input-group mainsearch-home input-group--search inputs--raspberry">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" id="button" name="button" value="search" >search</button>
</div>
</div>
</form>
<div id="divReturn">
</div>
I have some code in a blade template which create some forms and buttons, see below
<div class="element1">
<div class="text1">
<form action="{{ route("progressSheetDynamic") }}" method="post" id= "add">
<input name="increment" value="increment" type="hidden"> </input>
<input type="hidden" name="id" value= {{$activities}} >
<button type="submit" class="styleHover styleButton" id= {{$activities}} > + </button>
</form>
{{ $count }} / {{ ($goal/5) }}
<form action="{{route("progressSheetDynamic") }}" method="post" id="delete">
<input type="hidden" name="delete" value="delete">
<input type="hidden" name="id" value= {{$activities}}>
<button type="submit" class="styleHover styleButton"> - </button>
</form>
</div>
</div>
I use #include_layouts("template file") 3 times in my view file to create the buttons 3 different times. When I click one button I want one ajax request to fire. Instead what is currently happening is that one button click shows up as there button clicks and submits the ajax request 3 different times.
Here is the relevant javascript code in the blade file
$(document).ready(function(){
$('#add').click(function(e){
e.preventDefault();
var data = $(this).serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});
I have tried many different things like using jQuery to change the button to be disabled after one click and returning false at the end of the jQuery function.
However, in each case one click is being read as three different clicks. So the data is logged to the console three times. Is there any way to make it so that when I click one button it only registers as one click instead of 3?
You are triggering the ajax on the form click, try it on the button click
$(document).ready(function(){
$('.styleButton').click(function(e){
e.preventDefault();
var data = $(this).closest('form').serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});
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 got following code i want to know which button pressed then pass the value to input box.
<button type="button" name="buttonpassvalue" value="1" onclick="">Value1</button>
<button type="button" name="buttonpassvalue1" value="2" onclick="">value 2 </button>
<?php
if buttonpassvalue pressed then add the buttonpassvalue value
<input type="text" name="value">
else
add value of buttonpassvalue1
?>
i am tried to solve but stock here.
please help me
thanks
The best way to do this is with Javascript.
As PHP is a server side language, it requires you to send some information to the server, meaning you would have to submit the form, and reload the page with the details of the request from the user.
With a javascript library like jQuery you can do something like the following.
<button class="some-button" value="1">Button 1</button>
<button class="some-button" value="2">Button 2</button>
<input type="hidden" name="buttonValue" class="button-value-hidden" />
<script>
$(document).ready(function(){
$('button.some-button').on('click', function(){
$('input.button-value-hidden').val($(this).val());
});
});
</script>
Now $_GET['buttonValue'] will contain your button value when the form is submitted.
Make sure you are including the jQuery library!
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
});