时间戳

首页 > 解决方案 > 单击辅助按钮时提交表单按钮触发

javascript - 单击辅助按钮时提交表单按钮触发

问题描述

我正在尝试获取一个复选框来触发表单中的提交按钮。基本上，这是一款使用触摸键盘接收用户电子邮件的触摸屏游戏。触摸键盘上的 Enter 按钮是进入游戏的开关。当我添加document.getElementById("").submitjavascript 只是重置一切。我尝试解决此问题的方法是在其旁边放置一个按钮，类似于“选择加入”类型的交易。当您单击该按钮时，它会将电子邮件地址复制到表单中。但是我仍然需要单击表单上的提交按钮，而无需重置站点或不更新表单信息所在的 data.txt。

<body>
  <script>
    function myFunction() {
      var x = document.getElementById("name").innerHTML;
      document.getElementById("demo").innerHTML = x;
    }
  </script>
  <span id="name">
<!-- Displaying name input from touch keyboard here -->
  </span>
  <form method="post" class="emailForm" id="demo" name="myForm">
    <input type="text" name="subscriptions" id="formName"><br>
    <input type="submit" name="mySubmit" id="submitBtn">
  </form>

  <div class="roundedB">
    <input onclick="myFunction()" type="checkbox" value="None" id="roundedB" name="Submit" />
    <label for="roundedB"></label>
  </div>
</body>

<?php

if(isset($_POST['subscriptions']))
{
    $data=$_POST['subscriptions'];
    $fp = fopen('data.txt', 'a');
    fwrite($fp, $data);
    fclose($fp);
}
?>

我想要实现的是单击检查按钮，表格填写并自动提交到data.txt。网站不会重新加载。

标签： javascriptphphtmlforms

解决方案

Drat - 在注意到已接受的答案之前开始执行此操作，但无论如何都会发布此内容，因为它可能会有所帮助。

<?php

    error_reporting( E_ALL );
    ini_set( 'display_errors', 1 );



    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        /* This is where you would process the POST request somehow...  */
        $_POST['response']=date( DATE_ATOM );
        $_POST['ip']=$_SERVER['REMOTE_ADDR'];

        /* prepare data for saving */
        $json=json_encode( $_POST );

        /* write to file */
        $file=__DIR__ . '/subscriptions-data.txt';
        file_put_contents( $file, $json . PHP_EOL, FILE_APPEND );

        /* send back a response of some sort to the ajax callback function */
        exit( $json );
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>submit form button trigger when secondary button clicked</title>
        <script>
            document.addEventListener( 'DOMContentLoaded', function(){

                const xhr_callback=function(r){
                    console.info( r );
                };

                const ajax=function(url,payload,callback){
                    let xhr=new XMLHttpRequest();
                        xhr.onreadystatechange=function(){
                            if( this.status==200 && this.readyState==4 )callback( this.response );
                        }
                        xhr.open( 'POST', url, true );
                        xhr.send( payload );                    
                };

                const clickhandler=function(e){
                    if( this.checked ){
                        let payload=new FormData( document.forms.myForm );
                        ajax.call( this, location.href, payload, xhr_callback );
                    }
                };

                document.querySelector('input[type="checkbox"][name="submit"]').addEventListener( 'click', clickhandler );
            });
        </script>       
    </head>
    <body>
        <span id='name'>
            <!-- Displaying name input from touch keyboard here -->
        </span>

        <form method='post' class='emailForm' name='myForm'>
            <input type='text' name='subscriptions' value='geronimo@hotmail.com' />
            <br />
            <input type='submit' />
        </form>

        <div class='roundedB'>
            <input type='checkbox' value='None' name='submit' />
            <label for='roundedB'></label>
        </div>
    </body>
</html>

推荐阅读