submit with xhttp

s_avinash_s · September 5, 2018

Hi

Am trying to submit the data to server, nothing is received on server.

I mean "dismissed students" and "failed students " am filling and sending but not receiving on server side.

How to get the data on server side.

<div id="Examination" class="tabcontent">
<html>
<body>
<p id="exam"></p>
dismissed students:
<input type="text" name="index1" size="10">
<br><br>
failed students:
<input type="text" name="index2" size="10">

<button type="button" onclick="entry()">submit</button>

var formData = new FormData();
var valid = new XMLHttpRequest();
valid.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("exam").innerHTML = this.responseText;
}
};
valid.open("POST", "exam.txt", true);
xhttp.send(formData);
}
</script>

I just added "formData" and i get just some junk characters not original data.How to fill the data in "formData"

How to get the data, anything else is required to make it work.

Thanks

Avinash

Edited September 5, 2018 by s_avinash_s
added form data

justsomeguy · September 5, 2018

You need to send the data to the server before you can get it on the server.

One option is to pass a form the FormData constructor:

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

Another option is to use the append or set methods to set any data you want to send:

https://developer.mozilla.org/en-US/docs/Web/API/FormData

s_avinash_s · September 6, 2018

Hi

I can able to receive a data to my server but also it goes to other page "http://192.168.3.63/exam.txt" and displays problem loading page.

I want it to send a data to server and don't want going to other page

<form action="/exam.txt" id="myForm" method="post" autocomplete="off" >
<div>
<label for="username">Dismissed students:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="useracc">Failed students:</label>
<input type="text" id="useracc" name="useracc">
</div>
<input type="submit" value="Submit!">
</form>

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);
var valid = new XMLHttpRequest();
valid.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("exam").innerHTML = this.responseText;
}
};
valid.open("POST", "exam.txt", true);
xhttp.send(formData);
}
</script>

Please suggest how to proceed.

Thanks

Avinash

Edited September 6, 2018 by s_avinash_s
typo

dsonesuk · September 6, 2018

You need to prevent the forms default action on going to specified url used in 'action' attribute, using preventDefault() by using a function called by 'onsubmit' attribute event used on the form element itself.

https://www.w3schools.com/jsref/event_preventdefault.asp

https://www.w3schools.com/jsref/event_onsubmit.asp

AND if you don't start using '<>' button on above menu, to insert your code, i won't answer you AGAIN! use it, or lose me! answering, your choice, you've been told before.

s_avinash_s · September 6, 2018

Hi

I have used buttons like above < >, dont know if its proper.Sorry if its wrong

<

<div>
<label for="username">Dismissed students:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="useracc">Failed students:</label>
<input type="text" id="useracc" name="useracc">
</div>
<input type="submit" value="Submit!">
</form>

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);
var valid = new XMLHttpRequest();
valid.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("exam").innerHTML = this.responseText;
}
};
valid.open("POST", "exam.txt", true);
xhttp.send(formData);
}

function myFunction() {
document.getElementById("myForm").addEventListener("event", function(event){
event.preventDefault()
});
}

</script>

>

I have used like above , still it goes to other page, Is anything wrong

Edited September 6, 2018 by s_avinash_s

dsonesuk · September 6, 2018

Pressing the '<>' button opens up code box that is similar to you posting a topic, you then paste your code in to that! and hit save. I'm not responding any further until you add current code to a code box.

s_avinash_s · September 6, 2018

HI

<form action="/exam.txt"  id="myForm"  method="post"  autocomplete="off" onsubmit="myFunction()">

<div>
    <label for="username">Dismissed students:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Failed students:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
<input type="submit" value="Submit!">
</form>

<script>
function entry() {

var myForm  = document.getElementById('myForm');
    formData = new FormData(myForm);
  var valid = new XMLHttpRequest();
  valid.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("exam").innerHTML = this.responseText;
    }
  };
  valid.open("POST", "exam.txt", true);
  xhttp.send(formData);
}  

     function myFunction() {
    document.getElementById("myForm").addEventListener("event", function(event){
    event.preventDefault()
});
}

                         
</script>

I have used like above , still it goes to other page, Is anything wrong

Please Help

Thanks and Regards

Avinash

justsomeguy · September 6, 2018

You're still not canceling the default submit behavior.

dsonesuk · September 6, 2018

To run the AJAX code on submission you need to run entry() NOT! myfunction() I don't know why you have that anyway. You need to send argument 'event' (without quotes) when the function entry() is called i.e.

<form action="/exam.txt"  id="myForm"  method="post"  autocomplete="off" onsubmit="entry(event)">

The entry() function requires a parameter variable which will represent the event argument with preventDefault using that variable to cancel the form submission i.e.

function entry(e) {
e.preventDefault();

...rest of ajax code

}

You don't any other function but entry() as it does all in one go, cancel submission therefore prevent going to another page, and send ajax request.

s_avinash_s · September 7, 2018

Hi

Now i am getting a sigbus interrupt and stops.

Thread #1 1 (single core) (Suspended : Signal : SIGBUS:Bus error)
   Default_Handler() at startup_S7G2.c:84 0x16fa0
   <signal handler called>() at 0xfffffff1
   _tx_timer_expiration_process() at tx_timer_expiration_process.c:270 0x39d8
   _tx_timer_interrupt() at tx_timer_interrupt.c:142 0x1e88
   0xffffffec

but am receiving some data on server side request=post and resource =/exam.txt and no data is received

<form action="/exam.txt"  id="myForm"  method="post"  autocomplete="off" onsubmit="entry(event)">
<div>
    <label for="username">Dismissed students:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Failed students:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
<input type="submit" value="Submit!">
</form>

<script>
function entry(e) {
e.preventDefault();
var myForm  = document.getElementById('myForm');
    formData = new FormData(myForm);
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("exam").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "exam.txt", true);
  xhttp.send(formData);
}  


}                   
</script>

Here is the log

resource =/exam.txt request_type =2

g_post_data =-----------------------------284341963928912

Select Option
-----------------------------284341963928912
Content-Disposition: form-data; name="jq"

1
-----------------------------284341963928912
Content-Disposition: form-data; name="jjq"

1
-----------------------------284341963928912--
</h1><a href="/">Back</a></body></html>

Is there any issue with sending from client side

Edited September 7, 2018 by s_avinash_s
typo

dsonesuk · September 7, 2018

So you decided "You know what! I think I'll change variable xhttp to valid, and change all references to valid EXCEPT! one! because that couldn't possibly make any difference" well it does!

s_avinash_s · September 7, 2018

Hi

In Above code it has not changed to xhttp, but in my code.everything is xhttp only not valid.

As it is already xhttp , that should not be an issue.something else might be

dsonesuk · September 7, 2018

What is in exam.txt? change it to the url you want this to go to/ it seems you are trying to read the txt file, and at the same time send submitted form data?

s_avinash_s · September 7, 2018

Hi

Actually exam.txt file dont have anything to send.everything i send is through "xhttp.send(formData);".

exam.txt is just kept it to receive it as a unique resource i mean

else if ((NX_HTTP_SERVER_POST_REQUEST == request_type) && (0 == strcmp (resource, "/exam.txt")))

dsonesuk · September 7, 2018

But! you are sending formdata to exam.txt which won't do anything with it, where usually you send it to the a server file to gather the data sent in formdata. I don't know how your board retrieves data from ajax, i relying on you to have that working.

s_avinash_s · September 7, 2018

Hi

Then i can pass resource in action of form

Then can you suggest me what i should pass it as second argument in xhttp.open

 xhttp.open("POST", "exam.txt", true);

dsonesuk · September 7, 2018

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

under

Sending files using a FormData object

s_avinash_s · September 7, 2018

HI

request.open("POST", "http://foo.com/submitform.php");
request.open("POST", "submitform.php");
oReq.open("POST", "stash.php", true);

In the website mentioned has 3 types open...third one is same as mine

i have will tried with

xhttp.open("POST", "exam.txt");
      xhttp.send(formData);

But still it is same..

My log:

resource =/exam.txt request_type =post

whatever is second argument, that one it is taking as resource.

Am getting a crash , not understanding whats the cause

Please help , i need to forward this to customer today

Edited September 7, 2018 by s_avinash_s

dsonesuk · September 7, 2018

I was under the impression you were getting the values from the form using ajax? what has changed since then? AS I said that was the top priority for your board to read the values from the ajax. post submission. What has happened to change that?

Try just using a directory name only, as you had in a forms action="/languages" in a example and you said it worked,.

Edited September 7, 2018 by dsonesuk

s_avinash_s · September 7, 2018

HI

Now am working with below code.

<div id="MassFlowRate" class="tabcontent2">
    <br><br>	  
    <form action="/massflow.txt"  id="myForm"  method="post"  autocomplete="off" onsubmit="massflow(event)">
    
  <div>
    <label for="MassFlowDamping">Mass Flow Damping</label>
    <input type="text" id="MassFlowDamping" name="jq">
  </div>
  <div>
    <label for="MassFlowCutoff">Mass Flow Cutoff</label>
    <input type="text" id="useracc" name="jjq">
  </div>
  
    <div>
    <label for="MassLinenumber">Mass Line number</label>
    <input type="text" id="MassLinenumber" name="jqq">
  </div>
  <div>
    <label for="MassDecimalPlaces">Mass Decimal Places</label>
    <input type="text" id="MassDecimalPlaces" name="ojq">
  </div>

<input type="submit"  value="Submit!">
</form>
    
    <script>
    function massflow(e) {
    e.preventDefault();
    var myForm  = document.getElementById('myForm');
    formData = new FormData(myForm);
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("myForm").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "massflow.txt");
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send(formData);
    }                             
}

Whatever i enter in the text boxes, i receive the values correctly .Please check the log below.

the values 5 4 3 and 12 i enter in text boxes and receive it on server.

After that it shows "Thread #1 1 (single core) (Suspended : Signal : SIGBUS:Bus error) "and crashes.Whether its a server side issue or client side cant understand.

resource =/massflow.txt request_type =2
g_post_data =-----------------------------169263147123299
Content-Disposition: form-data; name="jq"

5
-----------------------------169263147123299
Content-Disposition: form-data; name="jjq"

4
-----------------------------169263147123299
Content-Disposition: form-data; name="jqq"

3
-----------------------------169263147123299
Content-Disposition: form-data; name="ojq"

12
-----------------------------169263147123299--

If i remove below line of code

e.preventDefault();

Then it works perfectly.no crashing.

But it goes to other page , that is what not needed.

How to proceed

Edited September 7, 2018 by s_avinash_s

dsonesuk · September 7, 2018

Apparently its accessing memory it shouldn't, what to do? i don't know? ask board forum.

dsonesuk · September 7, 2018

Yes! it would! that is default action of form, I think from the beginning we didn't want IT, to do that! as it will by default go to the page set in action, SO WHY BRING IT UP AGAIN!

1) Change the ajax url to "#" OR "/" (NO text file, NO file at all) and replace true

xhttp.open("POST", "/", true);

2) REPLACE

e.preventDefault();

BACK where it was before.

I think IT listens for post request, it doesn't care where the url points to.

IF you are receiving the values from the form, IT must be coming from formdata NOT the text file, it! as you said is blank, the formdata is not added to the text file, it just won't happen! the form itself didn't send the values, because its disabled, so IT MUST BE FORMDATA.

s_avinash_s · September 8, 2018

Hi

1. With the below change of code, It goes to resource = /index.htm

xhttp.open("POST", "/", true);

And it does not take from

<form action="/massflow.txt"  id="myForm" name="myForm" method="post"  autocomplete="off" onsubmit="return massflow(event)" >

Because whenever it is "/" OR "#"it goes to index.htm from the code.

From second argument only it is taking a resource and not from "action".

dsonesuk · September 8, 2018

You don't require

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

unless your board specifically requires it!

IF used with php, the code can't read $_POST values. without it it worked fine to retrieve the values and show them. it may work with the board but not for php example below

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
        <title>Document Title</title>
    </head>
    <body>
        <div id="MassFlowRate" class="tabcontent2">
            <br><br>
            <form action="/massflow.txt"  id="myForm"  method="post"  autocomplete="off" onsubmit="massflow(event)">

                <div>
                    <label for="MassFlowDamping">Mass Flow Damping</label>
                    <input type="text" id="MassFlowDamping" name="jq" value="1">
                </div>
                <div>
                    <label for="MassFlowCutoff">Mass Flow Cutoff</label>
                    <input type="text" id="useracc" name="jjq" value="2">
                </div>

                <div>
                    <label for="MassLinenumber">Mass Line number</label>
                    <input type="text" id="MassLinenumber" name="jqq" value="3">
                </div>
                <div>
                    <label for="MassDecimalPlaces">Mass Decimal Places</label>
                    <input type="text" id="MassDecimalPlaces" name="ojq" value="4">
                </div>

                <input type="submit"  value="Submit!">
            </form>
            <div id="result">No Results to show</div>
        </div>
        <script>


            function massflow(e) {
                e.preventDefault();
                var myForm = document.getElementById('myForm');
                formData = new FormData(myForm);
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById('result').innerHTML = this.responseText;
                    }
                };
                xhttp.open("POST", "massflow.php", true);
                //xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send(formData);

            }
        </script>
    </body>
</html>

PHP - massflow.php

<?php
echo $_POST["jq"] . " aaa<br>";
echo $_POST["jjq"] . " bbb<br>";
echo $_POST["jqq"] . " ccc<br>";
echo $_POST["ojq"] . " ddd<br>";
var_dump($_POST);

IF you use massflow.txt as the URL and send this.responseText to the form using

document.getElementById('myForm').innerHTML = this.responseText;

IT will replace All inputs, ALL content within form with that of the text file.

Quote
Hi

1. With the below change of code, It goes to resource = /index.htm
xhttp.open("POST", "/", true);

Then replace with a url without a index file, i remember you had a url of '/languages' that worked for a standard form, try something similar.

rizwansyed · September 10, 2018

Similar issues

On 9/8/2018 at 8:18 PM, dsonesuk said:

Edited September 10, 2018 by rizwansyed

submit with xhttp

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Sending files using a FormData object

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in