Jump to content
s_avinash_s

submit with xhttp

Recommended Posts

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>

<script>
function entry() {

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 by s_avinash_s
added form data

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

<div id="Examination" class="tabcontent">                  

 <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>

<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);
}                            
</script>

 

 

Please suggest how to proceed.

 

Thanks 

Avinash

 

 

 

Edited by s_avinash_s
typo

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi

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

 

<

 <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

Edited by s_avinash_s

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by s_avinash_s
typo

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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")))

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by s_avinash_s

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by s_avinash_s

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...