What is the process for deactivating a single button from a group of buttons after it has been

I have a list of numerous users.

Within my table, I display the user's name, an input field for their email address, and a submit button. When I enter a specific user’s email address and click submit, that user will receive their user ID and password in their mailbox.

What I am struggling with is ensuring that only the submit button of the selected user becomes disabled after submission. Currently, due to using a Django for loop in HTML, all submit buttons are being disabled upon submission.

<a id="elementId" href="{% url 'urlabc' %}" onclick="setTimeout(function(){document.getElementById('elementId').this.removeAttribute('href');}, 1);">Click</a>
javascriptdjango

Answer №1

My recommendation is to follow these steps:

Firstly, include a BooleanField in your model with a default value of False.

class YourModel(models.Model):
    email_sent = models.BooleanField(default=False)

In your template, utilize this field to control the activation or deactivation of each link.

{% for user in users %}
    <a href="{% url 'urlabc' %}" onclick="return !{{ user.email_sent }};">Click</a>
{% endfor %}

Whenever you send an email, update the email_sent attribute of the user's model to True, which will disable the link.

Please be aware that there may not be a visual indicator showing the disabled status of the link. However, you can use the boolean value to style or adjust attributes of the link or button to visually indicate its disabled state.

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

How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

With touchableHighlight, I found that I could easily modify the overlay color using the following code: <TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1"> However, when attemptin ...

javascriptiosreact-native

Is it possible to access a component's function from outside an ng-repeat in Angular 1.5?

Recently delved into learning Angular 1.5 components and testing out some fresh concepts, however, I'm struggling to wrap my head around this particular issue: Here's the code snippet from my Main: angular.module('myapp',[]) .contr ...

javascriptangularjsangularjs-1.5

Sending data from Flask to Ajax

Upon accessing the main page, my Flask application generates a base Jinja template with specific elements: <div><span id="var_1">{{ var1|safe }}</span></div> <div><span id="var_2">{{ var2|safe }}</span></div> ...

javascriptjquerypythonajaxflask

Creating a clickable link using a for loop to set the destination URL

I'm currently working on a project where I want to dynamically populate a set of buttons with the correct hrefs. However, the setLink() function is not returning the expected value (which should be something like localhost:44369/Timeline?d=2020/7/3). ...

javascripthtmlarrays

When comparing the values of two arrays with undefined property values

Struggling with sorting an array of arrays that works perfectly except when the property value is undefined. Take this example: posts array = {id: "1", content: "test", "likes":[{"user_id":"2","user_name":"test"}] }, {id: "2", content: "test", "likes": ...

javascriptarraysangularsorting

The VueJS v-for loop encounters a problem when the values within the array are identical

Check out my pen here: http://codepen.io/leetzorr/pen/aprZqO This is the HTML code: <template v-for="spot in bars" :key="item.$index"> <div id="bar-holder"> <div class="bars"> <ul> <span>{{ $index ...

javascriptvue.js

Position object in A-frame based on its width dimension

Is there a way to convert an object’s length into X coordinates? I have a box that dynamically expands with multiple spheres arranged from left to right inside it. My goal is to position the box in the center of the screen so that its center aligns perfe ...

javascript3dthree.jsaframe

Error encountered while trying to update a record using NodeJS, Express, and MySQL modules due to SQL syntax

When attempting to update a MySQL record in NodeJS, I encounter an "app crashed" error in Visual Studio Code's terminal. app2.js: const express = require('express'); const mysql = require('mysql'); // establish connection cons ...

javascriptmysqlnode.jsexpress

Determine the hour difference between two provided dates by utilizing the date-fns library

My API returns a "datePublished" timestamp like this: "2019-11-14T14:54:00.0000000Z". I am attempting to calculate the difference in hours between this timestamp and the current time using date.now() or new Date(). I am utilizing the date-fns v2 library fo ...

javascriptnode.jsdate

What is the ideal event to trigger a response when the user completes entering text into the search field in Vue.js?

I am currently utilizing a text field from the Vuetify library to filter a table within my application. <v-text-field style="min-width: 300px;" v-model="filterString" label="Search" /> The functionality is straigh ...

javascriptvue.jsfiltervuetify.js

AngularJS: Modifying directive according to service value update

In my current application, I have a basic sidebar that displays a list of names fetched from a JSON call to the server. When a user clicks on a name in the sidebar, it updates the 'nameService' with the selected name. Once the 'nameService& ...

javascriptangularjsangularjs-serviceangularjs-controller

What is causing the malfunction with this JQuery/AJAX request?

Currently in the process of setting up an autocomplete feature. Following the guidance from php academy at the moment. My goal is to display "suggestions go here" below the input field whenever something is typed in. I have two files for this task: home.ph ...

phpjavascriptjqueryajax

Tips for linking three tables through foreign key relationships

My model setup is as follows: class SubItem(models.Model): name=models.CharField(max_length=100) price=models.IntegerField() class Item(models.Model): owner=models.OneToOneField(User) class ItemSubItems(models.Model): item=models.Foreign ...

pythondjangodjango-models

Avoid displaying "undefined" on HTML page when Firebase database value is empty

I am trying my best to explain my issue, although I struggle with scripts. Please bear with me and help me improve. ˆˆ Below is the script I am working on. The goal is to display all records with a date set for 'today or in the future'. Progr ...

javascripthtmlfirebase

Utilizing JavaScript to showcase information retrieved from the database

After implementing this code example for a cascaded drop-down menu, I would like to incorporate the names of individuals residing in a specific city. How can I achieve this functionality once a city is selected? Demo link: Complete code snippet below: ...

javascriptphpjquerymysql

The process of extracting a value from an array of objects encountered an error due to the undefined object

I am looking to extract the value from an array within an object while also implementing error checking. The code I currently have checks if a specific key exists in the object and if the value associated with that key is of type array. If both condition ...

javascripttypescript

Unable to retrieve linked model in a generic Django view using Python

Recently started learning Python and Django. Currently, I am working with 3 models that are linked: patient -> visit -> prescription. I am trying to override the get_context_data method in a detailView so that I can have access to all prescriptions ...

pythondjangoself

A guide on utilizing Puppeteer for capturing screenshots of web pages with embedded videos

Currently, I am using Puppeteer to access a website and capture a screenshot of a video. Unfortunately, the default Chromium browser that Puppeteer uses does not support certain video types. I have managed to get it working by launching Puppeteer with a l ...

javascriptnode.jsgoogle-chromepuppeteerchromium

Encountering a Module node browserify issue

I recently attempted to utilize the Dyson module node from https://github.com/webpro/dyson#installation. However, upon executing the 'dyson' command, I encountered the following error in my terminal. $ dyson Prueba/ module.js:491 throw err ...

javascriptnode.jsmodule

Develop a dynamic button using JavaScript to fetch information from an array

I'm struggling with incorporating this button creation code into my HTML using JavaScript. The code for creating the button element in JS file looks like this: var numery = ['A','B','C']; var numer = document.createE ...

javascripthtmlcssappend