django "put method" specify in html but still get send when button submit

Using Django Forms & APIs
22

Here is the html code:

{% extends 'appMenuAdministrator/mainadmin.html' %}
{% block content %}

	<br>

<form action="" method="POST" enctype="multipart/form-data">
	{% csrf_token %}
	<div class="row">
		<div class="col-md">
			<div class="card card-body" >
				<h5>Informations</h5>
				<hr>
				<p>Nom:</p>
				<fieldset>
					<input name="LibELE_GROUPE" type="text" id="LibELE_GROUPE" value="{{groupe.LibELE_GROUPE}}" size="35"
							   placeholder="Nom du groupe" tabindex="1" required>*
				</fieldset>

				<fieldset>
					<input name="created_at" type="date" id="created_at" value="{{groupe.created_at}}" size="35" placeholder=""
						   tabindex="2" style="display:None;">
				</fieldset>
				<fieldset>
					<input name="updated_at" type="date" id="updated_at" value="{{groupe.updated_at}}" size="35" placeholder=""
						   tabindex="3" style="display:None;">
				</fieldset>
				<fieldset>
					<input name="UTIL_CREATION" type="text" id="UTIL_CREATION" value="{{groupe.UTIL_CREATION}}" size="35"
						   placeholder="" tabindex="4" style="display:None;">
				</fieldset>
				<fieldset>
					<input name="UTIL_MODIF" type="text" id="UTIL_MODIF" value="{{groupe.UTIL_MODIF}}" size="35" placeholder=""
						   tabindex="5" style="display:None;">
				</fieldset>
				<fieldset>
					<input name="Soc_sigle" type="text" id="Soc_sigle" value="{{groupe.Soc_sigle}}" size="35" placeholder=""
						   tabindex="6" style="display:None;">
				</fieldset>

			</div>

		</div>

		<div class="col-md">
			<div class="card card-body" style="width:300px; margin-left:40%;">
				<h5>Total des Utilisateurs</h5>
				<hr>
				<h1 style="text-align: center;padding: 10px"></h1>
			</div>
		</div>


		<div class="col-md">
			<div class="card card-body" style="width:200px; margin-left:50%;">
				<!--<h5>Client:</h5>-->

				<hr>

				{% if sEtat == "crea" %}
				<a class="btn btn-outline-success  btn-sm btn-block" href=""
				   style="font-size: 10px; ">Ajouter</a>
				<a class="btn btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px;">Quitter</a>
				{% elif sEtat == "modif" %}
				<button class="b3  btn-outline-warning  btn-sm btn-block " href=""
						style="font-size: 10px;display:None;">
					Modifier
				</button>
				<button class="b2  btn-outline-danger  btn-sm btn-block " href=""
						style="font-size: 10px; display:None;">
					Supprimer
				</button>
				<button class="b1  btn-outline-secondary  btn-sm btn-block " href=""
						style="font-size: 10px; display:None;">
					Annuler
				</button>
				<button class="b4 btn-outline-success  btn-sm btn-block" name="Ajouter" type="submit"
						value="Submit"
						style="font-size: 10px; ">Ajouter
				</button>
				<button class="b5 btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px; ">Quitter
				</button>
				{% else %}
				<a class="btn btn-outline-success  btn-sm btn-block" href=""
				   style="font-size: 10px; ">Ajouter...</a>
				<a class="btn btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px;">Quitter</a>
				{% endif %}

			</div>

		</div>

	</div>

</form>

<br>
<div class="row">
	<div class="col">
		<div class="card card-body">
			<form method="get">

		    <button class="btn btn-primary" type="submit">Search</button>
		  </form>
		</div>
	</div>

</div>
<br>

<div class="row">
	<div class="col-md">
		<div class="card card-body">
			<table class="table table-sm">
				<tr>
					<th>ID</th>
					<th>login</th>
					<th>Prenom et Nom</th>
					<th>Telephone</th>
					<th>EMAIL</th>
					<th>Util création</th>
					<th>Date création</th>
					<th>Util modification</th>
					<th>Date modification</th>
				</tr>

				{% for Utilisateur in utilisateur %}
				<tr>
					<th>{{Utilisateur.IDF_UTILISATEUR}}</th>
					<th>{{Utilisateur.LOGIN}}</th>
					<th>{{Utilisateur.prenom}} - {{Utilisateur.name}}</th>
					<th>{{Utilisateur.Telephone}}</th>
					<th>{{Utilisateur.EMAIL}}</th>
					<th>{{Utilisateur.UTIL_CREATION}}</th>
					<th>{{Utilisateur.created_at}}</th>
					<th>{{Utilisateur.UTIL_MODIF}}</th>
					<th>{{Utilisateur.updated_at}}</th>

					<th><a href="">Mise à Jour</a></th>
					<th><a href="">Supprimer</a></th>

				</tr>

				{% endfor %}

			</table>
		</div>
	</div>
</div>
<!--https://stackoverflow.com/questions/72089986/how-to-toggle-between-button-display -->
<script>

	const buttons = document.getElementsByTagName("button");



	var clicked = false
	var b1 = document.querySelector(".b1")
	var b2 = document.querySelector(".b2")
	var b3 = document.querySelector(".b3")
	var b5 = document.querySelector(".b5")

	function hideButtons( button1, button2, button3) {
		clicked = false
		for (button of buttons) {
			button.style.display = "inline";
		}
		button1.style.display = (clicked ? "inline" : "none")
		button2.style.display = (clicked ? "inline" : "none")
		button3.style.display = (clicked ? "inline" : "none")
		clicked = !clicked
	}
	b1.addEventListener("click", () => {hideButtons(b2, b3, b1)})

	function hideButtons1( button1, button2, button3) {
		clicked = false
		for (button of buttons) {
			button.style.display = "none";
		}
		button1.style.display = "inline";
		button2.style.display = "inline";
		button3.style.display = "inline";
		clicked = !clicked
	}


	b5.addEventListener("click", () => {hideButtons1(b1, b2, b3)})
</script>
{% endblock content%}
23

Here is the view:

def pagegroupe(request,pk):
    groupe=f_groupe_user.objects.get(IDF_GROUPE_USER=pk)
    aze= "Visualiser le groupe"
    sEtat = "modif"
    utilisateur=groupe.f_utilisateur_set.all()
    print(f"La valeur du groupe est : {utilisateur}")
    context={'groupe':groupe, 'aze':aze, 'sEtat':sEtat, 'utilisateur':utilisateur}
    #context = {'groupe': groupe, 'aze': aze, 'sEtat': sEtat}
    return render(request, 'appMenuAdministrator/L_liste_GroupeUtilisateur/FichevGroupe.html', context)
24

@KenWhitesell , please any update?

25

What you’re describing here is a JavaScript issue, not a Django issue. I’m not really a JavaScript person, so unless you can trim this down to a much smaller example, I’m probably not going to be able to help you.

26

Hello @KenWhitesell
Thank You to reverse.
I don’t think this IS JavaScript issue because thé code IS running well when i test it ofside …<\form>.

27

No it’s not.

It’s not submitting the form.

If you want that button to not submit the form data, then yes, it’s working. But if you want the button to submit data, then it needs to be inside the form - and that means your other issues are related to the rest of the JavaScript.