Retrieve the content entered in a form text field without needing to officially submit the form

Is it possible to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself? I have been trying to achieve this by using document.getElementById("partnumber").value but keep getting an error "Object Required". Here is the code snippet:

<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
    <input name="partnumber" type="text" id="partnumber" size="10" />
<a href="suggest.asp?partnumber=<%document.getElementById("partnumber").value%>"><span class="style11">Suggest Link</span></a>
<input name="invoice" type="text" id="invoice" size="15" />
</form>

I am planning to open a new page in a pop-up window that lists values from the database. Once a value is selected, I would like it to come back into the invoice field on the original page. I think JavaScript may be able to help with this, but I am quite new to it. Can anyone provide assistance?

To pass values back to the parent window, you can use the following snippet in the child window:

<script language="javascript"> 
function changeParent() { 
  window.opener.document.getElementById('Invoice').value="Value changed..";
  window.close();
} 
</script> 

<form> 
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value.."> 
</form> 

Answer №1

To enhance the input field, it is recommended to include an OnChange event handler. This allows you to execute a function that will update the value of your link dynamically.

For a practical example, you can refer to the following resource (note that it involves a button press instead of an input OnChange Event):

Edit: I have included a Stack Snippet below to demonstrate the solution.

function SetSuggestLink() {
    var suggest = document.getElementById('partnumber').value;
    document.getElementById('innerSpan').innerHTML = 
        "Suggest Link: suggest.asp?partnumber=" + suggest;
    document.getElementById('QueryLink').href = 
        "suggest.asp?partnumber=" + suggest;
}
.style11 {
  color:black;
}

.style2 {
  text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
    <input name="partnumber" type="text" id="partnumber" size="10" 
           OnChange="SetSuggestLink()" /> </br>
    <a id="QueryLink" class="style2" href="#">
      <span id="innerSpan" class="style11">Suggest Link</span>
    </a></br>
    <input name="invoice" type="text" id="invoice" size="15" />
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

Travis is checking to see if the undefined value is being

My experience with jasmine testing has been successful when done locally. However, I am encountering issues on Travis CI where all the API tests are returning undefined values. Here is an example: 4) Checking Server Status for GET /api/v1/orders - Expecte ...

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

Could using 'require' in node.js lead to a memory leak issue?

I have been working on a program that experiences continuous heap growth. The program is quite simple - it repeatedly tries to load an external file (SyntaxError) using require. However, this external module fails to load due to a syntax error present in i ...

Tips on incorporating variable tension feature into D3 hierarchical edge bundling

I found a d3 sample on hierarchical edge bundling that I am experimenting with - My main focus is how to add tension functionality to the example provided at the following link (code can be found here): While I have reviewed the code in the first link, I ...

Saving data inputted in a form using ReactJS and JavaScript for exporting later

What is the best way to save or export form input in a ReactJS/JS powered website? For example, if I have a form and want to save or export the data in a format like CSV after the user clicks Submit, what method should I use? Appreciate any advice. Thank ...

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

How to eliminate unnecessary space when the expansion panel is opened in material-ui

Is there a way to eliminate the additional space that appears when clicking on the second accordion in material UI? When I open the second accordion, it shifts downward, leaving a gap between it and the first accordion. Any suggestions on how to remove thi ...

The 'userEvent.type' function in React Testing Library is failing to update the input value in a Material UI TextField component that has

I am currently facing an issue with a material UI TextField element that is meant to track the latitude value. The requirement is for the latitude to fall within the range of -90 to 90 degrees. I have implemented a unit test as a validation measure, howeve ...

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

Providing the module with the URL

How can I retrieve the URL within a module? module.exports = function(app, Reviews, Anon, User, url){ var url = url; console.log("url", url)// url is undefined how to get url function postHandler(req, res){ } app.post("/individual/"+ u ...

Discover the power of the "Load More" feature with Ajax Button on

After browsing through the previous questions and experimenting with various techniques, I've come close to a solution but still can't get it to work. The closest example I found is on Stack Overflow: How to implement pagination on a custom WP_Qu ...

Updating a JavaScript global variable within a click event function: A quick guide

I am currently using Javascript and jQuery to retrieve the mouse coordinates of a click event for use in other Javascript functions. The issue I am facing is that global variables set within an event function do not update outside the function, unlike glob ...

How to extract the complete URL from the API endpoint in nextjs

I'm curious if there is a way to fetch the complete URL of the current request within the API route (pages/api/myapi). The only response I have found that comes close to what I need is the req.headers.referer, but I am uncertain if this value will alw ...

Is there a risk of overloading the server and browser by making constant AJAX calls at regular intervals?

I am in the process of creating a website that requires notifications. I want to use AJAX to continuously check for updates in my database where notifications are stored at regular intervals. My concern is, with multiple users all accessing the AJAX call ...

Adjusting the height of a vertical slider in Vuetify2 is not customizable

I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchan ...

Troubleshooting issues with Firebase integration in a Node.js environment

I am currently encountering difficulties implementing Firebase in my Node.js project. Below is the code snippet that I am attempting to execute on Node. var firebase = require("firebase"); var admin = require("firebase-admin"); var serviceAccount = requi ...

Error in linking PHP code to display stored tweets using HTML code

![enter image description here][1]![image of output of twitter_display.php][2] //htmlsearch.html file <!doctype html> <html> <head> <title>Twitter</title> <meta charset="utf-8"> <script> window.onload = function ...

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...