Form Input: Retrieve Exclusive Value Using Identical Name and ID

I have successfully executed a query and displayed the results on my address page using PHP and AJAX.

<div id="address-wrap">
<div id="report-address">3719 COCOPLUM CIR <br>
Unit: 3548<br>
COCONUT CREEK, FL 33063</div>
<div id="report-button">
<form action="report.html">
<input name="property-id[]" type="text" class="property-id" value="64638716">
<input name="submit" type="submit" value="View Report">
</form>
</div>
<div id="clear"></div>
</div>
<div id="address-wrap">
... (more similar code) ...

I am now trying to extract the value from the corresponding form upon clicking it, to use for an AJAX request to my reports page.

       <script type="text/javascript>
        var property-id = $('.property-id').val();          
        $.ajax({
        url: 'http://www.domain.com/php/reports.php',
        data: '?recordID=' + property-id,
                success: function(data){
                    $('#results').html(data);

                }   
            }); 

               </script>

However, I am facing an issue where it always retrieves the first value (64638716) instead of the one I clicked on. How can I ensure that it appends the correct values?

Thank You In Advance

javascriptajaxformsmobile

Answer №1

Give this a try. I noticed a few mistakes in your JavaScript code, particularly with the variable names having hyphens like property-id. I went ahead and corrected it to propertyid, make sure to update that in your entire codebase

$(document).ready(function(e) {
    $("input[type=submit]").click(function(e) {
        var propertyid = $(this).prevAll("input").first().val();
        //alert(propertyid);
            $.ajax({
            url: 'http://www.domain.com/php/reports.php',
            data: '?recordID=' + propertyid,
                    success: function(data){
                        $('#results').html(data);
                    }   
            }); 
        e.preventDefault()
        return false; // prevent form from submitting
    });    
});

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

When trying to pass 3 parameters from an Angular frontend to a C# MVC backend, I noticed that the server side was receiving null

I have encountered an issue where I am attempting to pass 3 parameters (2 types and one string) but they are showing up as null on the server side. Below is my service: const httpOptions = { headers: new HttpHeaders({ 'Content-Type&ap ...

javascriptc#angulartypescriptpost

Issue with cancel button click in Jquery confirm window not being resolved

I have been encountering issues with opening a confirmation dialog in JavaScript despite having the code in place. The dialog is supposed to have 'yes' and 'no' options. function ConfirmDialog(obj, title, dialogText) { if (!dialogC ...

javascriptjqueryasp.nethtmldialog

Can AJAX be considered a backend tool for retrieving data from servers?

I'm curious to find out if ajax is primarily used as a backend technology for retrieving data or if it's mainly considered a frontend tool. My attempts to research this on Google have not yielded a definitive answer. ...

javascriptajaxfrontendbackend

Discover the most effective method for identifying duplicate items within an array

I'm currently working with angular4 and facing a challenge of displaying a list containing only unique values. Whenever I access an API, it returns an array from which I have to filter out repeated data. The API will be accessed periodically, and the ...

javascriptarraysangulartypescriptunique

Is there a way to maintain formdata between components in Angular?

With only the tools of @Input, @Output, routing, and activatedRoute at my disposal, I set out to create a dynamic application. In this project, there are two crucial components: addbook and showbook. The addbook component features a form with a submit bu ...

javascriptangulartypescript

Navigating through this object with PUG and Express: a step-by-step guide

I am currently working on a basic blockchain project to practice my skills with nodejs. I have created a blockchain object that consists of a block class, and now I want to loop through this object using pug. app.get('/', function(request, respon ...

javascriptnode.jsexpresspugblockchain

Sharing package JSON file dependencies with child engines and addons in Ember.js

I am seeking information on how Ember Js can share the parent app's package.json file dependency (xyz:3.0.0) with child engines and addons without them needing to redeclare the dependencies in their own package.json files. This is to reduce the overal ...

javascripthtmlnpmember.jspackage.json

Determine if an element is being hovered over using jQuery

How do I determine if the cursor is hovering over an element using jQuery or JS? I attempted to use $('#id').is(':hover'), but it doesn't seem to be functioning as expected. It's worth mentioning that I am calling this line ...

javascriptjquery

What is the best way to submit any form efficiently using just one jQuery/Ajax function? I'm uncertain about the

Here are a couple of things I need assistance with: 1) I'm looking to click on a link and have it load in a specified div on the page. Each link has a data attribute that indicates which div it should load into. This is how I achieve it: <div id= ...

jqueryajaxformsfunction

What is preventing me from being able to use object spread results in TypeScript casting?

Uniqueness in Question My inquiry was not aimed at identifying the type or class name of an object. Rather, it delved into the concept of "casting" an object to a specific type, which arose from a misconception about TypeScript and its functionality. This ...

javascripttypescript

Exploring the Power of Viewports and EffectComposer in Three.js

I recently developed an innovative Three.js demo that displays a scene and then adjusts the viewport to show a smaller section of the window with an overhead camera, creating a mini-map effect. You can access the code here: The key portion of the code is: ...

javascriptthree.js

Summary in Javascript

After utilizing the inspect code tool in PHPStorm, I received the following message: 'recipient_user.id === app.currentUser.id ? true : false' can be simplified to '!!(recipient_user.id === app.currentUser.id)' I'm wondering: ...

javascriptjslint

Retrieving information from a tag within an iFrame and passing it to its parent document

I've come across a few example posts on this topic, but for some reason, none of them are working for me. Here is the stack view of what I'm trying to accomplish: <html> <head>...</head> <body> <div>Som ...

javascriptjqueryiframe

How can I retrieve the chosen value from an AJAX combobox using JavaScript in an ASP.NET C# application?

How can I retrieve the selected value from an AJAX combobox item using JavaScript in ASP.NET C#? Below is the code snippet: <asp:ComboBox ID="dropdown_dest" runat="server" Width="90%" onfocusout="blurFunction()" AutoCompleteMode="SuggestAppend" CssCla ...

javascriptc#jqueryasp.netajax

Accessing values from a JSON object in AngularJS without using a loop based on another field

Is there a way to extract the "value" associated with the "name" in JSON using Angular JS without having to iterate through the array? For instance, if I have an array like the one below with name and value fields, how can I retrieve the value "ABC" based ...

javascriptjsonangularjs

What is the solution for resolving the Next.js 14 next/link routing 404 error page problem?

After performing a fresh installation of Next.js on Windows using an elevated shell with the command npx create-next-app@latest, I encountered an issue. In my /src/app/components/Header.tsx file, the code looks like this: import React from 'react&apos ...

javascriptreactjsnext.jsnext-link

How to build a unique ajax call function using a single object parameter in jQuery and JavaScript

Can someone provide a code example for the following requirements: A custom JavaScript function that takes a single object as its argument Utilizes jQuery's ajax method to make an AJAX call The object argument must specify all possible values that c ...

javascriptajaxjquery

Using jQuery to toggle CSS properties

I'm having trouble switching between a CSS column layout and a normal layout for a div element with the ID 'article'. The jQuery script I wrote doesn't seem to work properly, as the entire thing disappears. Can anyone advise me on how t ...

javascriptjquerycss

Using jQuery on the client-side to interact with a MongoDB database

Currently, I'm in the process of developing a basic example application to gain experience with using MongoDB. My goal is to create a single web page that can interact with a local MongoDB server by adding and removing content dynamically through jQue ...

javascriptjquerymongodb

Having issues debugging in the browser as React seems to be undefined

I am trying to implement a Context system to store the login user's name and use it for protected routes. context.js import React from 'react'; const axios = require('axios'); export const AuthContext = React.createContext(null); ...

javascriptreactjs