Главная » Языки программирования

PHP — Sending multiple forms data through jQuery Ajax

Содержание
  1. Webslesson
  2. PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial
  3. Tuesday, 10 April 2018
  4. PHP — Sending Multiple Forms Data using JQuery Ajax
  5. Source Code
  6. index.php
  7. insert.php
  8. Multiple Forms in an HTML Page
  9. Multiple Forms in an HTML Page
  10. HTML multiple forms in different sections
  11. HTML multiple form post
  12. Submit 2 different forms in HTML using POST method
  13. Submit 2 different forms in HTML using POST method
  14. Handling Submit with multiple HTML Forms
  15. Spring <form:form> two action and two submit types for one form
  16. Html javascript Submit different form same data type, 2 buttons

Webslesson

PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Tuesday, 10 April 2018

PHP — Sending Multiple Forms Data using JQuery Ajax

In this post we will learn how to send multiple forms data with jQuery and JavaScript code by Ajax with PHP. In simple terms in PHP Ajax JQuery Web Development how can we insert multiple forms data into Mysql database table by using PHP script with Jquery and Ajax. We all know HTML Forms are mainly use on most of the websites for gathering data from a particular user. Alike, forms in this website has been used different method for submit data to server. We have mainly used Simple HTML methods for obtained data from user.

In Such cases in your web development you want to required to insert multiple data in your single form submission. At that time if you have follow simple HTML form submission with PHP script then you are able to send only single data to server. For Sending or inserting or saving multiple data in single click then you have to use Jquery and javascript code. By using Jquery or Javascript code you can generate dynamic HTML field in your HTML form. We can generate any dynamic HTML field by using Jquery and append into your form fields. We can dynamically generate same name HTML field by using Javascript and append into our HTML form.

Читайте также:  Joomla free html templates

Here in this case also we have use Jquery and Jquery UI. By using Jquery UI Dialog box we have get data from user and by using Jquery code we have converted that form data into HTML table and data has been stored in hidden field in array format. Here we can add multiple number of data and store into HTML table format. Now for submit multiple form data to PHP server script we have use Ajax web development request. By using Ajax we have send multiple form data to PHP script and in PHP we have insert multiple form data. So, Here we have insert multiple form data in single click of form submission. This is new challenge in Web Development with JQuery Ajax PHP. So, if you have developed any web application development and in that you want to add multiple data in single form submission then you can get reference from this PHP JQuery Ajax Web Development Code.

Source Code

index.php

          
 
PHP - Sending multiple forms data through jQuery Ajax
 
 
 
 
 
 
 
 
 
 
First Name Last Name Details Remove

insert.php

  $_POST['hidden_first_name'][$count], ':last_name' => $_POST['hidden_last_name'][$count] ); $statement = $connect->prepare($query); $statement->execute($data); > ?>

Источник

Multiple Forms in an HTML Page

Solution 1: If you want to have multiple forms, use one form tag with multiple submit buttons. Question: I have a form which two divs that contain different ‘forms’ (i.e login and register forms).

Multiple Forms in an HTML Page

I have a form which two divs that contain different ‘forms’ (i.e login and register forms ). The login div allows registered users log in, while the register div allows new users create a new account. Now I’m trying to validate input entered into the form. I got the javascript working for the register div but it’s not working for the login div. Please how to i make the javascript work for the second div? Do i have to create different forms?

UPDATE: Here’s the javascript code:

function validateForm() < //create variables for tracking validation var valid=true; var msg; //validating the lastname field document.getElementById('lname').onkeyup=function()< if(document.getElementById('lname').value.length==0)< document.getElementById('lnameerror').style.display='inline'; document.getElementById('lnameerror').style.color='red'; valid=false; document.getElementById('lname').focus(); >else < document.getElementById('lnameerror').style.display='none'; >> if(document.getElementById('lname').value.length==0) < document.getElementById('lnameerror').style.display='inline'; document.getElementById('lnameerror').style.color='red'; valid=false; document.getElementById('lname').focus(); msg='Please enter your last name'; >else < document.getElementById('lnameerror').style.display='none'; >//validating the firstname field document.getElementById('fname').onkeyup=function() < if(document.getElementById('fname').value.length==0)< document.getElementById('fnameerror').style.display='inline'; document.getElementById('fnameerror').style.color='red'; document.getElementById('fname').focus(); >else < document.getElementById('fnameerror').style.display='none'; >> if(document.getElementById('fname').value.length==0) < document.getElementById('fnameerror').style.display='inline'; document.getElementById('fnameerror').style.color='red'; valid=false; document.getElementById('fname').focus(); msg='Please enter your first name'; >else < document.getElementById('fnameerror').style.display='none'; >//checking to see if password matches if(document.getElementById('cpword').value!=document.getElementById('pword').value) < msg='Password does not match, please try again.'; valid=false; >//Display alert on error if(valid==false) < alert(msg); >return valid; > function signin_validate() < //VALIDATION FOR SIGN IN FORM //validating the password field document.getElementById('signin_pwordl').onkeyup=function()< if(document.getElementById('signin_pword').value.length==0)< document.getElementById('signin_pworderror').style.display='inline'; document.getElementById('signin_pworderror').style.color='red'; document.getElementById('signin_pword').focus(); >else < document.getElementById('signin_pworderror').style.display='none'; >> document.getElementById('signin').onclick=function() < if(document.getElementById('signin_pword').value.length==0)< document.getElementById('signin_pworderror').style.display='inline'; document.getElementById('signin_pworderror').style.color='red'; document.getElementById('signin_pword').focus(); >else < document.getElementById('signin_pworderror').style.display='none'; >> //validating the email field document.getElementById('signin').onclick=function() < if(document.getElementById('signin_email').value.length==0)< msg='Please enter your email address'; valid=false; >> //Display alert on error if(valid==false) < alert(msg); >> 
 
Sign In Or Register 
Sign In 
 *Please enter your First Name 
 
 *Please enter your First Name 
 
 
 
 
OR
 
Register 
 *Please enter your First Name 
 
 *Please enter your Last Name

You can use two Forms, one for login and other for register. The advantage of two Forms is with the user can press «Enter» for submit the form in both cases.

  
Sign In Or Register 
Sign In 
 *Please enter your First Name 
 
 *Please enter your First Name 
 
 
 
  
OR
 
Register 
 *Please enter your First Name 
 
 *Please enter your Last Name

Multiple forms on 1 html, Multiple forms on 1 html. Ask Question Asked 6 years, 7 months ago. Modified 6 years, 7 months ago. Viewed 2k times 1 I am trying to do the …

HTML multiple forms in different sections

I have several sections in my page that I need to include under the same form tag, but doing so breaks the HTML. For example:

So basically I want to submit the form firstform but in a way that will include input4 but without submitting secondform ?

I have a pretty long page with a lot of inputs, in the middle of the page I have a different form that is used to allow file upload which I want to keep where it is in the page, however, after that section I have a continuation of the first form. so I have the first form, then another form with the file upload and then the rest of the first form.

If you want to have multiple forms, use one form tag with multiple submit buttons . Give to the buttons name and value and its time a user submit the form, chech in the back end which button has been pushed.

You could simply add an html button with an onClick event that calls a function to mimic a nested form. If the second form’s onSubmit function is pure javaScript this could be a quick cut/paste. If your second form is communicating with a server you’ll have to jump into some AJAX.

How to combine html forms, How would i combined 2 html forms I am trying to combined to forms that are in different position. so i can post all the data at once. Here is a eg <form …

HTML multiple form post

I have two forms in my page.

When i click the enter button on the form2, it end up posting to the same URL(which is what defined in form1). form1 is getting posted instead form2.

You can submit them using the java-script separatly.

HTML form with multiple «actions», I’m setting up a form wherein I need two «actions» (two buttons): 1 — «Submit this form for approval» 2 — «Save this application for later» How do I …

Источник

Submit 2 different forms in HTML using POST method

Also check this question out: submit multiple forms Question: I have form: Inside of this form I have two submit buttons with name: Those two buttons works fine for different method in my controller, I use to recognize: The question is how to make this to buttons react on different action and also how to add two actions inside of form? One form posts to a database and the other form sends an email with the details in the form.

Submit 2 different forms in HTML using POST method

I have 2 form in one HTML page. One form posts to a database and the other form sends an email with the details in the form. It is quite simple when I think of it, but tried for long without success.

  else < if(email_exist($email))< $status = 'You are already subscribed.'; >else < add_email($email); $status = 'Thank you for subscribing.'; >> > require 'index.tmpl.php'; ?>

This code works exactly expected. But now I need to submit the other form. I tried adding this code inside REQUEST_METHOD check following without success:

 $fullname = $_POST['fullname']; if(!empty($fullname)) < $status = 'sucess'; echo $status; >else
if (!empty($_POST['contactForm'])) < //do something here; >if (!empty($_POST['subscribeForm'])) < //do something here; >

Is there something I am missing??

You have used same id and names for fullname and subject fields, this might be causing some problem.

Use a name attribute for the submit buttons and check in php if the button was clicked.

if(isset($_REQUEST['contactSubmit'])) < // contact submit clicked do action based on that >if(isset($_REQUEST['submitEmail'])) < // Send email >

Only the form (and values that are associated with it) are sent. So you can’t do it the normal way.

You probably need some JavaScript to ‘click’ the other submit button.

Also check this question out: submit multiple forms

In form: Submit different button to transfer to different page (html), Don’t make a submit button. Submit buttons are to submit forms. Not to redirect to another page. Use a normal button and redirect with

Handling Submit with multiple HTML Forms

In this video excerpt from Matt Milner’s new course HTML Forms you’ll see two different Duration: 6:46

Spring <form:form> two action and two submit types for one form

Inside of this form I have two submit buttons with name:

Those two buttons works fine for different method in my controller, I use params to recognize:

@RequestMapping(value="/result.xls", method=RequestMethod.GET, params="asexcel")

The question is how to make this to buttons react on different action and also how to add two actions inside of form?

use javascript functions to post your form. You can call two different javascript functions onClick of buttons and you may submit your form from that function.

Assuming you can use Jquery,

@RequestMapping(value="/ashtml.htm", method=RequestMethod.POST)

Submitting multiple forms to same action page using one button in php, target; // Post data using Fetch fetch(form.action, < method: form.method, body: new FormData(form) >) // Prevent the default form submit e.

Html javascript Submit different form same data type, 2 buttons

Ok, so this is a bit confusing to explain but basically, I am creating a checkout page which users can either choose «delivery» or «Pickup», once chosen it ‘unhides’ the corresponding form which once filled out will send data to the next page. The problem is that I want to use the same id’s for both forms but just add an address to the delivery one but it seems like it will only take data from the first/top form which is the takeaway-

function Delivery1() < var x = document.getElementById("Pickup"); var y = document.getElementById("Delivery"); var w = document.getElementById("btn1"); var z = document.getElementById("btn2"); if (y.style.display === "none") < x.style.display = "none"; y.style.display = "block"; w.style.backgroundColor = "#b20c0c"; z.style.backgroundColor = "#cc1400"; >else < y.style.display = "none"; >>function Pickup1() < var y = document.getElementById("Delivery"); var x = document.getElementById("Pickup"); var w = document.getElementById("btn1"); var z = document.getElementById("btn2"); if (x.style.display === "none") < x.style.display = "block"; y.style.display = "none"; z.style.backgroundColor = "#b20c0c"; w.style.backgroundColor = "#cc1400"; >else < z.style.backgroundColor = "#cc1400"; x.style.display = "none"; >>
 
  
 
Pickup 
 
 
 
 
   
 
 
Delivery 
 
 
 
 
 
(Must be in or in neighbouring suburbs of leopold no more than 10km)

If its needed i can post the javascript form but its quite long. If anyone can help me with a solution or easier way to do this that would be great. Thanks 🙂

You cannot have more than one element with the same Id.

The purpose of the ID is to identify elements on page, therefore, you can have only one element per ID.

You can have multiple elements with the same «name» but not with the same ID.

To solve your problem, do the following:

  1. Put a different ID for each form.
  2. Put the attribute form in the input tag in your form.

This way, the input tag knows which form to submit.

HTML Input form* Attributes, HTML Input form* Attributes · An input field located outside of the HTML form (but still a part of the form): · An HTML form with two submit buttons, with

Источник

Оцените статью