JavaScript xhr GET method not sending form data to php - javascript

I have a problem described as title.
<form id="mloginform">
Manager ID: <input type="text" name="mid" id="mid" > </label>
<br/>
Password: <input type="text" name="mpwd" id="mpwd"> </label>
<br/>
<input type="submit" name="mlogin" value="login" id="mlogin"/>
</form>
Above is the simple form i have.
var xhr = createRequest(); // this is in another js.
function checklogin(mid, mpwd) {
var mid = document.getElementById("mid").value;
var mpwd = document.getElementById("mpwd").value;
var moutput = document.getElementById("moutput");
alert(encodeURIComponent(mid));
alert(encodeURIComponent(mpwd));
moutput.innerHTML = "";
xhr.open("GET", "mlogin.php?mid=" + encodeURIComponent(mid) + "&mpwd=" + encodeURIComponent(mpwd) + "&value=" + Number(new Date), true);
xhr.send(null);
}
Above is the xhr code. two alert did show the input value. but xhr.open cant send data to php file (only page refreshed, nothing else); i am pretty sure the problem is located in xhr.open, because php works fine if i use following form.
<form action="mlogin.php" method="get" id="mloginform">
Manager ID: <input type="text" name="mid" id="mid" > </label>
<br/>
Password: <input type="text" name="mpwd" id="mpwd"> </label>
<br/>
<input type="submit" name="mlogin" value="login" id="mlogin"/>
</form>

Related

web data capture .NET server

I'm trying to do a data extraction from a .NET web server but I cannot send the data correctly.
If I post the data with a normal html form I can show the correct page with the information I need.
The html form contains valid fields as __VIEWSTATE, __EVENTVALIDATION and other fields to query the server.
This form works fine but I cannot capture any data.
If I try to send the same data (with the POST method) using javascript with ActiveXObject("Msxml2.XMLHTTP.3.0"); or using Server.CreateObject("MSXML2.ServerXMLHTTP") in classic ASP, I receive in return from the server the message:
''The state information is invalid for this page and might be corrupted.,, or the correct page w/o the result of the query (page empty).
I think the problem is in the header, so I've tried to send in many formats but w/o success.
Any help ?
the following is the code that correctly send data
<form name="aspnetForm" method="post" action="http://geon....neNew.aspx" id="aspnetForm">
<input type="text" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="text" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />`enter code here`
<input type="text" name="__VIEWSTATE" id="__VIEWSTATE" value="/--------- here the key --"/>
<input type="text" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/--------- here the key --" />
<br>
DUG:
<input name="ctl00$ContentPlaceHolder1$txtDUG" type="text" id="ctl00_ContentPlaceHolder1_txtDUG" <td id="ctl00_ContentPlaceHolder1_TableCell3">
<br>
Denomin.:
<input name="ctl00$ContentPlaceHolder1$txtDenominazione" type="text" value="indipendenza" id="ctl00_ContentPlaceHolder1_txtDenominazione" >
<br>
Civico:
<input name="ctl00$ContentPlaceHolder1$txtCivico" type="text" value="34" id="ctl00_ContentPlaceHolder1_txtCivico" />
<br>
Espon:
<input name="ctl00$ContentPlaceHolder1$txtEsponente" type="text" id="ctl00_ContentPlaceHolder1_txtEsponente" >
<br>
CAP:
<input name="ctl00$ContentPlaceHolder1$txtCAP" type="text" maxlength="5" id="ctl00_ContentPlaceHolder1_txtCAP" >
<br>Prov.:
<input name="ctl00$ContentPlaceHolder1$txtSiglaProv" type="text" id="ctl00_ContentPlaceHolder1_txtSiglaProv" />
<br>
Comune:
<input name="ctl00$ContentPlaceHolder1$txtComune" type="text" value="gazzo" id="ctl00_ContentPlaceHolder1_txtComune" >
<b>Informazioni addizionali</b></p>
<input id="ctl00_ContentPlaceHolder1_chkUffRecapito" type="checkbox" name="ctl00$ContentPlaceHolder1$chkUffRecapito" tabindex="9" />
<label for="ctl00_ContentPlaceHolder1_chkUffRecapito">Centro/Presidio decentrato di distribuzione</label>
<br>
<input id="ctl00_ContentPlaceHolder1_chkCodPre" type="checkbox" name="ctl00$ContentPlaceHolder1$chkCodPortalettere" tabindex="10" />
<label for="ctl00_ContentPlaceHolder1_chkCodPre">Numero Potere</label>
<br>
<input id="ctl00_ContentPlaceHolder1_chkAmbigui" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAmbigui" tabindex="11" />
<label for="ctl00_ContentPlaceHolder1_chkAmbigui">Scarta in caso di indirizzi ambigui</label>
<br>
<input type="submit" name="ctl00$ContentPlaceHolder1$cmdNormalizza" value="Normalizza" id="ctl00_ContentPlaceHolder1_cmdNormalizza" />
<br>
</form>
</body>
</html>
---- and this is the code that capture the data in the form but send data incorrectly:
<script>
var req1 = new XMLHttpRequest();
req1.open('GET', document.location, false);
req1.send(null);
var headers = req1.getAllResponseHeaders().toLowerCase();
//alert(headers);
document.write(headers+'<p>');
var formElements=document.getElementById("aspnetForm").elements;
var postData={};
var qs;
qs="";
for (var i=0; i<formElements.length; i++) {
if (formElements[i].type!="submit")
{
qs=qs + formElements[i].name + "=" + formElements[i].value + "&" ;
// alert(formElements[i].name);
}
}
//qs = qs.substring(0, qs.length - 1);
qs=qs +"ctl00$ContentPlaceHolder1$cmdNormalizza=Normalizza"
document.write(qs);
var req = new ActiveXObject("Msxml2.XMLHTTP.3.0");
req.open('POST', 'http://geono....LineNew.aspx', false);
//req.open('POST', 'http://vepdcm1sa01/exps/x2/read.asp', false);
//req.setRequestHeader('Content-Type', 'text/plain;');
req.setRequestHeader('cache-control','private');
//req.setRequestHeader('content-length','162107');
req.setRequestHeader('content-type','text/plain');
req.setRequestHeader('server','microsoft-iis/7.5');
//req.setRequestHeader('date',' tue, 19 feb 2019 10:17:55 gmt');
req.send(qs);
if(req.status == 200)
document.write(req.responseText);
</script>

How do I submit form input data with POST request when button is clicked?

So far, I have a basic form that gets 2 inputs. The submit button successfully adds the new record to the SQLite database but with the values from the input elements. I am definitely missing how to properly set this up in my JavaScript code but I just don't know how to implement it.
JavaScript
var xhttp = new XMLHttpRequest();
const items_url = "http://127.0.0.1:3000/items"
function addingItems(){
xhttp.open("POST", items_url, true);
// Value implementation here maybe...
console.log("Form button has been clicked for item entry submission");
console.log(xhttp);
xhttp.send();
}
HTML
<form method="POST" class="addItem">
<input type="text" placeholder="Title" name="item_title" required>
<input type="text" placeholder="Number" name="item_number" required>
<button id="submitItem" type="submit" form="addItem" value="Submit" onclick="addingItems()">Submit</button>
</form>
Please let me know if you need more information.
You need to add FormData to ajax object in JavaScript:
var xhttp = new XMLHttpRequest();
const items_url = "http://127.0.0.1:3000/items"
function addingItems(){
xhttp.open("POST", items_url, true);
console.log("Form button has been clicked for item entry submission");
console.log(xhttp);
var form=new FormData()
form.append("item_title",document.getElementsByName("item_title")[0].value)
form.append("item_number",document.getElementsByName("item_number")[0].value)
xhttp.send(form);
}
<form method="POST" class="addItem">
<input type="text" placeholder="Title" name="item_title" required>
<input type="text" placeholder="Number" name="item_number" required>
<button id="submitItem" value="Submit" onclick="addingItems()">Submit</button>
</form>
Using type="submit" will cause the page to reload, you can change that behavior either by using type="button" or by using event.preventDefault(); in your addingItems() function.
And then on the click of button you can call a function which will get your form data and send to your server
Following are the links that you can follow to achieve your target.
Using AJAX
Using XMLHttpRequest
Try
<form method="POST" class="addItem" id="my-form-id">
<input type="text" placeholder="Title" name="item_title" required>
<input type="text" placeholder="Number" name="item_number" required>
<button id="submitItem" type="submit" form="addItem" value="Submit" onclick="addingItems()">Submit</button>
</form>
And the js function to be:
function addingItems(){
xhttp.open("POST", items_url, true);
var formData = new FormData( document.getElementById("my-form-id") );
xhttp.send(formData);
}
Now the FormData class is supported by most browsers, but if you are targeting some legacy browsers, you can try this:
function addingItems(){
xhttp.open("POST", items_url, true);
var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);
var postData = input.name + "=" + inputData;
xhttp.send(postData);
}
I don't know if the later will work as is, might have to debug a little.

jquery and javascript obtained input value of input type equals text but it is empty even though it's not

When i try to obtain the values of input type=text is empty even though they are not. Any idea why?
var form_data = new FormData(document.getElementById('box')); // Creating object of FormData class
var cust_name = document.getElementById("cust_name").value;
var order_num = $("#order_num").val();
$("#search").click(function(){
console.log(cust_name) //they are empty even though it's not
console.log(order_num) //they are empty even though it's not
$.ajax({
url: "search.php",
method: "POST",
data: {cust_name: cust_name, order_num: order_num},
error: function (request, status, error) {
$("body").append("<div style='background:rgba(255,0,0,0.8);float:left;position:fixed'>" + request.responseText + "</div>")
}
}).done(function(msg) {
$("body").append("<div style='background:rgba(255,0,0,0.8);float:left;position:fixed'>" + msg + "</div>")
});
});
});
and here is my html code:
<form id="box" method="post">
<input type="text" id="order_num" name="order_num" placeholder="🔠Order number"/> <br/>
<input type="text" id="cust_name" name="cust_name" placeholder="🔠Customer name"/> <br/>
sent date: <input type="date" name="sent_date" id="sent_date"/><br/>
<input type="text" id="sales_person" name="sales_person" placeholder="🔠sales person"/><br/>
<input type="button" id="search" class="button" value="search" name="search"/>
</form>
You need to attach an event listener to the submit event of your form to get the values when the user submits. Here's a stripped down working example.
The problem with your code is that it runs right away when the page loads, and because JavaScript is a runtime language, it doesn't go back and update those variables with the current value.
You could also put those two variable declarations INSIDE your click handler (Shown in bottom solution).
Solution (Preferred)
document.getElementById('box').addEventListener('submit', function(e) {
e.preventDefault();
var form_data = new FormData(this);
var cust_name = document.getElementById("cust_name").value;
var order_num = document.getElementById("order_num").value;
console.log(cust_name, order_num);
});
<form id="box" method="post">
<input type="text" id="order_num" name="order_num" placeholder="🔠Order number"/> <br/>
<input type="text" id="cust_name" name="cust_name" placeholder="🔠Customer name"/> <br/>
<button type="submit">Search</button>
</form>
Notes
I used <button> instead of <input type="button">
I passed this to FormData because we have a reference to it from the event handler
I used e.preventDefault() to stop the page from refreshing by default.
Solution (Minimal Code Change)
$("#search").click(function(){
var form_data = new FormData(document.getElementById('box'));
var cust_name = document.getElementById("cust_name").value;
var order_num = $("#order_num").val();
console.log(cust_name);
console.log(order_num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="box" method="post">
<input type="text" id="order_num" name="order_num" placeholder="🔠Order number"/> <br/>
<input type="text" id="cust_name" name="cust_name" placeholder="🔠Customer name"/> <br/>
sent date: <input type="date" name="sent_date" id="sent_date"/><br/>
<input type="text" id="sales_person" name="sales_person" placeholder="🔠sales person"/><br/>
<input type="button" id="search" class="button" value="search" name="search"/>
</form>

How to reuse an ajax form-loading function to open up several tabs with different parameters each?

I have a 3 forms on different web pages, each with a submit button. Clicking submit on an individual page, opens up an AJAX call to process_form function of unknown origin (see function below), which loads the form for you. Essentially, upon clicking Submit, the function assembles form values, into a request and loads up a sub-page via an AJAX request.
Each form of the 3 is the same at its core, but has slight variations and options.
What I want to do is to merge the 3 forms into a single one, and then have my clicking Submit open up 3 new browser tabs, one for each specific form option.
So I am looking for a way to reuse this process_form function (desirable), to open up the windows, or maybe modify it (undesirable as its being used by lots of other files) to accomplish my goal.
See snippet below to see how it works on my end. An answer I am seeking is to have a single form that opens up the 3 original forms, but each being in a new tab window.
//abridged version of the library function I use for AJAX
function process_form(form, url, redir, response, method, delay) {
var formObj = document.getElementById(form);
var post_str = "";
if (method == "POST") {
for (var i = 0; i < formObj.length; i++) {
if (formObj.elements[i].tagName == "INPUT") {
if (formObj.elements[i].type == "text") {
post_str += escape(formObj.elements[i].name) + "=" + encodeURIComponent(formObj.elements[i].value) + "&";
}
}
}
}
//here this will be a load_page() call
//but replaced here with alert to show functionality
alert("Load Form with [" + post_str + "]");
}
<form id="a">
<input name="opt_a" type="text" value='4' />
<input type="button" onclick="process_form('a', '', '', '', 'POST', '')" value="SelectA" id="selButton" name="selButton" />
</form>
<form id="b">
<input name="opt_b" type="text" value='5' />
<input type="button" onclick="process_form('b', '', '', '', 'POST', '')" value="SelectB" id="selButton" name="selButton" />
</form>
<form id="c">
<input name="opt_c" type="text" value='6' />
<input type="button" onclick="process_form('c', '', '', '', 'POST', '')" value="SelectC" id="selButton" name="selButton" />
</form>
Merged Form will look something like this (unfinished)
<form id="a_b_c">
<input name="opt_a" type="text" value='4' />
<input name="opt_b" type="text" value='5' />
<input name="opt_c" type="text" value='6' />
<!-- submit functionality opening up separate tabs is what I seek -->
</form>
Your <form> tags have no attributes, so if your actual code does the same, it's sending the form values via GET.
Using JavaScript, you could grab the values of the form elements, build the appropriate URLs with the values from the forms included in the URL (ex. mypage.php?input1=value1&input2=value2), and then use window.open() to open three new tabs with the appropriate URL in each.
Example:
function process_form() {
var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
var value3 = document.getElementById('value3').value;
window.open('mypage.php?value1=' + value1);
window.open('mypage.php?value2=' + value2);
window.open('mypage.php?value3=' + value3);
}
<form>
<input type="text" name="value1" id="value1" />
<input type="button" onclick="process_form()" value="SelectA" id="selButton" name="selButton" />
</form>
<form>
<input type="text" name="value2" id="value2" />
<input type="button" onclick="process_form()" value="SelectB" id="selButton" name="selButton" />
</form>
<form>
<input type="text" name="value3" id="value3" />
<input type="button" onclick="process_form()" value="SelectC" id="selButton" name="selButton" />
</form>

Confused about the action tag

I've got an html page with a form set up as follows:
<form name="form" action="process.php" method="POST">
Username: <input type="text" name="user">
<br>
Password: <input type="text" name="pass">
<br>
<input type="submit" value="LOGIN">
</form>
When I click my submit button, the data is sent to my process.php script, and that's all well and good.
But what I'd like to do is send a JSON string to a PHP script instead, and have that PHP script parse it.
As such I tried the following:
<body>
PLEASE ENTER YOUR INFORMATION:
<form name="form" action="">
Username: <input type="text" name="user">
<br>
Password: <input type="text" name="pass">
<br>
<input type="submit" value="LOGIN" onclick="encrypt(this.form, 0)">
</form>
</body>
<script LANGUAGE="JavaScript">
function encrypt(form, key){
var user = form.user.value;
var pass = form.pass.value;
var str = {"username": user, "encrypted_password": pass};
var JSON_str = JSON.stringify(str);
var xhr = new XMLHttpRequest();
xhr.open("POST", "process.php", true);
xhr.send(JSON_str);
}
</script>
Yet this doens't do anything. When I click the submit button nothing happens. Even if I could just get process.php to display something when I click the submit button, that would be enormously helpful.
Thanks!
If you want to use onclick event then you need to replace submit with button.
<input type="button" value="LOGIN" onclick="encrypt(this.form, 0)">
and submit form with javascript.

Categories