I have set up a multiple form in a page with different IDs. I wanted to take ID of the form when one of the is submitted by submit btn. Here's what i got so far
<div class="form-wrap">
<form action="../administrator/apps/image_process_2D.php" method="post" enctype="multipart/form-data" id="upload_form_2D" class="submit_form">
<input name="__files[]" type="file" multiple />
<input name="__submit__" type="submit" class="btn btn-info submit_form" value="Upload"/>
</form>
<div class="form-wrap">
<form action="../administrator/apps/image_process_3D.php" method="post" enctype="multipart/form-data" id="upload_form_3D" class="submit_form">
<input name="__files[]" type="file" multiple />
<input name="__submit__" type="submit" class="btn btn-info submit_form" value="Upload"/>
</form>
<script>
var my_form_id = '#upload_form'; //ID of an element for response output
$(my_form_id).on( "submit", function(event) {
var post_url = $(this).attr("action");
//codes here//
});
</script>
so i need the 'my_form_id' to take the value if the form ID when the submit button is clicked.
Any help if much appreciated
You can traverse to closest parent form element using closest() and get the id of element using prop or attr:
$('form').on( "submit", function(event) {
console.log($(this).closest('form').prop('id'));
});
You can use .parent()
Description: Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
$(my_form_id).on( "submit", function(event) {
console.log($(this).parent('form').attr('id'));
});
Related
I was wondering how to submit a form on a page with AJAX (just one form) when there are more than 4 forms on that same page.
What I have so far, that isn't working:
<script>
$(document).ready(function(){
$("findPatientRecords").submit(function(event){
event.preventDefault();
var username = $("username").val();
var searchPatientRecords = $("searchPatientRecords").val();
$(".formMessage").load("inc/findPatientRecords.php", {
username: username,
searchPatientRecords: searchPatientRecords
});
});
});
</script>
And the form is:
<form method="post" name="findPatientRecords" id="findPatientRecords" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" id="username" name="username"></input>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;" name="searchPatientRecords">Search for user</button>
<p id="formMessage"></p>
</form>
use name attribute in form element
<form name="form1">
jQuery finds elements similar to CSS selectors. To find an element with an id attribute of foo, you would need to do #foo. If you omit the # sign, it will instead try to find a <foo> element. This is why your jQuery selectors are not matching anything.
<script>
$(document).ready(function(){
$("#findPatientRecords").submit(function(event){
event.preventDefault();
var username = $("#username").val();
var searchPatientRecords = $("#searchPatientRecords").val();
$(".formMessage").load("inc/findPatientRecords.php", {
username: username,
searchPatientRecords: searchPatientRecords
});
});
});
</script>
I want to save an image and two text field using JQuery,Ajax. here, i'm using bootstrap modal. But when I submit the modal form it's show MethodNotAllowedHttpException Exception.
My Ajax Method.
$(document).ready(function(){
$('#advisoradd').on('submit',function(){
var name=$('#adname').val();
var title=$('#adtitle').val();
var img=$('#adfile').val();
$.ajax({
url:"{{route('add.advisor')}}",
type:'post',
data:{
'_token':"{{csrf_token()}}",
'name':name,
'title':title,
'img':img,
},
success:function(data)
{
console.log(data);
}
});
});
});
My view Modal code.
<form method="POST" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<div class="img_upload_team">
<button class="btn">+</button>
<input type="file" name="myfile" id="adfile">
</div>
<h2>Add A Profile Photo</h2>
<p>Click “+” Sign to Add</p>
</div>
<div class="form-group">
<input type="text" name="adname" class="form-control" id="adname" placeholder="Name">
</div>
<div class="form-group">
<input type="text" name="adtitle" class="form-control" id="adtitle" placeholder="Title">
</div>
<button type="submit" class="btn btn_modal_submit" id="advisoradd">Add</button>
</form>
My controller and Route for this Request.
public function addadvisor(Request $request)
{
$advisor=new Advisor();
$advisor->name=$request->name;
$advisor->title=$request->title;
$file = $request->file('img') ;
$fileName = $file->getClientOriginalName();
$destinationpath=public_path().'/images/';
$file->move($destinationpath,$fileName);
$advisor->image=$fileName;
$advisor->save();
return response()->json($advisor);
}
Route::post('/advisor','ImageController#addadvisor')->name('add.advisor');
You've mixed up button and form events. Buttons don't have a submit event, forms do. Since you're adding the event on the button, change it to click.
We should also add a preventDefault() to stop the button from submitting the form.
(We could also add the type="button" attribute on the button element to stop it from submitting the form).
This should work:
$(document).ready(function() {
// Add a 'click' event instead of an invalid 'submit' event.
$('#advisoradd').on('click', function(e) {
// Prevent the button from submitting the form
e.preventDefault();
// The rest of your code
});
});
I have a PHP page (page.php) that I am using to post data into my database. I am using the form method post to send the data to my database. Inside the <form> I have a second <form> which I use to upload an image.
But when I click on Upload the outer <form> will posted: action="./submit.php".
Does someone know how I can fix this?
Here is my script:
page.php
<form name="reaction" method="post" action="./submit.php">
//multiple textboxes
//upload script
<form name="newad" method="post" enctype="multipart/form-data" action="page.php">
<table style="width:100%">
<tr><td><input type="file" name="image" value="Choose file"></td></tr>
<tr><td><br /><input name="Submit" class="btn2" type="submit" value="Upload"></td></tr>
</table>
</form>
<button type="submit">Post page</button>
</form>
well Ryan is right, you can't have a <form> inside a <form> my suggestion is change the html stucture or make it into one <form> with one action and maybe you can split the function inside submit.php
You can't have nested form like this in HTML.Follow this instruction to better undrestanding about form handling in PHP.
You can use two submit buttons in one form, they can each have a different formaction to specify where to submit.
<form name="reaction" method="post" enctype="multipart/form-data">
//multiple textboxes
//upload script
<table style="width:100%">
<tr><td><input type="file" name="image" value="Choose file"></td></tr>
<tr><td><br /><input name="Submit" class="btn2" type="submit" value="Upload" formaction="page.php"></td></tr>
</table>
<button type="submit" formaction="submit.php">Post page</button>
</form>
Both buttons will submit all the form fields, but the two scripts can simply ignore the fields that they don't care about.
Recommendations:
Step 1: separate each form
Step 2: give each form an id
Step 3: use jquery's $.ajax() to publish the forms to their respective targets URLs
Example of Ajax call:
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
Code from hog I was lazy to write one
I have a form which performs a javascript when submit is clicked. I can't seem to figure out how to do the same thing when the return key (13) is used.
HTML: (note MakeRequest() is a JS method which performs a request on another php page and returns results to JSresult.)
<form name="SearchForm">
Name: <input type = "text" name = "Name" id="Search"
placeholder="Search stuff here...">
<button type="button" id "Request" onClick="MakeRequest()"">Search</button>
</form>
div id="JSresult">
</div>
Replace your button with a submit input and move the function to form onSubmit, instead of button onClick :
<form name="SearchForm" onSubmit="MakeRequest();">
Name: <input type = "text" name = "Name" id="Search" placeholder="Search stuff here..." />
<input type="submit" id="Request" value="Search" />
</form>
Here is an unobtrusive approach that should do the trick:
<script>
window.onload = function(){
document.getElementById("Search").onkeydown = function(e){
key = (e.keyCode) ? e.keyCode : e.which;
if(key == 13) {
document.getElementById("Request").click();
}
};
};
</script>
Just copy that into the head of your HTML file.
How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!
Code source: Submit Search query & get Search result without refresh
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
You can add multiple submit buttons and attach to all of them onclick event listener. When button was clicked - get the value and send with a POST request.
<script>
$(function(){
$('input[type=submit]').click(function(){
$.post('db_query.php', {value:$(this).val()}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="">
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
</form>
If you want to use multiple submit buttons, you can catch the click event and determine which button was clicked. then run different Ajax submit. this also works when enter is hit.
//submit buttons
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str" />
<input type="submit" value="v1"/>
<input type="submit" value="v2"/>
//...more submit buttons
</form>
//submit func
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val){
case 'v1':...;
case 'v2':...
}
});
});
Here is my version - which now looks very much like Bingjies because it was written while I was testing out his version
DEMO
<form id="lets_search" action="" >
Search:<input type="text" name="q" id="q">
<input type="submit" value="Google" name="send" id="google">
<input type="submit" value="Bing" name="send" id="bing">
</form>
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val()) {
case "Bing" :
$("#lets_search").attr("action","http://www.bing.com/search");
break;
case "Google":
$("#lets_search").attr("action","https://www.google.com/search");
break;
}
});
});
Here, I would prefer to Vamsi's solution n Why not Sanjeev mk?
Give some extra thought on prefering the solution.
case: If there are mulitple submit buttons
If the user is in the text field and hits enter, the system will assume the first submit button was hit.
So, here, it would be good to go for not having mulitple submit
buttons for end user point of view
You can have multiple submit buttons in the form, no problem. They may have the same name, type etc, but just assign them different values. Like Submit Button 1 can have value="hi" and Button 2 can have value="bye".
Then when the action function is called for the button, all you have to do when entering the function is do a check with: $(this).val
HTML:
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
jQuery:
$(function() {
$("#lets_search").bind('submit',function() {
var value = $(this).val();
if(value == "hi")
do_something;
else
do_something_else;
});
});