質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

JavaScript valueの特定

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,399

a-_.

score 133

・チェックボックス未チェックのままsubmitボタンを押下した場合はエラー(javascript:alert)を表示し、投稿を中止     
という条件をJavaScriptのみで処理したいんですが、「未チェックのままsubmitボタンを押下した場合はエラー」(else if (up.checked == true || de.checked == true)のコード)の処理に不備があるようで、box = box + document.ca.elements[cb].value;のvalue値を変数boxに入れる為に書いてるのに、valueがどのvalue値を指してるのか定義されてないのでエラーが発生してる、と考えたんですが、それでfalseの処理は動作するんでしょうか
あとvalueの特定のやり方として、var option = document.myForm.mySelect.options;みたく、変数を追加してから「どのタグの中のどのタグの~」と範囲を限定的にする書き方があるらしいんですが、この書き方で下記コードの特定する処理は成立するんでしょうか
リンク内容

<html>
    <head>
        <meta charset="utf-8">
        <script>
            function condition() {
                var ps = document.getElementById("r1");
                var up = document.getElementById("r2");
                var de = document.getElementById("r3");
                if (ps.checked == true || up.checked == true) {
                    if (document.getElementById('name').value.length >= 10) {
                        window.alert("ERROR1");
                        return false;
                    } else if (document.getElementById('name').value == "") {
                        window.alert("ERROR2");
                        return false;
                    } else if (document.getElementById('comment').value.length >= 300) {
                        window.alert("ERROR3");
                        return false;
                    } else if (document.getElementById('comment').value == "") {
                        window.alert("ERROR4");
                        return false;
                    }
                } else if (up.checked == true || de.checked == true) {
                    ca = document.getElementsByName('chkid[]');
                    var box = "";
                    for(var cb = 0; cb < ca.length; cb++) {
                        if (document.ca.elements[cb].checked) {
                            box = box + document.ca.elements[cb].value;
                        }
                        return true;
                    }
                    if (box == "") {
                        window.alert("ERROR5");
                        return false;
                    }
                }
            }
            function change(obj) {
                console.log(obj.id);
                if (obj.id == "r1") {
                    document.getElementById("send").value = "投稿";
                    chkchange(true);
                } else if (obj.id == "r2") {
                    document.getElementById("send").value = "更新";
                    chkchange(false);
                } else if (obj.id == "r3") {
                    document.getElementById("send").value = "削除";
                    chkchange(false);
                }
            }
            function chkchange(bool) {
                chk = document.getElementsByName('chkid[]');
                for(var box = 0; box < chk.length; box++) {
                    console.log(chk[box]);
                    console.log(box);
                    chk[box].disabled = bool;
                }
            }
        </script>
    </head>
    <body>
        <form method="post" action=""  name="fn" onsubmit="return condition()">
            <table>
                <tr>
                    <td>
                        名前:<input type="text" name="name" id="name">
                        内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
                        <input type="radio" name="bbs" id="r1" value="post" onChange="change(this)">投稿
                        <input type="radio" name="bbs" id="r2" value="update" onChange="change(this)">更新
                        <input type="radio" name="bbs" id="r3" value="delete" onChange="change(this)">削除
                        <input type="submit" value="投稿" id="send">
                    </td>
                </tr>
            </table>

<?php
            while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>

            <table>
                <input type="checkbox" name="chkid[]" value="<?=$row['id'] ?>">
                <tr>
                    <td>名前:
                        <?php echo $row['name'] ?>
                    </td>
                </tr>
                <tr>
                    <td>内容:
                        <?php echo $row['comment'] ?>
                    </td>
                </tr>
            </table>

<?php
            }
            mysqli_free_result($result);

            mysqli_close($link);
?>

        </form>
    </body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2016/09/02 14:15

    質問がぶれるのでPHPの部分はベタのHTMLでサンプルを書いてください、前回の私の回答が参考になると思います

    キャンセル

  • a-_.

    2016/09/02 14:32

    >ベタのHTML どういう意味でしょうか?

    キャンセル

  • yambejp

    2016/09/02 14:45

    回答者の環境で再現できないPHPを書かずにHTMLで書いてくださいということ

    キャンセル

  • 退会済みユーザー

    2016/09/02 15:50

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+7

未解決の前の質問も残ってるのでそれをまず処理してから質問したほうがいいと思いますよ。質問してそれを理解せずに次に進もうとするから芋づる式に問題が増えていってわけがわからなくなってるのだと思います。あせらず落ち着いて前の質問の解答を参考にコードをよく見て一つ一つ処理していってください。そして「~でしょうか」ではなくやってみて「できなかったです」などという結果を言ったほうがいいと思います。この書き方では丸投げに見えます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+2

jQueryを使わないバージョンです。
今後javascriptの質問に無駄にPHPを混ぜ込まないでください

<script>
try{
document.addEventListener ('click',function(e){myfunc(e)},true);
document.addEventListener ('submit',function(e){myfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){myfunc(e)});
document.attachEvent('onsubmit',function(e){myfunc(e)});
}
window.onload=function(){
  change();
}
function myfunc(e){
  var t = (e.srcElement || e.target);
  if(e.type=="submit"){
    if(!condition()){
      console.log("ng");
      e.preventDefault();
    }
  }
  if(e.type=="click" && t.nodeName=="INPUT" && t.type=="radio" && t.name=="bbs"){
    change();
  }
}
function condition() {
  var ps = document.getElementById("r1");
  var up = document.getElementById("r2");
  var de = document.getElementById("r3");
  if(ps.checked || up.checked){
    with(document.getElementById('name')){
      if(value.length >= 10) {
        alert("ERROR1");
        return false;
      }
      if (value === "") {
        alert("ERROR2");
        return false;
      }
    }
    with(document.getElementById('comment')){
      if(value.length >= 300) {
        alert("ERROR3");
        return false;
      }
      if (value === "") {
        alert("ERROR4");
        return false;
      }
    }
  }
  if(up.checked || de.checked){
    var chks=document.getElementsByName("chkid[]");
    var checkedflg=false;
    for(var i=0;i<chks.length;i++){
      if(chks[i].checked){
        checkedflg=true;
        break;
      }
    }
    if(!checkedflg){
      alert("ERROR5");
      return false;
    }
  }
  return true;
}
function change() {
  var myid="r1";
  var bbs=document.getElementsByName("bbs");
  for(var i=0;i<bbs.length;i++){
    if(bbs[i].checked){
      myid=bbs[i].id;
      break;
    }
  }
  var sendlist={
    "r1":{"text":"投稿",checkflg:true},
    "r2":{"text":"更新",checkflg:false},
    "r3":{"text":"削除",checkflg:false},
    };
  document.getElementById("send").value=sendlist[myid].text;
  var chks=document.getElementsByName("chkid[]");
  for(var i=0;i<chks.length;i++){
    chks[i].disabled=sendlist[myid].checkflg;
  }
}
</script>
<form method="post" name="fn">
名前:<input type="text" name="name" id="name">
内容:<textarea name="comment" cols="30" rows="3" id="comment"></textarea>
<input type="radio" name="bbs" id="r1" value="post" checked>投稿
<input type="radio" name="bbs" id="r2" value="update">更新
<input type="radio" name="bbs" id="r3" value="delete">削除
<input type="submit" value="投稿" id="send">
<table>
<tr>
<td><input type="checkbox" name="chkid[]" value="1"></td>
<td>名前:name1</td>
<td>内容:content1</td>
</tr>
<tr>
<td><input type="checkbox" name="chkid[]" value="2"></td>
<td>名前:name2</td>
<td>内容:content2</td>
</tr>
<tr>
<td><input type="checkbox" name="chkid[]" value="3"></td>
<td>名前:name3</td>
<td>内容:content3</td>
</tr>
</table>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/02 15:08

    ご回答ありがとうございます

    何故PHPの部分はベタのHTMLでサンプルを書かないと、質問がぶれるとお考えになったのでしょうか

    キャンセル

  • 2016/09/02 15:15

    1)そもそもがここのところずっと続く質問が「PHP」の質問ではないため
    2)PHPの部分に問題があるかどうか検証しないといけないため
    3)そもそも質問者と同じ環境はつくれないので、回答者はmysqlからデータを取り出せないため
    4) 回答者側が「きっとこんなデータだろう」というダミーデータを自分で用意しないといけず、それがあっているかどうかもわからないため

    質問者さんが手抜きしてることで回答者は相当な負担を強いられてることを自覚してください

    キャンセル

  • 2016/09/02 15:35

    すいませんが、手抜きではなく他の言語に書き直すなんてやり方は存じ上げないのでたった今作成したコードを貼る事しかできません
    その点ご了承いただければと存じます

    PHPに関しては出力関数のみですが、混在しているので一応PHPも含まれているという意味です

    私が根本的に行いたいのは「追加するだけ」であって、その他のコードは大幅に変更はしなくてよいのです

    もしもタグが紛らわしいとの事であれば外します

    キャンセル

0

ですから、ca でループをまわしているのだから、
ca でとればいいのでは?
chkのとこはchk[box]でとってるじゃないですか…。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/02 15:06

    ご回答ありがとうございます

    >ca でループをまわしているのだから、 caでとればいいのでは
    valueをcaに変更させることで変数に入れられるという事をおっしゃっているのでしょうか

    キャンセル

  • 2016/09/02 15:09

    そう思うのであれば、やってみましょう。

    (なんかこのやりとり、どこかで…。 ^_^;)

    キャンセル

  • 2016/09/02 15:24

    すいません
    もう少し明確に教えていただけると参考になります

    キャンセル

  • 2016/09/02 17:44

    caにはチェックボックスの配列がはいっていますよね?
    そしてそれをcbインデックスでループさせているわけです。
    では、そのループのなかで、caのチェックをみて、trueならば
    Onなわけですから、エラーメッセージを表示して、
    return すればOKです。
    そうすればvalueはつかわなくてもいい。
    まぁつかってもいいけど、その辺は自由にしてください。

    キャンセル

0

HTMLの部分では、idがr1,r2,r3であるのは「ラジオボタン」です。
ラジオボタンの場合、必ず1つが選択された状態になりますから、「未チェックのまま」というのは起こり得ません。

「チェックボックス未チェックのままsubmitボタンを押下」というコードを書く必要があるのであれば、まずHTMLでチェックボックスを作りましょう。

質問者が何をしたいのかが判りませんので、具体的な助言はできませんが、とにかく『HTMLとJavascriptが対応していないと、まともに動作する訳がない』事を理解してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る