[FIXED] How do I clear the dropdownlist values on button click event using jQuery?

Issue

How do I clear the dropdownlist values on button click event using jQuery?

Solution

A shorter alternative to the first solution given by Russ Cam would be:

$('#mySelect').val('');

This assumes you want to retain the list, but make it so that no option is selected.

If you wish to select a particular default value, just pass that value instead of an empty string.

$('#mySelect').val('someDefaultValue');

or to do it by the index of the option, you could do:

$('#mySelect option:eq(0)').attr('selected','selected'); // Select first option

Answered By - user113716

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] How do I clear the dropdownlist values on button click event using jQuery?

Issue

How do I clear the dropdownlist values on button click event using jQuery?

Solution

A shorter alternative to the first solution given by Russ Cam would be:

$('#mySelect').val('');

This assumes you want to retain the list, but make it so that no option is selected.

If you wish to select a particular default value, just pass that value instead of an empty string.

$('#mySelect').val('someDefaultValue');

or to do it by the index of the option, you could do:

$('#mySelect option:eq(0)').attr('selected','selected'); // Select first option

Answered By - user113716

Answer Checked By - David Marino (PHPFixing Volunteer)

Read More

[FIXED] How to go the next page of a form with JavaScript?

Issue

I made a subscription form. I divided questions in four pages and I am trying to use JavaScript code in order to hide pages and show the page I am going to with Next button. It worked well when I only had Next buttons. But from the moment I added Previous buttons, it don't have the expected effect : I can go to the second part of the form but at the second click (on Previous or Next button), all parts of the form disappear.

How is it possible to make it work ?

html.twig

{% extends 'base.html.twig' %}

{% block title %}Incris-toi !{% endblock %}

{% block main %}

<main class="form container">

    <header></header>

    {{form_start(userform)}}

        <div class="formpage page1">
            <div class="form-floating mb-3">
                {{form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}})}}
                {{form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}})}}
                {{form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating">
                {{form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}})}}
                {{form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-checkbox">
                {{form_widget(userform.roles)}}
                <span class="checkbox"></span>
                <span class="checkmark"></span>
            </div>
            <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je m'inscris</button>
        </div>
        <div class="formpage page2">
            <h1 class="display-1 align-items-center mb-4">Pour savoir qui tu es.</h1>
            <div class="form-floating mb-3">
                {{form_widget(userform.gender, {'attr' : {'placeholder' : 'Es-tu un homme ou une femme ?', 'class' : 'form-control'}})}}
                {{form_label(userform.gender, 'Es-tu un homme ou une femme ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.firstname, {'attr' : {'placeholder' : 'Quel est ton prénom ?', 'class' : 'form-control'}})}}
                {{form_label(userform.firstname, 'Quel est ton prénom ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.lastname, {'attr' : {'placeholder' : 'Quel est ton nom de famille ?', 'class' : 'form-control'}})}}
                {{form_label(userform.lastname, 'Quel est ton nom de famille ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                <p>Quelle est ta date de naissance ?</p>
                {{form_widget(userform.birthdate, {'select' : {'class' : 'form-select'}})}}
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-primary mt-4 d-flex me-auto">Précédent</button>
                <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex ms-auto">Suivant</button>
            </div>
        </div>
        <div class="formpage page3">
            <h1 class="display-1 align-items-center mb-4">Pour mieux te connaître.</h1>
            <div class="form-floating mb-3">
                {{form_widget(userform.occupation, {'attr' : {'placeholder' : 'Quelle est ton occupation (ton métier, tes études…) ?', 'class' : 'form-control'}})}}
                {{form_label(userform.occupation, 'Quelle est ton occupation (ton métier, tes études…) ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.nationality, {'attr' : {'placeholder' : 'Quelle est ta nationalité ?', 'class' : 'form-control'}})}}
                {{form_label(userform.nationality, 'Quelle est ta nationalité ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.nativelanguage, {'attr' : {'placeholder' : 'Quelle est ta langue maternelle ?', 'class' : 'form-control'}})}}
                {{form_label(userform.nativelanguage, 'Quelle est ta langue maternelle ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex ms-auto">Suivant</button>
        </div>
        <div class="formpage page4">
            <h1 class="display-1 align-items-center mb-4">Et savoir ce que tu viens faire ici.</h1>
            <div class="form-floating mb-3">
                {{form_widget(userform.wishedlanguages, {'attr' : {'placeholder' : 'Quelle(s) langue(s) souhaites-tu pratiquer ?', 'class' : 'form-control'}})}}
                {{form_label(userform.wishedlanguages, 'Quelle(s) langue(s) souhaites-tu pratiquer ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <button class="btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je valide mon inscription</button>
        </div>

    {{form_end(userform)}}

</main>

{% endblock %}

{% block js %}

<script src="../assets/js/scripts.js"></script>

{% endblock %}   

scripts.js

const pages = document.querySelectorAll(".formpage")

window.onload = () => {

    document.querySelector(".formpage").style.display = "initial"

    let nextbutton = document.querySelectorAll(".next")

    for(let button of nextbutton) {
        button.addEventListener("click", nextPage)
    }

    let prevbutton = document.querySelectorAll(".prev")

    for(let button of prevbutton) {
        button.addEventListener("click", previousPage)
    }
}

function nextPage(){

    for(let page of pages){
        page.style.display = "none"
    }

    this.parentElement.nextElementSibling.style.display = "initial"
}

function previousPage(){

    for(let page of pages){
        page.style.display = "none"
    }

    this.parentElement.previousElementSibling.style.display = "initial"
}

Solution

The problem is technically a logical error. Your HTML is different for page 1 and at least page 2.

Read the comments in the following code:

        <div class="formpage page1">
            <h1 class="display-1 align-items-center mb-4">Inscris-toi sur 
                <img src="../public/img/logo-gozpeak.png" alt="Logo Go Zpeak !" width="auto" height="60" class="d-inline-block align-text-top">
            </h1>
            <div class="form-floating mb-3">
                {{form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}})}}
                {{form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}})}}
                {{form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating">
                {{form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}})}}
                {{form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-checkbox">
                {{form_widget(userform.roles)}}
                <span class="checkbox"></span>
                <span class="checkmark"></span>
            </div>

            <!-- This isn't enclosed inside an element, hence its parent is the .formpage element above -->
            <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je m'inscris</button>
        </div>
        <div class="formpage page2">
            <h1 class="display-1 align-items-center mb-4">Pour savoir qui tu es.</h1>
            <div class="form-floating mb-3">
                {{form_widget(userform.gender, {'attr' : {'placeholder' : 'Es-tu un homme ou une femme ?', 'class' : 'form-control'}})}}
                {{form_label(userform.gender, 'Es-tu un homme ou une femme ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.firstname, {'attr' : {'placeholder' : 'Quel est ton prénom ?', 'class' : 'form-control'}})}}
                {{form_label(userform.firstname, 'Quel est ton prénom ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                {{form_widget(userform.lastname, {'attr' : {'placeholder' : 'Quel est ton nom de famille ?', 'class' : 'form-control'}})}}
                {{form_label(userform.lastname, 'Quel est ton nom de famille ?', {'label_attr' : {'class' : 'label'}})}}
            </div>
            <div class="form-floating mb-3">
                <p>Quelle est ta date de naissance ?</p>
                {{form_widget(userform.birthdate, {'select' : {'class' : 'form-select'}})}}
            </div>

            <!-- This is enclosed inside a div element, hence its parent is NOT the .formpage element above -->
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-primary mt-4 d-flex me-auto">Précédent</button>
                <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex ms-auto">Suivant</button>
            </div>
        </div>...

Now one straightforward solution is to encapsulate the button on the first page around a div as well.

---

BTW, there is no need to iterate over all pages and set display: none on each one separately. Instead, you could make this a little bit more efficient by simply setting display: none on the current div.

Below is a better definition of nextPage():

function nextPage(){

    // Inefficient
    //for(let page of pages){
    //    page.style.display = "none"
    //}

    this.parentElement.style.display = 'none';
    this.parentElement.nextElementSibling.style.display = "initial"
}

Answered By - coderboy

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] How to avoid ElementClickInterceptedException when working with Selenium?

Issue

I use selenium with python and want to mark a checkbox by clicking on it. After having identified the <input> tag of the checkbox with selenium, I attempt to click on it with

checkbox.click()

However, it throws the ElementClickInterceptedException.

I identify the checkbox I want to click on through a loop. When I try to click on the checkbox outside of the loop (by manually running the code after it was identified and saved to a variable), I found two things:

• All things equal, I still get the exception
• When I click in the browser window once (that was opened with selenium) and then run checkbox.click(), it works as expected

Any ideas why and how I could attempt to slove this issue (i.e. being able to click on the checkbox within the loop)?

Thanks!

Solution

You either deal with the overlapping element or use javascript

driver.execute_script("arguments[0].click();", checkbox)

Answered By - Arundeep Chohan

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to stop animation after one body click with jQuery

Issue

So, i have some animation actions, this is for my login panel box:

$('.top_menu_login_button').live('click', function(){
    $('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
    $('#login_box').animate({"margin-top": "-=320px"}, "slow");
});

now i need to add some hiding action after click on body so i do this:

var mouse_is_inside = false;
$('#login_box').hover(function () {
   mouse_is_inside = true;
}, function () {
   mouse_is_inside = false;
});

for stop hiding this element on body click, and this for body click outside by login-box

$("body").mouseup(function () {
    if (!mouse_is_inside) {
        var login_box = $('#login_box');
        if (login_box.css('margin-top','0')){
            login_box.stop().animate({"margin-top": "-=320px"}, "slow");
        }
    }
});

Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?

Solution

You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :

$(document).on('click', function(e) {
    if ( !$(e.target).closest('#login_box').length ) { //not inside
        var login_box = $('#login_box');
        if ( parseInt(login_box.css('margin-top'),10) === 0){
            login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
        }
    }
});

And live() is deprecated, you should be using on().

Answered By - adeneo

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How do I CLICK the 'delete' button in the popup from MESSAGES in MacOS Big Sur using AppleScript?

Issue

What is the simple way to get the 'delete' button 'clicked' in response to the popup pictured below from the Messages app? I've tried more variations than I care to admit and am feeling humbled.

This code works fine if I want to 'click' the 'cancel' button in the popup.

But nothing I have tried has worked to click the 'delete' button.

Messages popup after delete message pulldown

tell application "Messages"
    activate
end tell

tell application "System Events"
    key code 2 using command down
end tell


tell application "System Events"
    set frontmost to true
    delay 1
    click button "Cancel"
end tell

Solution

This should work for you.

tell application "System Events" to tell application process "Messages"
    set frontmost to true
    repeat until frontmost
        delay 0.1
    end repeat
    click UI element "Delete" of sheet 1 of window 1
end tell

Answered By - wch1zpink

Answer Checked By - David Marino (PHPFixing Volunteer)

Read More