使用HTML按钮添加文本到输入和提交表单[关闭]

问题描述：

Goal: Div with pin code input popups when a div is clicked (got this part). Enter pin code with buttons into a text input field of a form. When the correct 4 digits are entered, redirect to new page without having to press any sort of submit button.

What I have: I got the div that pops up by toggling the style of the div (display: hidden) The div which you have to click in order to get the pin code input div is named s_wrapper_date_time.

What I need: When any button is pressed it should be added to the text input field. And when the correct 4 digits are entered, automatically redirect to different page. Without any sort of submit button.

Code: Home.php

<div id="code_input" class="s_input_code_content s_hidden">
        <form onsubmit="javascript: return false;">
            <input id="input_screen" class="s_input_text" type="text" maxlength="4"/>
            <div id="s_keypad">
                <button id="7" value="7" class="s_btn_g s_btn_number">7</button>
                <button id="8" value="8" class="s_btn_g s_btn_number">8</button>
                <button id="9" value="9" class="s_btn_g s_btn_number">9</button>
                <button id="4" value="4" class="s_btn_g s_btn_number">4</button>
                <button id="5" value="5" class="s_btn_g s_btn_number">5</button>
                <button id="6" value="6" class="s_btn_g s_btn_number">6</button>
                <button id="1" value="1" class="s_btn_g s_btn_number">1</button>
                <button id="2" value="2" class="s_btn_g s_btn_number">2</button>
                <button id="3" value="3" class="s_btn_g s_btn_number">3</button>
                <button id="0" value="0" class="s_btn_g s_btn_null">0</button>
            </div>
        </form>
    </div>

Script:

 <script type="text/javascript">
            $(".s_wrapper_date_time").click(function(){
                $("#code_input").toggleClass("s_hidden");
                $("#code_wrapper").toggleClass("s_hidden");
                //window.location.href = "overview.php?a=0";
            });
        </script>

Thanks for your time.

答

        pin_length = 4; //set your pin length.
        $(".s_btn_g").on("click", function(){
            $("#input_screen").val($("#input_screen").val() + $(this).text());
        });
        $("#input_screen").on("change", function(){
            if($(this).val().length === pin_length) $("form").submit(); //or window.location.href, whatever
        });

It really is better to use form names/ids and use the form action attribute, rather than using the submit to move the viewer down the page. Also, you can disable "Enter" key submits.

使用HTML按钮添加文本到输入和提交表单[关闭]

相关推荐