Conceal a nested button depending on the value of an input field

I am facing a challenge with hiding a button inside a form.

  <form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit" class="btn btn-secondary" title="">Remove submission</button>
  </form>

There are multiple forms in the same scenario as above, with differing "action" values. I want to hide the button based on that specific value using CSS if possible.

I have experimented with various methods but have not found a successful solution yet.

Thank you in advance for any help or advice provided.

htmlcss

Answer №1

If you want to achieve this, you can utilize the attribute selector along with the + selector:

input[value="removesubmissionconfirm"] + button {
  display: none;
}
<form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit" class="btn btn-secondary" title="">Remove submission</button>
  </form>

Answer №2

Most of the time, no, but there could be an exception in this particular case. This is because the button appears right after the hidden action field. You can test it out by using this code:

input[value="removesubmissionconfirm"] + button {
  display: none;
}

Answer №3

input[value="hidesubmissionconfirm"] + button {
  visibility: hidden;
}
 <form method="post">
          <input type="hidden" name="id" value="1234">
          <input type="hidden" name="action" value="hidesubmissionconfirm">
      <button type="submit" class="btn btn-primary" title="">Hide submission</button>
  </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

Side Panel Extending Off Screen Upon Resizing

I'm encountering an issue with the sidebar on my HTML page. The problem arises when I click the 'Upload Data' button, causing the sidebar's header to extend beyond the screen if I resize the window. The only way to fix this is by refres ...

javascripthtmlcssbootstrap-4sidebar

How can we create responsive websites?

Since starting my Software Developer studies about 3 months ago, I've been working on a website project for a driving school with a team of four. The issue we're facing is that when we transfer and open files between laptops, the website layout a ...

javascripthtmlcss

Is there a way to make two parallelograms overlap seamlessly and adjust in size automatically using HTML?

Recently delving into the world of HTML and CSS, I've set my sights on designing something unique involving parallelograms that adjust dynamically. My vision includes four overlapping parallelograms starting from the top at 25%, 50%, 75%, and finally ...

htmlcssshapesskewcss-shapes

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Place the label and input elements next to each other within the form-group

My form group includes both a label and an input field <div class="col-md-12 form-group"> <label class="col-sm-2 col-form-label" for="name">Name</label> <input type="text" class="form-control" name="name" id="name" [(ngMode ...

cssangulartwitter-bootstrapbootstrap-4

Failure occurs when attempting to utilize external .js and .css files

As I embark on creating a website using Bootstrap, I stumbled upon a registration page code that consists of three files - HTML, CSS, and .js. registration.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

javascripthtmlcsstwitter-bootstrap

Gradually shifting alignment of Bootstrap tooltips

I am encountering an issue with Bootstrap tooltips They seem to be progressively off-center Below is the code I am using for the icons {{#each guilds}} <div class="col-sm-1"> <a href="/dash/{{this.id}}"> <div class="gicon"> ...

cssbootstrap-4handlebars.js

What is the best way to make hyperlinks in impress.js?

Wanting to craft a visually stunning brochure for my client with the help of impress.js. I want to include a link on each slide that directs to the relevant page when clicked. Is it feasible to have a clickable link to each slide on every page as well? ...

cssimpress.js

Using PHP to send a JSON request via cURL

I am attempting to make a cURL request in PHP. The request I am trying to send is as follows: $ curl -H 'Content-Type: application/json' -d '{"username":"a", "password":"b","msisdn":"447000000001","webhook":"http://example.com/"}' http ...

phphtmljsoncurlheader

Struggling with Selenium as I attempt to click multiple "Remove" buttons, constantly encountering the StaleElementReferenceException error

I am facing a challenge when trying to remove multiple elements on a webpage. My current approach involves locating all the "Remove" buttons and clicking them one by one. However, I keep encountering a 'StaleElementReferenceException' as I remove ...

javahtmlseleniumselenium-webdriver

Selecting multiple classes to target specific children individually

Here are the steps you can follow: 1. Include two div elements on a page with identical class names. 2. Insert two elements within each div, such as paragraphs for illustrative purposes. 3. Change the text color of the first paragraph in each div to red. ...

jquerycss

Troubleshooting email delivery issues with contact form submissions in PHP

Can anyone assist me in identifying where I'm going wrong with this? Every time I click 'send', the form just directs to the PHP code. I've been experimenting with it for hours and I feel like I must be overlooking something simple. I&a ...

phphtml

Learn the process of using Python to copy HTML code to the clipboard

I am attempting to create a simple script in Python on Windows 10 that can copy a customized text hyperlink (Example) to the clipboard and maintain its recognition as HTML when pasted, much like how Microsoft Word handles custom text hyperlinks. I have at ...

htmlpython-3.xclipboard

Are you looking for a stunning vertical gallery with responsive design in Photospace Gallerific? Let's enhance it

Is there a way to make my gallery from http://wordpress.org/extend/plugins/photospace-responsive/ responsive? I want it to change from a vertical layout to horizontal when the browser is scaled down for mobile viewing. Can you advise on how to ensure that ...

csspluginsresponsive-designgalleriffic

Stop iPhone body scrolling when fullscreen overlay is opened

My goal is to prevent the body from scrolling when my fullscreen overlay navigation is open. I have added a class show-nav to the body with the CSS attribute overflow: hidden, which works perfectly on desktop but not on iPhones. After researching similar ...

jqueryhtmlioscssiphone

"Implementing a responsive full-screen menu using Bootstrap for optimal user experience

I've implemented navbar-fixed-top and I want my menu items to expand to full width below the navbar when the user clicks on the burger-icon. The expanded menu should cover the entire height of the screen, and the burger-icon should transform into an ...

csstwitter-bootstrap

What is the best way to incorporate external CSS files into AMP?

Struggling to load external CSS files such as bootstrap.css and other stylesheets into an HTML file that is AMP-compatible. I've scoured the AMP documentation but have yet to find a solution. As a newcomer to both AMP and SEO, I need to implement SEO ...

cssamp-img

Using JSON response directly in loaded HTML in Angular 2 is a straightforward process. Follow these steps to

As I delve into Angular 2 and explore its components, one question that arises is how to display data received from a server in JSON format on an HTML page. In Angular 1.x, we could directly assign a JSON object to a variable and use it in HTML using the & ...

htmljsonangular

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

unable to alter color using CSS

So I've heard that the CSS code is good. Here is the HTML code I am using: <DOCTYPE! html> <html lang="nl"> <head> <title>The White Stripes!</title> <link rel="stylesheet" type="text/css" href="home.css"& ...

htmlcss