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

What is the reason that prototypes are not passed down through inheritance?

Can anyone shed light on why Validator.js is structured the way it is initialized (as shown in the first code snippet) and the reason behind the inability to call the validate method (as demonstrated in the second snippet)? I am currently experimenting wi ...

An issue has been encountered in the following module federation: `TypeError: g.useSyncExternalStore is not a function`

I encountered an error after deploying my next app with module federation: TypeError: g.useSyncExternalStore is not a function The same app works fine as a standalone application when run with yarn dev or yarn start, but it fails when using module federat ...

Obtain a byte array from an AngularJs controller

In my Angular controller, I am working with a byte array. When the download button is clicked in the view, I want to trigger the browser's download/saveAs dialog with 'report.pdf' as the pre-populated filename and PDF as the file type. After ...

having difficulty carrying out the commands following the post request, without encountering any error messages

I am having trouble executing some instructions after making a post request using an async function that gets called on a button click. async function createPost() { try { await axios.post("http://localhost:3001/post", { content ...

"Experimenting with KinectJS: Adding Rotation to a Pair of Images

Looking for a solution to rotate both the upper arm and forearm images simultaneously? The upper arm rotates around a specific point, and the forearm also rotates around this same point. How can I make sure that the forearm rotates when the upper arm does ...

Is it possible to configure Webpack/NextJs to handle a recurring import path mapping?

Exploring ways to streamline imports in my NextJs Project (v14.1.3), I'm interested in finding a method to modify the import statement below: import foo from 'path/to/foo/foo' To possibly simplify it to: import foo from 'path/to/foo&ap ...

Exploring nested JSON objects in Angular and rendering them in PHP

On my Json page, I have data organized like this : [{ "qid": "1", "contester": "0", "answer": "0", "question": "What would you do after getting into ...

Loading Animation for Pages and Tables

I'm experiencing a choppy and sudden transition when switching between two pages that contain tables populated using ng-repeat. Upon loading, the footer is positioned halfway up the page below the table heading until the table loads and the layout adj ...

An array in JSON format containing only one element

I am currently working on a project that involves JSON format output. I am in need of some clarity regarding the structure of JSON arrays. Specifically, I'm curious about how to handle fields that allow multiple entries in an array format. In cases wh ...

A guide on extracting information from a personal Flask JSON route endpoint with Axios

I am looking to store JSON data in a variable using Axios in Javascript. The JSON endpoint is generated by my own server's route http://123.4.5.6:7890/json. I have been successful with this function: async function getClasses() { const res = await ...

What is the reason behind the removal of the "disabled" attribute when setting the "disabled" property to false?

Initially, I have a disabled button: <button disabled="disabled">Lorem ipsum</button> When using button.getAttribute('disabled'), it returns "disabled". But once the button is enabled with JavaScript: button.disabled = false; The ...

Revise a function that locates an object with a corresponding id in an array, modifies a property, and updates a React component's state

Here is a function that takes in a rating value within an object. The ID and Question properties remain unchanged, but the rating value can be updated. This will result in updating a React state value. Is there a method to improve the readability and con ...

What are the steps for including and excluding components in Parallax JS?

When working with Parallax JS: I am trying to modify the components within the <li> tags of my menu, but I am unsure how to do so without restarting the plugin. I cannot seem to find the destroy command. Currently, I am using the JQuery version of ...

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

What is the best way to call a function within another function only when a certain div is not clicked?

Throughout my code, I am utilizing the campusInfo(id) function. This particular function, in turn, calls another function named campusInfo_2(HouseID). One scenario where I am invoking campusInfo(id) is when a specific div is clicked. In this instance, I ...

Guide on how to submit an image along with text using AJAX, PHP, and HTML

Hey there! I'm currently working on a project where I need to upload an image with comments added into a database using a combination of PHP, AJAX, and HTML. Let me show you the HTML part first: <form name="form1" enctype="multipart/form-data" ac ...

Accessing data in form rules with Vuetify: tips and tricks

Is it possible to access a data element within a rule? Click here to see my code in action I'm attempting to change the value of a data element on a text field rule within a Vuetify form. While the rule itself is functioning properly, I'm enco ...

Refreshing the form fields and storing the information using AngularJS

I have successfully implemented a basic form using AngularJS. The issue I am facing is that even after the user enters their details and submits the form, the values remain in the input fields. My goal is to store the details of multiple fields in the con ...

Using React Native to integrate a JSON string into a button

I'm currently working on an app to explore the functionality of websockets in react native. I have successfully retrieved data from the websocket in JSON format and can output it to the console using console.log. However, my goal is to display a speci ...

Making an asynchronous request using Ajax to verify the status of a checkbox

I have two checkboxes, and I want to make an ajax call to a jsp page when one of the checkboxes is clicked. The jsp page should display a table with data fetched from a database. The issue arises when dealing with two checkboxes: <div class="search-in ...