Forum : Aide bouton double action HTML

popotte

Hello :)

Alors deux solutions:

La première serait de passer par JS, quand on clique sur le bouton, coté JS tu fait une verification pour voir si le don a été fait, si oui ça place le pixel en JS, sinon ça fera le don en JS
La deuxième peut se faire en JS ou PHP, tu ne fait pas un mais deux boutons identiques, la vérification du don se fait avant de charger la page pour le PHP, ou bien au chargement de la page si tu passes par JS, si le don n'a pas été fait, le bouton pour placer le pixel sera caché et il y aura un bouton pour faire le don, si le don a été fait ce sera l'inverse (alors oui il y aura deux bouton, mais en aparence du point de vue de l'utilisateur il n'y en a que un)

DevilBoy

Auteur

D'accord merci, est ce que tu pourrais un peu développer la première solution stp ?
je suis nouveau dans le domaine

popotte

Alors en gros tu peux faire ça:

<button onclick="handle">Click Me</button>

Ensuite en JS tu peux faire:

// Tu mets les params que tu veux au lieux de "params", ou rien du tout si t'en a pas besoin :p
function handle() {
    if (donated) {
        setPixel(params)
    } else {
        setDonation(params)
    }
}

function setPixel(params) {
    // Blabla
}

function setDonation(params) {
    // Blabla
}

DevilBoy

Auteur

D'accord merci, et comment je verifie la valeur du don ?

popotte

si c'est un don a tarif fixe suffit de savoir que la donation a été donnée

Sinon tu aura une réponse de paypal dans le site, tu peux utiliser un event listener... maaais si tu débutes ça va être un peu compliqué ^^'

DevilBoy

Auteur

D'accord merci beaucoup je vais essayer de mettre tout ça en place

DevilBoy

Auteur

Pour l'instant le code de ma page html ressemble a ceci ;

<html>
<head>
<title>PlaceClone</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="/js/place.js"></script>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>

<div class="controls">
X: <input type="number" min="0" max="50" id="x-coord">
<br>
Y: <input type="number" min="0" max="50" id="y-coord">
<br>
Couleur: <input type="color" id="color">
<br>
<button id="submit">Placer Pixel</button>
</div>

<!-- This canvas holds our, well, canvas. -->
<canvas id="place" height="500" width="500"></canvas>

</body>

</html

KABORE

****

popotte

Je reposte ton code en propre :p

<html>
<head>
<title>PlaceClone</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="/js/place.js"></script>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <!-- The controls where our users will enter the coords and color to place. -->
    <div class="controls">
    X: <input type="number" min="0" max="50" id="x-coord">
    <br>
    Y: <input type="number" min="0" max="50" id="y-coord">
    <br>
    Couleur: <input type="color" id="color">
    <br>
    <button id="submit">Placer Pixel</button>
    </div>

    <!-- This canvas holds our, well, canvas. -->
    <canvas id="place" height="500" width="500"></canvas>
</body>

<form action="https://www.paypal.com/donate" method="post" target="_top">
    <input type="hidden" name="hosted_button_id" value="MVXHHJNY3VVQW" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
    <img alt="" border="0" src="https://www.paypal.com/en_FR/i/scr/pixel.gif" width="1" height="1" />
</form>
</html>

popotte

Okay alors tes form sont en dehors du body, pas bien :)

Ensuite ton form devrait englober ta div controll pour que ton boutton soit réactif, ou alors tu ajoutes des event listener aux elements de la div

DevilBoy

Auteur

Et donc comment on fait ça ? (Désolé je comprends pas tout :) )

popotte

Mmmmh plutot un truc du genre:

<html>
<head>
<title>PlaceClone</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="/js/place.js"></script>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<form id="myform" action="https://www.paypal.com/donate" method="post" target="_top">
    <!-- The controls where our users will enter the coords and color to place. -->
    <div class="controls">
    X: <input type="number" min="0" max="50" id="x-coord">
    <br>
    Y: <input type="number" min="0" max="50" id="y-coord">
    <br>
    Couleur: <input type="color" id="color">
    <br>
    <button id="submit">Placer Pixel</button>
    </div>

    <!-- This canvas holds our, well, canvas. -->
    <canvas id="place" height="500" width="500"></canvas>
    <input type="hidden" name="hosted_button_id" value="MVXHHJNY3VVQW" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
    <img alt="" border="0" src="https://www.paypal.com/en_FR/i/scr/pixel.gif" width="1" height="1" />
</form>
</body>
</html>

Coté JS c'est un peu plus compliqué a expliquer, mais tu peux faire un event du form onSubmit

//tu rajoutes un id 'myform' a ton form
document.getElementById('myform').addEventListenner('submit', (event) => {
    event.preventDefault() //pour bloquer l'envoit du formulaire et donc pouvoir faire des trucs en JS

    // La tu fait ta vérif et tes actions
})

omegletvcam

As you will see that it is clear that the BeginForm() function stipulates that the name of the action must be ProcessForm and that the controller's name must be Home. The method for submitting the form must be POST. EditorForModel() can be used to show textboxes for data entry. If you want to use helpers such as TextBoxFor() or LabelFor() are available.
There are two submit buttons accessible One that has the name attribute set to save, and the other that has the name cancel. The name of the button and its value are transmitted to the server each time you click on it. These are required to determine which button was clicked during the ProcessForm() action...
ProcessForm() ProcessForm() operation is able to receive three parameters through model binding. The Customer object stores the values of the textboxes. The first parameter is called the Customer object. The value for each button is recorded in the string parameters for cancel and save. The parameters should be named exactly as those buttons in the form. If a button is clicked, it will be recognized as such by the user. If it's not clicked, the value will be reflected in the process. If you click Save, the parameter for saving will be saved, leaving the cancel parameter will be null.

sightshooton

D'accord merci, est ce que tu pourrais un peu développer la première solution stp ?
https://19216811.bid/
https://panoramacharter.ltd/

Aide bouton double action HTML

14 réponses