how to send form element values directly to php page using javascript

Question

What I am trying here is when you click on submit button I am calling one javascript function which takes all the form element values and passes it to the php page without storing them inside the variable and then send those variables.

Example of my form:

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" />
  <br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" />
  <br />
  <label>File to stash:</label>
  <input type="text" name="email" required />
  <input type="button" onsubmit="sendvalues()" value="Stash the file!" />
</form>

Now on javascript, I want to send userid and email fields to directly go to php page without first retrieving them into a variable and then send that variable via ajax.

function sendValues() {
  var formElement = document.querySelector("form");
  console.log(formElement);
  var formData = new FormData(formElement);
  var request = new XMLHttpRequest();
  request.open("POST", "<?php echo VIEW_HOST_PATH;?>process_data.php");
  formData.append("process_type", 'process_data');
  request.send(formData); //want to send all form userid, email directly to php page
  request.onreadystatechange = (e) => {
    console.log(request.responseText)
  }
}

Is this possible to send user_id and email values to php page directly? So, for example, form element which contains emailed and user info and any other forms element and they all send to php page via ajax but most important without storing this element values in javascript variables. thanks

N. Djokic · Accepted Answer · 2019-08-31 03:16:33Z

1

In your form you should specify property "action". That action would be your php file that will handle your submit action. Also you could add to this form id selector.

<form id="file-info" enctype="multipart/form-data" action="/process_data.php" method="post" name="fileinfo">

And now in your function sendValues() you could submit form like this:

function sendValues() {
document.getElementById("file-info").submit();
}

or you do not even need this function if you set your input button type to submit:

 <input type="submit" name="submit" />

And then in your php file you can use your variables like:

if (isset( $_POST['submit'])) 
{
 $userId = $_POST['userid'];
 $email = $_POST['email']; 
}

edited Aug 31, 2019 at 3:16

answered Aug 31, 2019 at 3:07

N. Djokic

1,0561 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jimil Over a year ago

I don't want to submit the function to any php page. All I wanted to do is submit the form using javascript and ajax only but send the form data without extracting them on javascript side like storing into variable but send all the elements value directly to php page.

Chirag Arora · Accepted Answer · 2019-09-02 06:22:03Z

0

Try this one then

HTML CODE

<form enctype="multipart/form-data" method="post" class='submit_form' name="fileinfo">
<label>Your user name:</label>
<input type="text" name="name" id='name' placeholder="name" required /><br />
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" id='userid' placeholder="email" required size="32" maxlength="64" /><br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>File to stash:</label>
<input type="text" name="email" required />
<input type="button" value="Stash the file!" class='submit' />

JQUERY CODE on the same page (include jquery)

$('body').on('click', '.submit', function(e) {
e.preventDefault();
    $.ajax({
        'url': 'mpay.php',
        'type': 'POST',
        'data': $('.submit_form').serialize(),
        success: function(response) {
           console.log(response);
        }
    });

});

PHP CODE The file name is mpay.php

$arr = [
 'name' => $_POST['name'],
 'email' => $_POST['email'],
];
echo "<pre>;
print_r($arr);
echo "</pre>";

Hope this helps.

edited Sep 2, 2019 at 6:22

answered Aug 31, 2019 at 23:01

Chirag Arora

3573 silver badges13 bronze badges

1 Comment

Jimil Over a year ago

hi how you stored email: and name: on javscript code but what I wanted to do is rather than storing in this variables, I wanted to directly send the submitted values to PHP page via ajax. For example formelements - which holds all the elements and thr values. And then I am sending this formelements on php page.

Collectives™ on Stack Overflow

how to send form element values directly to php page using javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related