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, アッド, イベント, キャンセル, クリック, コード, こちら, サブミット, サンプル, それ, フォーム, ボタン, リスナー, 一, 上記, 事, 今日, 使用, 例, 側, 処理, 台風一過, 場合, 方, 方法, 次, 細分化, 自分, 記載, 送信, 阻止, 際,

キャンプや個展は気兼ねなく行けるものなのかも？

2022.08.22

Logging

おはようございます。月曜日の朝ですね、今日から一日のスケージュールを作って活動します。

さて、キャンプや個展などは、コロナ禍であっても気兼ねなく行ける場所なのかもしれないな。キャンプは外だし、個展は基本的に喋ることが無い空間ですからね。そういう意味で今、再過熱していそうです。秋には個展や美術、展示会など見に行きたいイベントがありますが、どれも県外なので難しいです😭。

話変わって、自分はいまWordPressの過去記事をブロック形式に一括変更できないのか、模索しています。一括変更できるプラグインは恐らく今の段階では作れそうにないです。何故なら公式が提供してくれている記事をブロック変換する物はJavaScriptで変換している。逆から言えば表示される前のデーターを変更するよりもJavaScriptで変換した方がベストと公式サイトのエンジニアが恐らく考えたという事なので、プラグインで作るのは至難の業なのかもしれない。

なので、今回考えたのはSeleniumを使用して解決する方法です。これならそれ程時間もかからず開発できるので、こちらで対応します。尚、出来上がったものを提供するかは今の段階では考えていません。

タグ

javascript, WordPress, イベント, いま, エンジニア, キャンプ, こと, コロナ, サイト, スケージュール, データー, どれ, プラグイン, ブロック, ベスト, もの, 一, 一括, 事, 今, 今日, 個展, 公式, 前, 場所, 変換, 変更, 外, 展示会, 形式, 意味, 提供, 方, 月曜日, 朝, 業, 模索, 段階, 気兼ね, 活動, 物, 県外, 禍, 秋, 空間, 美術, 自分, 至難, 表示, 記事, 逆, 過去, 過熱,

地方ではいろいろなイベントが中止になっているけど、そろそろ。

2022.02.19

Logging

おはよう御座います。
今日の高知県は雨がシトシトと降っていますね。冬の雨は実はあまり好きではないです。
逆にそれ以外の季節の雨は苦手ではありませんが、冬の雨は寒いから好きではないです。

さて地方（高知県）ではいろいろなイベントが中止になっているけど、そろそろ良いじゃね😏と思っておりますが、そうはいかない現状があるのを知っています。よくよく考えるとコロナ始まって二年目になるけれど、なんか進化（対応）しているのと思えてならない所があります。

日本って対応が後手後手じゃないかなって思います、島国根性ぽっいですよね😣、日本って昔からこんな感じだったのかなぁ。なんだか事なかれ主義ぽっいですよね😣。

まぁそんな日本ってずっとコロナと戦い続けるのでしょうか？、海外の放送や動画を見ていると半分ぐらいの人々しかマスクをしていないです、それに比べて日本は８割の人々はマスクをしているし、お店とかでノーマスクでいると「なんか目線が気になります」って具合ですよね。自分もお店などではマスクをしています。

コロナも食い止められない、経済も駄目、一体、日本は何を目指しているのか、良くわかりません。と愚痴っても何もならないのですが・・・。

そんな今の社会になかなか適応出来ていない自分がいます。なんか先が見にくい世の中ですよね。いつまでコロナとの戦いは続くのでしょうか？
（頭の良い人々が日夜コロナに打ち勝つ方法を探しているでしょうけど、なかなか突破口が見えない状態が続いています。自分の予想ではあと二年はこんな感じだと思います）

タグ

8, イベント, いろいろ, お店, コロナ, それ, ノー, マスク, 中止, 主義, 事なかれ, 二, 人々, 今日, 冬, 動画, 半分, 地方, 季節, 対応, 島国, 後手後手, 感じ, 所, 放送, 日本, 昔, 根性, 海外, 現状, 苦手, 逆, 進化, 雨, 高知県,

JavaScriptを再勉強しているのだが、ある疑惑が！？

2020.06.03

Logging

JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。

jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。

あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});

タグ

addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,

jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。

2020.03.10

Logging

jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。記述は下記になります。ぐぐると出てくるので知っている人の方が多いかもしれませんが…。ちなみに自分はこの記述方法、ごくまれにしか使わないため、忘れてしまいます。event.dataに紐づけてくれるのはとても良いかなと自分は思っていますが、皆さんはいかがでしょうか？もうjqueryなんか使わないよという方もいると思うのですが、自分が思うにゴリゴリ書くよりか、jqueryで済ませれるところは使ったほうがコードは短くて済むと思っています。WEB業界は技術の移り変わりが早いですよね。逆にソフトのほうはWEBよりはスパンが長い気がします。

https://zip358.com/tool/demo9/

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body>
    <p id="pen">お腹空いた(´；ω；｀)お腹空いたと＞φ(..)</p>
</body>
</html>

$(function(){
    $("#pen").click({sword:"The pen is mightier than the sword"},function(e){
        $(this).text(e.data.sword);
    });
    // $("#pen").on("click",{sword:"The pen is mightier than the sword"},function(e){
    //     $(this).text(e.data.sword);
    // });
});

タグ

charset, data, DOCTYPE, EVENT, gt, head, html, ja, jquery, lang, lt, meta, quot, web, いかが, イベント, かな, コード, スパン, ソフト, ため, ところ, 下記, 人, 処理, 引数, 技術, 方, 方法, 業界, 気, 皆さん, 紐, 自分, 記述, 逆,

jsのクリックイベントの謎？？

2019.06.22

Logging

javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。

See the Pen jsのクリックイベントの謎？？ by taoka (@taoka-toshiaki) on CodePen.

タグ

0, 265, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, javascript, jquery, JS, lt, ON, Pen, QXprJX, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, イベント, クリック, これ, 奥, 挙動, 気, 謎,

VBAオブジェクトを自動生成しイベントを付与する。

2019.01.12

Logging

VBAオブジェクトを自動生成しイベントを付与する。
サンプルコードです。
ダウンロードはこちら
https://zip358.com/tool/sample.zip

Dim chg_class(0 To 5) As chg
Public Sub objset()
Dim obj_ctl As Control
Dim i As Integer
For i = LBound(chg_class) To UBound(chg_class)
    Set obj_ctl = UserForm1.Controls.Add("Forms.TextBox.1", "Box" & i)
    obj_ctl.Top = 10 + 20 * i
    obj_ctl.Width = 200
    obj_ctl.Height = 20
    obj_ctl.Text = "ここを変更してみて、またはダブルクリック（" & i & "番）"
    Set chg_class(i) = New chg
    chg_class(i).set_evn obj_ctl, i
    Set obj_ctl = Nothing
Next i
End Sub

Private WithEvents TextB As MSForms.TextBox
Private index_no As Integer
Public Sub set_evn(hoge_obj As MSForms.TextBox, hoge As Integer)
    Set TextB = hoge_obj
    index_no = hoge
End Sub
Private Sub TextB_Change()
    MsgBox TextB.Text 'UserForm1("Box" & index_no)
End Sub
Private Sub TextB_DblClick(ByVal Cancel As MSForms.ReturnBoolean)
    MsgBox TextB.Text 'UserForm1("Box" & index_no)
End Sub

Private Sub TextBox1_Change()
MsgBox TextBox1
End Sub
Private Sub CommandButton1_Click()
End Sub
Private Sub UserForm_Click()
End Sub

タグ

0, １, 10, 20, 200, 358, 5, Add, amp, as, Box, chg, class, com, Control, Controls, ctl, Dim, For, Forms, Height, Integer, LBound, obj, objset, public, sample, set, Sub, Text, TextBox, To, tool, TOP, UBound, UserForm, VBA, Width, zip, イベント, オブジェクト, コード, ここ, こちら, サンプル, ダウンロード, 付与, 変更, 自動生成,

都会で住むのは観光とはやっぱり違う。

2016.04.27

Logging

Hello Tokyo from Christoph Gelep on Vimeo.
都会で住むのは観光とはやっぱり違うけど
住んでいた時を思い出すと、あんまり自分の行動範囲は
違わなかったような気がする。
休日は映画や本屋、電気店、美術館などをめぐってたし
食べるところも似たり寄ったりのところが多かった。
田舎と違うところは交通機関の便が良いところや
何かしら休日にはイベントあるから
そういう面は本当に都会は良いと思う。
とくにトラブルに巻き込まれたという経験もなく
都会で住んでいたので・・・。
正直なところ負の側面を知らない。
おそらく負の側面もあるだろうけど・・・。
 
 

タグ

Hello Tokyo from Christoph Gelep on Vimeo, イベント, ところ負, トラブル, 交通機関, 休日, 便, 側面, 大事, 本屋, 田舎, 経験, 美術館, 良いところ, 行動範囲, 観光, 都会, 電気店,

１日1万PVとかある人より地方のブロガーが何か納得できる。

2015.11.10

Logging

１日1万PVとかある人より地方のブロガーが何か納得できる。
ありんど高知さんが書かれているイケダハヤトの倒し方（http://kochi-arindo.com/etc/2015/11/09/8452）を読んでみてふと思ったことは何か変だなと思った。１万PVあるのにRT率が少ないとかいいねの数が少ないとか・・・。
何か変だなと感じるようになったのです。イケダハヤト氏のブログは約１万PVある
のに・・・そんなに共感はされていない。むしろ炎上でもっている。
炎上記事を読むより、ありんど高知さんが書かれている記事を読むほうが
高知県を再発見できて面白い。特にお店の紹介やイベントものの記事が
充実しているので良い感じです。良い感じなんだけど
PV数は断然、イケダハヤト氏の方が断然多い。
そういう現状を見てしまうと何だかなぁと思ってしまう。
これが差というものなのかなぁと
感じるものの、ありんど高知さんには頑張って欲しいです。
ちなみに、高知県にはありんど高知さんと高知のWEBメディアZEYOが
（旧：土佐メディア）二分しているのですが、今のところ、高知新聞にも
紹介されたありんど高知さんに軍配が上がっている模様です。
どちらも食レポとイベントレポが主なのです。
あとはオリジナリティのある記事のカテゴリを掲載すれば
当たれば伸びると思いますが、今のところ独自路線てきな要素が
無いのが、アクセス数が伸び悩んでいるひとつの問題かと思います。
まさに自分のアクセス数を棚に上げて 記事を書いているのですが・・・・。
追記：紙媒体で代表するメディアはほっとこうちさんなんでしょうね。これがWEBにシフトすれば
あっという間に食われてしまいそうです。
何だか、その兆しがあるような気がします。
ちなみに、もうひとつ紙媒体があります。
とさぶしです。こちらはWEBやアプリまで作っています。
こちらも強そうです。無料媒体なのでこちらも注目です。
 

タグ

09, １, 11, 2015, 8452, com, etc, http, kochi-arindo, PV, rt, ありん, イケダハヤト, イベント, お店, こと, これ, ブロガー, ブログ, もの, 万, 人, 充実, 共感, 地方, 変, 差, 感じ, 数, 方, 炎上, 率, 現状, 発見, 納得, 紹介, 記事, 高知, 高知県,

2015年：砂浜Tシャツアート展/高知県幡多郡黒潮町の入野海岸

2015.05.05

Logging

砂浜Tシャツアート展/高知県幡多郡黒潮町の入野海岸へ行ってきました。
行きは車で一般道路を通って黒潮町まで行ったのですが、到着するのに三時間ぐらい費やしました。
高知市内だと二時間半ぐらいはかかると思います。帰りは高速道路を使ったので一時間ほど短縮出来ました。
砂浜Tシャツアート展ですが、行って良かったものの少しばかり遠いなと感じます。
今度、行く時には電車で行こうかなと考えています。
電車だと片道4850円ぐらい費用が発生する（高知駅から土佐入野駅まで）ものの車酔いは発生しませんし、運転手だと疲労困憊になる事はないです。
主催している砂浜美術館には申し訳ないのですが、桂浜で同じようなイベントを行って欲しいと若干感じました。
ちなみに応募した皆さんが描かれたTシャツですが、風が吹いているとTシャツに描かれた作品があまり見えないのが若干難…。
しかし、風に無数のTシャツがなびいているのは圧巻でした。それを見るだけでも見に行く価値ありかと思います。

2016年の動画に差し替え。
 

タグ

2015, 4850, アート, ありか, イベント, いま, シャツ, それ, もの, 一, 一般, 三, 主催, 事, 二, 今度, 作品, 価値, 入野, 到着, 半, 土佐, 圧巻, 少し, 市内, 幡多郡, 応募, 思, 時, 桂浜, 海岸, 無数, 片道, 疲労困憊, 発生, 皆さん, 短縮, 砂浜, 美術館, 若干, 費用, 車, 車酔い, 運転手, 道路, 難, 電車, 風, 高知, 高知県, 高速道路, 黒潮町,