Unable to click on content within a div element

Unable to make these input fields clickable

Each item needs to be clickable and pass the input value "id" to the form action route

<form action="/rodada/">
 {{#musicas.1}}
 {{#.}}
 <div class="opcao">
  {{titulo}} - {{artista}}
  <input id="opcao" class="shh" type="submit" name="musicaAtual" value="{{idTrackDeezer}}">
 </div>
 {{/.}}
 {{/musicas.1}}
</form>

CSS:

#wp-respostas{
    margin-top: 8%;
}
.opcao{
    background-color: #fba69d;
    text-align: left;
    border: 1px solid salmon;
    border-radius: 5px;
    padding: 4px 0px 4px 4px; 
    margin-bottom: 5px;
}

.shh{
    display: none !important;
}

FINAL RESULT (not clickable)

https://i.sstatic.net/o420t.png

Working code with thanks to Dan Oswalt:

{{#musicas.1}}
{{#.}}
<div class="opcao" onclick="window.open('/rodada/?id={{idTrackDeezer}}', '_self');">
{{titulo}} - {{artista}}
</div>
{{/.}}
{{/musicas.1}}
htmlcssmustache

Answer №1

If the GET request is successful, consider adding

onclick="window.location = '/round/?id={{idTrackDeezer}}'";

or

onclick="window.open('/round/?id={{idTrackDeezer}}')";

directly to the div instead of attempting to use a form.

If not, for POST requests, you will need to utilize AJAX or find a workaround to create a form and submit the value.

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

Encountering a server error - what triggers this message upon utilizing .htaccess?

When I include a .htaccess file within a directory named admin containing the code below: AuthName "Alertme" AuthType Basic AuthUserFile /mobs/.htpasswd require valid-user and a .htpasswd file with the following credentials: rajasekar:66Acdia7gE1to Upo ...

phphtml.htaccess

Hide an absolutely positioned div when another element is clicked outside of it

Here is the code for the function that executes when a button on my website is clicked: function displayOverlay() { document.getElementById("overlay").style.visibility = "visible"; document.getElementById("dim").style.visibility = "visible"; d ...

javascripthtml

What could be causing my opacity rule to impact neighboring elements?

I have designed button images and I want the image's opacity to change when a user hovers over it while keeping other elements like span and h2 completely visible. Despite targeting only the img element in my CSS for hover effect, all elements' o ...

htmlcss

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

jqueryhtmlcss

Tips for ensuring that CSS hover effects stay in place even when the page is scrolled

i'm having trouble with a project in React JS that I received from another team. I'm not very confident in my skills with React JS, and I'm facing an issue where a certain part of the page is supposed to change to red when hovered over. Howe ...

cssreactjstypescript

Using Material-UI to add a pseudo class '::before' with component class properties

I attempted to utilize a pseudo class for the mui-app-bar but did not have success. I've researched this issue on various platforms without finding a solution. Below is how my component is currently structured: const styles = (theme: Theme) => cre ...

cssreactjsmaterial-ui

Storing personalized HTML content in a database for individual users: A step-by-step guide

I have a JavaScript code snippet similar to this fiddle: http://jsfiddle.net/nj4N4/7/ On my webpage, it displays like this: image. When you click on the "add a year" button, a table resembling year2 appears above the previous year. Now, I'm looking ...

javascriptjqueryhtmlangularjsmongodb

Passing string values to an onClick event listener in Javascript is similar to how it is done in an onclick event listener in HTML

render() { return ( <div> <div onClick={() => "FSR.launchFeedback('ax9sgJjdSncZWoES6pew6wMIyCgSXpC')" } /> </div> ); } This piece of code initially appear ...

javascripthtmlreactjs

The arrangement of <source> tags within the <audio> element can cause issues with browser compatibility

I'm having a slight issue with the audio files on my webpage. I've set up both MP3 and Ogg Vorbis files using FFmpeg to ensure compatibility with modern browsers. However, I've noticed that Safari only plays the audio when the MP3 file is li ...

htmlaudio

What is the best method to make a hyperlink within an IFrame open in a new window?

Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...

javascriptjqueryhtmlcssiframe

What is causing lxml to not remove section tags?

Having some trouble parsing HTML using lxml and Python. My goal is to eliminate section tags, but seems like lxml can remove other specified tags except for sections. For instance: test_html = '<section> <header> Test header </header& ...

pythonhtmllxml

What is the best way to accommodate 4 columns within a 3-column HTML table layout?

I am facing a challenge with my table layout. Normally, it has 3 columns, but I am trying to figure out how to fit 4 cells into one row while maintaining the same width. Any suggestions on how to achieve this? ------------- | 1 | 2 | 3 | ------------- | ...

htmlhtml-table

A guide on showcasing the compilation results of PHP code directly on the web browser

How can I compile PHP code on an HTML Button click and display the compilation output in a browser? The code snippet below works well in the terminal but doesn't show anything in the browser. I am currently using XAMPP server on a Windows machine. &l ...

phphtmlxampp

Ignoring tags inside a regular expression can be achieved by using the appropriate

Our project utilizes a RegExp to showcase the titles of cards received from the deck. Lately, we have noticed that the deck sometimes sends titles in different formats which are not displaying properly. Previously, the string format was: const res = `&l ...

javascripthtmlregex

Updating an item stored locally

I am currently working on a web application that utilizes local storage. I have successfully implemented functionality to add and delete items, but I am facing an issue with editing items. Although items can be edited as expected, upon refreshing the page, ...

javascripthtmllocal-storage

Adding a PHP script alters the way content is displayed in a web browser

Forgive me for what may seem like a trivial question, but I have been searching for hours without any luck. It appears that including more than one file in an already included file is causing a minor change to the page layout. The issue manifests as a sli ...

phphtmlrender

Adding the children of JSON objects to every individual div element

How can I add each day's players [day-1, day-2, day-3, day-3] wrapped in a <span> into the .card-body section as required? The goal is to load only four card-body. var vehicles = { "day-1": { "player-1-1": "Ford", "player-1-2": "BMW ...

javascriptjqueryhtmlcss

Trouble getting inline SVG to scale properly with its parent

Attempting to utilize SVG as an alternative to clippath due to limited cross-browser support has proven challenging. Each time I make the attempt, I face the same issue: the SVG functions properly but appears small and does not scale to fit the designated ...

htmlcsssvg

Effortlessly navigate to the start of a section once the expander box is collapsed with this simple trick!

The link to the page I'm talking about can be found here: If you're looking for the JQuery page, you can access it here: When you click on "Read More," my goal is for the page to scroll up to the heading (<h1>) or the beginning of the d ...

jqueryhtmlexpander

"Issues with Angular ng-show Functionality on Internet Explorer Versions 7 and

I'm currently working on a feature where I need to show or hide two divs conditionally using ng-show based on the completion of an AJAX call. The layout for this includes: <div id="div1" ng-show="!loadingData"> <!--Some markup here--> ...

cssajaxinternet-explorer-8internet-explorer-7angularjs