單擊輔助按鈕時提交表單按鈕觸發器

Question

我試圖獲得一個復選框來觸發表單中的提交按鈕。 基本上，這是一個觸摸屏游戲，它使用觸摸鍵盤接收用戶的電子郵件。 觸摸鍵盤上的Enter按鈕可以切換到游戲中。 當我在javascript中添加document.getElementById("").submit ，將重置所有內容。 我嘗試解決此問題的方法是在其旁邊放置一個按鈕，就像“選擇加入”類型的交易一樣。 當您單擊按鈕時，它將電子郵件地址復制到表單中。 但是我仍然需要表單上的提交按鈕來單擊，而無需重置站點或不更新表單信息所在的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。 網站不會重新加載。

Answer 1

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>

Answer 2

您可以嘗試這樣的事情

如您所見，我為此使用了Jquery。 您可以觸發on change 。

然后將ajax請求發送到服務器。

 $('#myCheck').on('change',function() { // ajax request alert('Do your action'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Check me <input type="checkbox" id="myCheck">

簡單的ajax

 $('#myCheck').on('change', function() { var data = JSON.stringify({ email: $('input#email').val() }); $.ajax({ type: "POST", url: "email.php", data: data, success: function(){ alert('success'); }, error: function(){ alert('error'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1"> Email: <input type="text" id="email" value="someone@email.com"> </form> <form id="form2"> Check me <input type="checkbox" id="myCheck"> </form>

因為沒有email.php文件，所以這會給您警報錯誤。

這是您需要的代碼

index.php

 $('#roundedB').on('change', function() { var email = $('input#subscriptions').val(); $.ajax({ type: "POST", data: { 'subscriptions': email }, url: 'send.php', success: function (data) { alert(data); }, error: function (data) { alert(data); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <span id="name"> <!-- Displaying name input from touch keyboard here --> </span> <form method="post" class="emailForm" id="demo" name="myForm"> <label for="subscriptions">Email address</label> <input type="text" name="subscriptions" id="subscriptions"><br> </form> <div class="roundedB"> <input type="checkbox" id="roundedB" name="Submit" /> <label for="roundedB"></label> </div> </body>

send.php

<?php
if(isset($_POST['subscriptions']))
{
    $data=$_POST['subscriptions']."\n";
    $fp = fopen('data.txt', 'a');

   if(fwrite($fp, $data)){
        print 'successful';
   }else{
        print 'error';
   }
    fclose($fp);
}

單擊輔助按鈕時提交表單按鈕觸發器

問題描述

2 個解決方案

解決方案1
1 2019-08-06 06:32:37

解決方案2
0 已采納 2019-08-06 01:50:16

單擊輔助按鈕時提交表單按鈕觸發器

問題描述

2 個解決方案

解決方案1 1 2019-08-06 06:32:37

解決方案2 0 已采納 2019-08-06 01:50:16

解決方案1
1 2019-08-06 06:32:37

解決方案2
0 已采納 2019-08-06 01:50:16