What is the best way to invoke a new webpage while also incorporating the data from a form variable?

Question

What is the best way to invoke a new webpage while also incorporating the data from a form variable?

I am looking to create a link that directs to a new page in the following format:

/topic/create&qty=4

Currently, I have the value (which is the number 4) stored in an input field within a form. Initially, I attempted to include everything in the form using POST method but realized this is not the desired approach. I simply want a button click to navigate to a new page and pass the value from the input field. The reason for preferring just a link is that future posts from the form will be handled differently.

Is there a way to achieve this? I understand that

<form action="/adminTopics" method="post">

is not the solution I am seeking.

javascript html css

Answer 1

Answer №1

POST cannot be used to send data through the URL, but you can utilize GET in this manner: /topic/create?qty=4

UPDATE: Explanation

If you input red in the text box and submit it using this form...

<form action="/handler.php" method="GET">
    <input type="text" name="color" />
    <input type="submit" />
</form>

you will receive the same outcome on the server as if you had clicked on this link

<a href='/handler.php?color=red'>rum</a>

Answer 2

POST cannot be used to send data through the URL, but you can utilize GET in this manner: /topic/create?qty=4

UPDATE: Explanation

If you input red in the text box and submit it using this form...

<form action="/handler.php" method="GET">
    <input type="text" name="color" />
    <input type="submit" />
</form>

you will receive the same outcome on the server as if you had clicked on this link

<a href='/handler.php?color=red'>rum</a>

Answer 3

Answer №2

When dealing with a URL like /topic/add?quantity=3

that needs to be submitted, you have a couple of options:

<form action="/topic/add" method="post">
<input type="hidden" name="quantity" value="3" />
</form>

<a href="#" onclick="document.forms[0].submit(); return false">Submit</a>

Alternatively, you can use the following script:

<script>
window.onload=function() {
  document.forms[0].submit();
}
</script>

If submitting via POST is not required, simply append the data to the URL for a GET request:

<input id="quantity" type="hidden" name="quantity" value="3" />

<a href="/topic/add"
 onclick="location=this.href+'?quantity='+document.getElementById('quantity').value; 
 return false">Go</a>

Answer 4

When dealing with a URL like /topic/add?quantity=3

that needs to be submitted, you have a couple of options:

<form action="/topic/add" method="post">
<input type="hidden" name="quantity" value="3" />
</form>

<a href="#" onclick="document.forms[0].submit(); return false">Submit</a>

Alternatively, you can use the following script:

<script>
window.onload=function() {
  document.forms[0].submit();
}
</script>

If submitting via POST is not required, simply append the data to the URL for a GET request:

<input id="quantity" type="hidden" name="quantity" value="3" />

<a href="/topic/add"
 onclick="location=this.href+'?quantity='+document.getElementById('quantity').value; 
 return false">Go</a>

What is the best way to invoke a new webpage while also incorporating the data from a form variable?

Answer №1

Answer №2

Similar questions

How can I include one of the three dependent select boxes in my dynamically generated field within a loop?

Is there a way to modify the height and width of a div layer?

Height not being generated by Div element

Switch the Angular app written in Javascript to Typescript

How can I retrieve columns containing HTML tags in MySQL?

The bodyparser in Express seems to be malfunctioning

OnLoad event in ASP .NET not triggering

The Controller Method is passing NEW HTML, but the Ajax request is returning outdated HTML

Having difficulty toggling checkboxes within a grid using the select all feature

ReactJS encountered an error: _this3.onDismissID is not defined as a function

An array of deferred objects in a jQuery `$.when()` function

Could a jquery slick carousel be used to modify the body background of a webpage?

Using JavaScript to dynamically populate form fields

Chaining Promise Rejections in AngularJS

Explore jQuery UI Tabs with remote content, highlighting the active tab with a link to the current page

Creating an 8-bit grayscale JPEG image using HTML5 and encoding it from a canvas source

The radio button selection cannot be transmitted via email

When the ng-model is updated within a promise's .then() function, the ng-change

What sets apart the process of Installing Bootstrap with incorporating its suggested files into an HTML document?

methods to add an object to formData in vuejs