CODEWITHSUNDEEP
htmlnode.jsfrontend
Nathan
Nathan

Reputation: 103

How to send html form data to another web server via a button click

I have two web servers. One running my front-end (example.com), one running my back-end (api.example.com).

On my front-end (example.com) I have this code which is a simple html website that has a form, with an input field and a button. When I click the button I'd like to get that data and send it to the back-end (api.example.com). For example, I put 'nathan' in the username field of the front end and click the button. I want it to send me to api.example.com/sendcode?username=nathan

I currently have this code, but the button is keeping me on the same website, instead of doing to a completely different url:

<form class="login100-form validate-form flex-sb flex-w" action="api.example.com" method="POST">
                <span class="login100-form-title p-b-51">
                    Request for a code
                </span>


                <div class="wrap-input100 validate-input m-b-16" data-validate = "Username is required">
                    <input class="input100" type="text" name="username" placeholder="Username">
                    <span class="focus-input100"></span>
                </div>


                <div class="container-login100-form-btn m-t-17">
                    <button class="login100-form-btn">
                        Send code
                    </button>
                </div>

                <div class="flex-sb-m w-full p-t-3 p-b-24">
                    <div class="contact100-form-checkbox">
                    </div>
                </div>
            </form>

With this code it's sending me to 'example.com/api.example.com?username=nathan' How would I fix this, would like to keep the two completely different?

Upvotes: 0

Views: 1642

Answers (3)

mplungjan
mplungjan

Reputation: 177851

You need a fully qualified URL with protocol - preferably https, as in action="https://api.example.com/sendcode"

Please search for AJAX and your server process. Alternatively use fetch

const username = document.querySelector("[name= username]").value;
fetch('https://api.example.com/sendcode?username='+encodeURIComponent(username))
  .then(response => response.json())
  .then(data => console.log(data));

To use Ajax, you need to grab the submit event

Here I use jQuery for speed of coding an example, just include <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in the page to use it

$(".login100-form").on("submit", function(e) {
  e.preventDefault(); // stop submit
  $.post('https://api.example.com/sendcode', 
    { data : $(this).serialize() }, // the form content in key=value format
    function(response) {
      console.log(response)
    })  
})

Upvotes: 1

Akhilesh
Akhilesh

Reputation: 196

There could be numerous methods depending upon scenarios but simplest of all which might expose data in querystring is sending a post request on button click through a simple javascript method.

Upvotes: 0

fraggley
fraggley

Reputation: 1285

Change your form action to include http:// e.g.

<form class="login100-form validate-form flex-sb flex-w" action="http://api.example.com" method="POST">

Upvotes: 1

Related Questions