Html Form on Submit button

Question

I need help. I have a basic html form which is below. Now when i call it up on my browser, i have two fields also know as:

Summary = summ Description = comment

Now on the Submit button the action is to call a url, but i want the above two fields to be part of the url

So if i manually put John is Summary field & Smith in Description field, the url must catch the field values and be like

http://itds041/trackit/app%20-%20cop...EST+USER&summ=John&comment=Smith

Blockquote

<form action="/trackit/app%20-%20copy/curl_create.php?thisuser=TEST+USER&summ=&comment=" method="post" target="_self">

Summary:
Description:

Blockquote

See screenshot to explain. enter image description here

Regards Shabeersa

Answer 1

"Now on the Submit button the action is to call a url, but i want the above two fields to be part of the url"

There are 2 ways to make the value of fields as part of the URL:

1. Use GET method in form. This is the recommended way as it is easier and semantically more correct -- data in POST request normally is passed as body, not as part of URL.

   A simple jsfiddle ( https://jsfiddle.net/cshao/mtzqpprx/1/ ) is made for reference. After the form is submitted by clicking the Submit button, a GET request is sent, with fields data embeded in URL.

2. Use POST method to submit the form , but the HTTP request is sent by JavaScript, not by form's action.

   Another jsfiddle ( https://jsfiddle.net/cshao/jboq9qrw/1/ ) is made for example. The key steps here are:

   • <form onsubmit="submitForm(event)"> . Attach event listener for submit event.
   • event.preventDefault(); . Prevent form element's default submission behaviour.
   • var url = 'https://example.org/api?' + $.param(params); . Construct URL with fields' data, and then send HTTP request to it. In the jsfiddle example, I choose to send Ajax request and print the response data.