How do I use the POST method?

Question

I'm on a dilemma about "how to use the POST method to store data sent from my form". Below is my form:

<form class="myForm">
    <div class="form-group">
        <label for="nameForm">Name</label>
        <input type="text" class="form-control" id="nameForm" placeholder="Your name here">
    </div>
    <div class="form-group">
        <label for="selectForm">Your college year</label>
        <select class="form-control" id="selectForm">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label for="textForm">Comment(s)</label>
        <textarea class="form-control" id="textForm" rows="3" placeholder="Leave your comment(s) here"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

All that I want is when the users submit their answers it will be stored in a .json file, using POST method and jQuery. But how to use this method? What do I need to have to contain a .json file that store my form datas?

NOTE: How do I know the correct URL to use in POST method? I mean:

$.post( "urlHere", function(data) {
   $(".result").html(data);
});

Thanks in advance, hope you guys can help me with this! Best regards!

so basically you want to store the form data before post...am i correct ?? — Rohit Kumar, Nov 13 '17 at 00:06
Where should this *"`.json` file*" be stored? On a server? On the user's computer? — Phil, Nov 13 '17 at 00:08
@Rajaji could be, I think it will be better. I just need to store the data. — Mathaus Vila Nova, Nov 13 '17 at 00:11
okay great...some minor modification to your code... i am putting my views in answer — Rohit Kumar, Nov 13 '17 at 00:11
@MathausVilaNova in that case, you do **not** need to use a POST request. — Phil, Nov 13 '17 at 00:22
@MathausVilaNova go ahead and check now..let me know if any modifications — Rohit Kumar, Nov 13 '17 at 00:25
Possible duplicate of [Download JSON object as a file from browser](https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser) — Phil, Nov 13 '17 at 00:26
Possible duplicate of [Convert form data to JavaScript object with jQuery](https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) — Phil, Nov 13 '17 at 00:28
@Phil thanks for your replies, I checked that but I guess it doesn't a possible duplicate topic. Anyway, thank you! — Mathaus Vila Nova, Nov 13 '17 at 01:16

Rohit Kumar · Accepted Answer · 2017-11-13T01:28:24.583

0

First thing first...start by giving ID .. give the form an ID , give it an action method (what you call a POST URL) ..

also if button type="submit" it will make a post request and you will never get a chance to store the value..as it is to is easy in ajax calls...

here is working code for some of your problems...and also the Jsfiddle

$("#submitButton").click(function() {

  console.log($("#myForm").attr("action"));
  console.log($("#selectForm option:selected").text());
  console.log($("#nameForm").val());
  console.log($("#textForm").val());

  // you can store the form Value here and then
  // $.ajax({
            type: 'POST',    
            url:$("#myForm").attr("action"),
             data:JSON.stringify({ 
                   name : $("#nameForm").val(),
                   comment : $("#textForm").val() ,
                   selectedOption : $("#selectForm option:selected").text()
                }),
            success: function(msg){
                        // do something else after making the ajax call
             });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="myForm" class="myForm" action="somepage.html" action="post">
  <div class="form-group">
    <label for="nameForm">Name</label>
    <input type="text" class="form-control" id="nameForm" placeholder="Your name here">
  </div>
  <div class="form-group">
    <label for="selectForm">Your college year</label>
    <select class="form-control" id="selectForm">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
  </div>
  <div class="form-group">
    <label for="textForm">Comment(s)</label>
    <textarea class="form-control" id="textForm" rows="3" placeholder="Leave your comment(s) here"></textarea>
  </div>
  <button type="button" id="submitButton" class="btn btn-primary">Send</button>
</form>

edited Nov 13 '17 at 01:28

answered Nov 13 '17 at 00:16

Rohit Kumar

1,777
2
13
26

Raja ji, this work, I can see the results on my console tab. The first step I guess it's ok. Going ahead, if I save my form values into variables (I would like to use AJAX), how this will appear on my " action="somepage.html" "? Sorry for that "basics" questions. – Mathaus Vila Nova Nov 13 '17 at 01:10
console.log($("#myForm").attr("action")); is the URL to which the form will submit.... anyways..if you **$("#myForm").submit()** it will automatically submit to the URL.... but i recomment you write an **ajax** to the url – Rohit Kumar Nov 13 '17 at 01:17
Can you help with this? – Mathaus Vila Nova Nov 13 '17 at 01:22
yeah,,,, i wrote the ajax call too – Rohit Kumar Nov 13 '17 at 01:28
Great, you help me a lot, many thanks Raja ji!! Now I just need to fix an error related to my request, I think that when we use JSON we need a webserver to check out the result. I will work on it! – Mathaus Vila Nova Nov 13 '17 at 01:43
is that cross origin request error... ?? i would want to know about the error too – Rohit Kumar Nov 13 '17 at 01:46
1

Yeah, you got it! "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." – Mathaus Vila Nova Nov 13 '17 at 01:47
Yeah ...it will work on Firefox ... If you want it work on chrome ..you need to disable security on chrome.exe or create a webserver – Rohit Kumar Nov 13 '17 at 01:49

How do I use the POST method?

1 Answers1