submit(サブミット)：送信させない４つの方法です🙄。#javascript #サブミットキャンセル

2022.09.07

Logging

おはようございます、台風一過が去りましたね😌。

さて、今日はsubmit(サブミット)：送信させない４つの方法を記載します、方法は大きく分けて２つの方法があり、それを細分化して４つの方法になります。まず、一番目は“送信する際（form側）”にてキャンセルする方法です。この場合、addEventListener（アッドイベントリスナー）でキャンセル処理する場合とonsubmitを使用してキャンセルする方法があります。

サンプルコード例１と例３にあたるコードが上記のコードになります。

次に”ボタンをクリック”した際にサブミット（送信）処理をキャンセルする方法です、この方法でも送信を阻止する事ができます。

サンプルコード例２と例４にあたります、自分としてはフォームで処理した方が良いかなと思いますが、こちらでも送信をキャンセルする事ができます。

尚、ソースコードは下記になります。また、参考にしたサイトのリンクを貼っときます。MDNのリンクです。

    <form id="frm" method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit1</button>
    </form>
    <form method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button id="btn" type="submit" class="btn btn-primary">Submit2</button>
    </form>    
    <form method="post" action="./example/" onsubmit="return func1()" >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit3</button>
    </form>
    <form method="post" action="./example/"  >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary" onclick="return func2()" >Submit4</button>
    </form>

//例１
document.getElementById("frm").addEventListener("submit",function(event){
    event.preventDefault();
});
//例２
document.getElementById("btn").addEventListener("click",function(event){
    event.preventDefault();
    event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。 
});
//例３
function func1(){
    return false;
}
//例４
function func2(){
    return false;
}

タグ

１, 2, ３, 4, addEventListener, Form, javascript, onsubmit, submit, アッド, イベント, キャンセル, クリック, コード, こちら, サブミット, サンプル, それ, フォーム, ボタン, リスナー, 一, 上記, 事, 今日, 使用, 例, 側, 処理, 台風一過, 場合, 方, 方法, 次, 細分化, 自分, 記載, 送信, 阻止, 際,

WordPressを実践勉強中、ajaxについてうにゃ。

2017.10.27

Logging

WordPressでajaxを動かそうするとき、WordPressのルールに
則って動かさないと動かないらしい。
なので、このような記述を書かないといけない。
まず、非同期処理の送信先に、admin-ajax.phpというファイルを指定。
そこへPOSTかGETしないといけない。そしてデータとして
アクションさせるファンクション名を記述して
上げないといけないらしい。
こんな感じになる。

$( '#submit' ).on( 'click', function(){
    $.ajax({
        type: 'POST',
        url: <?=admin_url('admin-ajax.php')?>,
        data: {
            'action' : 'hoge_f',
        },
        dataType: "json",
        success: function( obj){
            alert( obj );
        }
    });
    return false;
});

次にWPテーマのファンクションファイルに下記を追加記述。

function hoge_f(){
echo json_encode($_POST);
    die();
}
add_action( 'wp_ajax_hoge_f', 'hoge_f' );
add_action( 'wp_ajax_nopriv_hoge_f', 'hoge_f' );

ここでミソなのが、die();という部分、これを除けると0という文字も出力されてしまう。
ちなみにwp_ajaxがログイン時の振る舞い、wp_ajax_noprivがログアウト（＝訪問者）時の
振る舞いだそうだ。
この2つの勘所だけ覚えとけばWordPressで非同期処理が
行えるのではないだろうか、もっと詳しく知りたい場合、admin-ajax.phpの中身を
見たらよいのだろうけど、にわかWordPress職人さんはコレだけ
覚えとけば良さそうだと。
 

タグ

'hoge_f', 'wp_ajax_nopriv_hoge, Action, admin-ajax.php, AM, click, dataType, echo json_encode, function hoge, function hoge_f, obj, POST, return false, submit, WordPress職人, ファンクション, ファンクションファイル, ログアウト, 体, 非同期処理,

Facebookが消えてもTwitterは生き残りそうな予感とcurlの事をメモ書き(´∀｀)。

2015.01.19

Logging

 
Facebookが消えてもTwitterは生き残りそう気がします。自分はFacebookの活動をしていません（アカウントはあります）。この頃、Facebookの活動をしてみようかなとか若干、考えてます。友達申請とかして友達増やしていくと、それに時間を費やする時間が発生するのでそこがネックだったりもします。「いいね」ボタンはある意味良くて困りもの。そういう面ではLINEはいいとこ取りなSNSですね。流行したわけが何となくわかります。Twitterが生き残りそうな理由ですけど匿名性が高い気楽に使える情報発信ツールだからです。
昨日、curlっていうリナックスのコマンドをさくらレンタルサーバーのスタンダードで使用できるかなってTera Term（DLこちら）を使用してさくらレンタルサーバーにログインして打ってみました。curl https://zip358.com って感じに打つと結果が返ってきました（こんな感じの結果）。スタンダード版で打てるとは思わなかったのでびっくりしました。トイウコトデ、POSTも出来ます、こんな感じにcurl -d “memo=memomemo!!” https://zip358.com と打つとsubmit（提出：送信）されます。なんで、実はwgetとかも使用できるのではと思ったわけです、打ってみると使用できます。viも使用できたりします・・・。よくよく考えるとさくらの技術サポートさんが使うためにある程度インストールしてるみたい。ちなみにps ax | more でプロセス見たりプロセスをkillコマンドで消す事もできます。
 
この頃、技術系ネタが多かったので明日は少しソフトなネタを書こうと思います(´Д｀)。
 

タグ

curl, Facebook, killコマンド, memomemo, ps ax, submit, Twitter, wget, アカウント, さくらレンタルサーバー, スタンダード版, トイウコトデ, プロセス, めちゃくちゃ, メモ書き, リナックス, 体, 匿名性, 情報発信ツール, 技術サポート, 活動,