Cannot process the data send by FormData in a PHP server - javascript

I'm using FormData to send the content of a form but it seems I can't get my script running well. It send something to the server (PHP), but on the server nothing is received and it returns an empty array.
Note: I am not using jQuery
I have a form:
<form id="main_form" name="main_form" enctype="multipart/form-data">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input class="submit" value="Click Here!" name="submit" type="submit"><br>
</form>
I sent it with Javascript XMLHttpRequest Object:
Ajax.send(new FormData(document.getElementById("main_form")));
I put here the FireBug Info:
Params:
-----------------------------19926109411601--
Response:
// using the following
print_r($_REQUEST);
print_r(file_get_contents("php://input"));
// resposne
Array
(
)
-----------------------------139502076225657--
Request Headers:
Content-Type: application/json
Response Headers:
Content-Type: text/html
I also have tried another header than json, but to no avail:
application/x-www-form-urlencoded
How should I handle this?

I test with this and it works.
<form id="main_form" name="main_form" action="test2.php" enctype="multipart/form-data" method="post">
<input type="text" name="test1"><br>
<input type="text" name="test2"><br>
<input type="text" name="test3"><br>
<input class="submit" value="Click Here!" name="submit" type="submit"><br>
</form>
The result like this:
Array ( [test1] => asd [test2] => a [test3] => asd [submit] => Click Here! )
Best Regards
Regan

Related

how can I know if submit post method was success in html

I have a form in html with a post method
I need to know when the response to the post request
how can I catch it?
<form action='MyUrl' method="post" onsubmit="sub()">
<input type="text" name="fname" required oninvalid="this.setCustomValidity('first name is required')"
oninput="this.setCustomValidity('')">
<button type="submit" name = "submit" value = "Submit">send</button>
</form>

POST XML to web service with javascript

I am new with javascript, need help to post data to web service.
I have simple page:
<form action="#" class="simple-form">
<input id="A" type="text" autocomplete="off">
<input id="B" type="text" autocomplete="off">
<input id="amount" type="text" autocomplete="off">
</form>
<button align="middle" class="button1" id="create"
onclick="f1()">Create</button>
I need to get values of input A, B and amount, then pass them to url: "http://localhost:8080/dopayment/" with POST in xml format. The exact xml format must be:
<Payment>
<a>xxx</a>
<b>xxx</b>
<amount>xx</amount>
</Payment>
P.S from Postman I have checked above given XML with post to given URL, it is working.
Thanks in advance to everyone.
Since you create the form, put button into it to trigger submit event.
<form action="#" class="simple-form">
<input id="A" type="text" autocomplete="off">
<input id="B" type="text" autocomplete="off">
<input id="amount" type="text" autocomplete="off">
<input type="submit" align="middle" class="button1" value="Create">
</form>
You can sent info by AJAX, this way:
document.getElementsByClassName("simple-form")[0].addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = `<Payment>
<a>${formData.get('A')}</a>
<b>${formData.get('B')}</b>
<amount>${formData.get('amount')}</amount>
</Payment>`;
fetch('http://example.com', {
method: 'POST', // or 'PUT'
body: data, // data can be `string` or {object}!
headers:{
'Content-Type': 'application/xml'
}
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
});

<keygen> element empty in POST after form submit

I have a form as follows:
<form name="signupForm" id="signupForm" method="POST" ng-submit="create()">
<input type="hidden" name="username" id="username" value="mtest">
<input type="text" placeholder="Account name" name="webid" ng-model="account.webid" ng-focus="isFocused" ng-blur="isFocused = false"><br>
<input type="text" placeholder="Full name" name="name" ng-model="account.name"><br>
<input type="text" placeholder="Email" name="email" ng-model="email"><br>
<input type="text" placeholder="Picture URL" name="pictureURL" ng-model="account.pictureURL"><br>
<keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" form="signupForm" hidden>
<br>
<input type="submit" id="submit" value="Submit">
</form>
The data is passed to the POST as follows:
$http({
method: 'POST',
url: uri,
data: $("#signupForm").serialize(),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/x-x509-user-cert'
},
withCredentials: true
}).
Once I submit the form to send it with a POST http request, I get the $("#signupForm").serialize() as follows:
"username=mtest&webid=mtest.databox.me%2Fprofile%2Fcard%23me&name=M+Test&email=mtest%40test.com&pictureURL=picURL&spkac="
Why is the keygen element always empty? Is there anything wrong I am doing?
Any answer is appreciated, thanks in advance.
Solved!
So preparing an HTTP Request to do that doesn't work for some reason. Instead the form action needs to be set and form submitted straight away in order to send the keygen with it. Here the solution:
in the Template the action is parametrical:
<form name="signupForm" id="signupForm" method="POST" action="{{actionUrl}}">
...
<input type="submit" id="btnSubmit" value="Submit" ng-click="completeForm()">
and the Controller sets the action and submits the form as follows:
$scope.completeForm = function () {
$scope.actionUrl = "https://" + document.getElementById("username").value + "...";
document.getElementById("signupForm").submit();
};

How can I pass in this data into a form submit call (similar to data parameter for an ajax post)?

I have the following code that submits data to an asp.net-mvc controller action via jquery ajax
var queryString = "name=Joe&age=22&weight=200";
$.ajax({
url: '/MyController/Generate',
type: 'post',
data: queryString,
dataType: 'json'
});
this works fine and binds to the controller action parameter
public ActionResult Generate(MyParams p)
{
Console.Write(p.name);
Console.Write(p.age);
Console.Write(p.weight);
}
The issue now is that I need to change this from ajax to being a regular form post (I need to use regular form post as I am now returning a file from the controller action). I am trying to figure out how I can get that same querystring variable to get submitted as part of a regular form post (non ajax).
Is this possible?
try with html.beginform
#using (Html.BeginForm("Generate", "MyController","name=Joe&age=22&weight=200", FormMethod.Post, new { id = "frmMyForm" }))
{
// Your form elements
}
If you want that data to be fixed you can make a form like this:
<form action="/MyController/Generate" method="post">
<input type="hidden" name="name" value="Joe" />
<input type="hidden" name="age" value="22" />
<input type="hidden" name="weight" value="200" />
<input type="submit" />
</form>
Otherwise, if you want the data to be editable, it goes like this:
<form action="/MyController/Generate" method="post">
<input type="text" name="name" />
<input type="number" name="age" />
<input type="number" name="weight" />
<input type="submit" />
</form>

Process html form response

I have an html form that looks like this:
<form name="form_" method="post" id="contactUs" action="myPage.aspx" enctype="text/plain">
<input type="text" class="acc_input" name="mail" id="emailadress" />
<input type="text" class="acc_input" name="name" id="firstName" />
<input type="button" value="Send" />
</form>
Now lets assume that "myPage.aspx" returns "Done" if success or returns "Error" if fails.
I want to display an alert showing the result.
How do i handle the myPage.aspx response?
You can emit javascript with the result you want:
Response.Write("<script language='javascript'>alert('Done');</script>")

Categories