CODEWITHSUNDEEP
javascriptphpjquery
Jimil
Jimil

Reputation: 660

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

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

Upvotes: 3

Views: 88

Answers (2)

Chirag Arora
Chirag Arora

Reputation: 357

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.

Upvotes: 0

N. Djokic
N. Djokic

Reputation: 1046

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']; 
}

Upvotes: 1

Related Questions