Retrieving the HTML ID attribute of an anchor link within a form and sending it to the backend server

Question

Retrieving the HTML ID attribute of an anchor link within a form and sending it to the backend server

I am currently working on a project that involves a form containing an anchor link tag with a dynamic ID. I am utilizing this anchor link tag to submit the form via Javascript. However, I am facing difficulty in fetching the ID of the same anchor link tag, which is dynamic, and submitting it to the backend server.

Here is the form structure:

<form method="POST" action="#" id="rsmForm">
    <!-- Token field-->
    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  

     <a href="#demo{{$i}}" id="{{ $a['id'] }}" name="asmID" data-value="{{ $a['id'] }}" onclick="document.getElementById('rsmForm').submit();"> + ASM ({{ $a['id'] }}) </a>
</form>

javascript forms anchor

Answer 1

Answer №1

When handling the onclick event, retrieve the href attribute value of the anchor tag:

function onClickAnchor(e) {
  const currentHref = e.currentTarget.getAttribute('href');
  console.log(currentHref);
  // document.getElementById('rsmForm').submit();  <=== uncomment it
}

<form method="POST" action="#" id="rsmForm">
    <!-- Token field-->
    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  

     <a href="#demo{{$i}}" id="{{ $a['id'] }}" name="asmID" data-value="{{ $a['id'] }}" onclick="onClickAnchor(event)"> + ASM ({{ $a['id'] }}) </a>
</form>

Answer 2

When handling the onclick event, retrieve the href attribute value of the anchor tag:

function onClickAnchor(e) {
  const currentHref = e.currentTarget.getAttribute('href');
  console.log(currentHref);
  // document.getElementById('rsmForm').submit();  <=== uncomment it
}

<form method="POST" action="#" id="rsmForm">
    <!-- Token field-->
    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  

     <a href="#demo{{$i}}" id="{{ $a['id'] }}" name="asmID" data-value="{{ $a['id'] }}" onclick="onClickAnchor(event)"> + ASM ({{ $a['id'] }}) </a>
</form>

Retrieving the HTML ID attribute of an anchor link within a form and sending it to the backend server

Answer №1

Similar questions

conditional statement for manipulating data in javascript/html

JavaScript JSON function failing to show

algorithm for selecting the greatest value

activate the button once valid input has been provided

What is the best way to decrease the border width of a chartjs doughnut chart?

The back-to-top feature is malfunctioning in the new Bootstrap 4 update

Switch from Index.html to Index.html#section1

Using Node.js to convert a file name to a timestamp

Finding the occurrences of elements in an array using JavaScript

Syntax for retrieving response with jQuery AJAX

Dynamic backdrop featuring engaging content

What are the drawbacks of automating the process of generating charts to track time spent on webpages?

Passing the value of a radio button to a component in React: a comprehensive guide

Storing duplicate code in multiple cache files using ReactJS ServiceWorker

AngularJS ng-model not refreshing

Emulating ArrowRight event using React Testing Library

Bing Map problem: p_elSource.attachEvent is throwing an error

unable to connect to the web service using webview

Unable to find the matching closing parenthesis ')" before reaching the end

Regular expression for eliminating the local path from a website address