Question 60954 in Html Question posted in
Some basic documentation can be found here.

To add a button that autofills a random password on the password field which I created using py-script – Html

I created a form in html which returns to a function in views.py in django framework. I wanted to add a button which autofills the password field with a random password. I used pyscript for creating a random password. But the button seems to be returning to the views.py instead of autofilling.

<body bgcolor="white">
    <py-script>
    import random
    password = ''
    def mypass():
       length = random.randint(8,16)
       list1=[]
       for i in range(0,length):
           list1.append(chr(random.randint(32,126)))
       password = ''.join(list1)
    pyscript.write('python', password)
    </py-script>
    <script>
        function myfun(){
            var a = document.getElementById("password1").value;
            var b = document.getElementById("password2").value;

            if(a!=b){
                document.getElementById("messages").innerHTML="Passwords do not match";
                return false;
            }
        }
    </script>
    <script>
        function myfunction(){
            var password = PyScript.interpreter.globals.get('password');
            document.getElementById("password1").value = password;
       } 
    </script>
    <form onsubmit="return myfun();" action="register" method="post" >
        {% csrf_token %} 
        
        <p>
            <label for="user_name">User Name</label>
            <input type="text" name="user_name" id="user_name" placeholder="Antman56." autocomplete="on" >
        </p>
        <p>
            <label for="f_name">First Name</label>
            <input type="text" name="f_name" id="f_name" placeholder="Dave" autocomplete="on" >
        </p>
        <p>
            <label for="l_name">Last Name</label>
            <input type="text" name="l_name" id="l_name" placeholder="Lee" autocomplete="on" value="keyan" >
        </p>
        <p>
            <label for="email">Email ID</label>
            <input type="email" name="email" id="email" placeholder="[email protected]" autocomplete="on" >
        </p>
        <p>
            <label for="password1">Password</label>
            <input type="password" name="password1" id="password1" placeholder="123$aBc" >
        </p>
        <p>
            <label for="password2">Confirm Password</label>
            <input type="password" name="password2" id="password2" placeholder="123$aBc" ><span id="messages" style="color:red"></span>
        </p>
        <div id="python"></div>
        <button onclick="mypass()">create random password</button>
        <button onclick="myfunction()">fill the random password</button>
        <input type="submit" value="Submit" >
      
    </form>

when I click the ‘create random password’, I expect the mypass function in pyscript to execute and when I click the ‘fill the random password’ button, I want to execute the myfunction function and autofill my password field with the random password previously generated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem is that when I clicked create and fill buttons it returns to the views.py. Because it is inside the forms tag which returns to the views. It's solved by moving the buttons outside of the forms tag. But still the 'fill'button doesn't seems to work. Any suggestions?


  2. 0

    To have an HTML element use an Python function as its handler in PyScript, you’ll need to use the py-[event] attribute instead of JavaScript’s on[event]. That is to say:

    <button py-click="mypass()">create random password</button>

    (You don’t say what version of PyScript you’re using. I’m going to assume you’re using the latest version at time of writing, which is 2023.03.1. For what it’s worth, the event syntax specifically is likely to change in an upcoming version of PyScript, per this PR.)

    In versions of PyScript after 2022.12.1, the builtin display() is the preferred way of writing content to the DOM, so inside your python tag, instead of pyscript.write(...), using display(password, target='password')

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search