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

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

ただいまの
回答率

90.75%

  • JavaScript

    15277questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

valueが0か空白の要素を削除してPOSTする方法

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 189

pgn

score 3

javascript初心者ですみません…
調べればいいのですが時間がなくお力を貸してほしいです!

formでsabmit時に、valueが0か空白の要素を削除してPOSTする方法はありますか?

<form name="order" action="test.php" method="post" onsubmit="return check()";>
<input type="test name="item1" value=""> 
<input type="test name="item2" value=""> 
<input type="test name="item3" value=""> 
<input type="test name="item4" value=""> 
<input type="test name="item5" value=""> 
<input type="test name="item6" value=""> 
<input type="submit" value="買い物かごに入れる">
</form>

<script type="text/javascript">
function check() {

}
</script>

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • date

    2018/04/20 14:24 編集

    inputにtestなんてありませんがこれは打ち間違いなのかこう入れているのか"で閉じられていないのも不明です

    キャンセル

  • pgn

    2018/04/20 14:29

    すみません、とにかくあわてていて! input type="text" です

    キャンセル

  • 退会済みユーザー

    2018/05/03 16:03

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

回答 2

+3

別フォームを作ってサブミットすれば実現できると思いますが
普通は、受け取った側で判断することです

 sample

一応サンプルだけつけておきます

document.addEventListener('submit',function(e){
  var dummy=document.querySelector('#dummy');
  if(dummy) dummy.parentNode.removeChild(dummy);
  var t=e.target;
  if(t.name=="order"){
    e.preventDefault();
    var f=t.cloneNode(true);
    f.style.display="none";
    console.log(f);
    f.setAttribute("id","dummy");
    for(var i=f.elements.length-1;i>=0;i--){
      var ele=f.elements[i];
      if(ele.type=="text" && (ele.value=="" || ele.value=="0")){
        ele.parentNode.removeChild(ele);
      }
    }
    document.querySelector('body').appendChild(f);
    f.submit();
  };
});
<body>
<form name="order" method="post">
<input type="text" name="item1" value=""> 
<input type="text" name="item2" value=""> 
<input type="text" name="item3" value=""> 
<input type="text" name="item4" value=""> 
<input type="text" name="item5" value=""> 
<input type="text" name="item6" value=""> 
<input type="submit" value="買い物かごに入れる">
</form>
</body>

 ペアを消す

<?PHP
print_r($_POST);
?>
<script>
document.addEventListener('submit',function(e){
  var dummy=document.querySelector('#dummy');
  if(dummy) dummy.parentNode.removeChild(dummy);
  var t=e.target;
  if(t.name=="order"){
    e.preventDefault();
    var f=t.cloneNode(true);
    f.style.display="none";
    console.log(f);
    f.setAttribute("id","dummy");
    for(var i=f.elements.length-1;i>=0;i--){
      var ele=f.elements[i];
      if(ele.type.match(/text/) && (ele.value.match(/^0?$/))){
        ele.parentNode.removeChild(ele);
        if(r=ele.name.match(/^(item_)(\d+)$/)){;
          var pair=f.elements[r[1]+"no_"+r[2]];
          if(pair) pair.parentNode.removeChild(pair);
        }
      }
    }
    document.querySelector('body').appendChild(f);
    f.submit();
  };
});
</script>
<body>
<form name="order" method="post">
<input type="text" name="test" value="">


<input type="text" name="item_01" value="">
<input name="item_no_01" type="hidden" value="000001" />

<input type="text" name="item_02" value="">
<input name="item_no_02" type="hidden" value="000201" />

<input type="text" name="item_03" value="">
<input name="item_no_03" type="hidden" value="030001" />

<input type="text" name="item_04" value="">
<input name="item_no_04" type="hidden" value="000003" /><input type="submit" value="買い物かごに入れる">
</form>
</body>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/20 14:21

    ありがとうございます。
    受け取り側は手を加えられないとのことで困っております・

    キャンセル

  • 2018/04/20 14:44

    sampleつけておきました
    あくまでも姑息な手段になるのでおすすめしないことは理解下さい

    キャンセル

  • 2018/04/20 16:24

    ありがとうございます!!!
    思い通りの動きになりました!

    >おすすめしないことは理解下さい
    はい!受け取り側が対応するまでの応急処置とさせていただきます!


    すみません、実はもう次の段階がありまして、
    以下のように数量入力する要素とペアになった、IDをhiddenで送っており、そちらも一緒に削除したいのです。。。

    可能でしょうか・・・(><)

    --------------------------
    <input type="text" name="item_01" value="">
    <input name="item_no_01" type="hidden" value="000001" />

    <input type="text" name="item_02" value="">
    <input name="item_no_02" type="hidden" value="000201" />

    <input type="text" name="item_03" value="">
    <input name="item_no_03" type="hidden" value="030001" />

    <input type="text" name="item_04" value="">
    <input name="item_no_04" type="hidden" value="000003" />

    キャンセル

  • 2018/04/20 17:23

    ペアがあったらそれも消すサンプルつけときました

    キャンセル

  • 2018/04/20 17:55 編集

    ありがとうございます…
    今日1日頑張ってるのが一瞬で解決し、感謝しきれません。。。

    先ほど、数量とIDのnameを
    item_●●、item_no_●●と書いたのですが
    正確には別の文字列でして、、、
    自分なりに以下にしてみたのですが、目的の文字列は生成できましたが
    要素が消えてくれません。。。


    -------------------
    //一緒に削除するhiddenタグのnameを求める
    var delname = ele.name;
    var dal = delname.replace( /item_/g,'');
    var dalid = 'no_'+ dal;

    if(dalid) dalid.parentNode.removeChild(dalid);
    -------------------

    ほんとになにからなにまで申し訳ありません。。。
    ある程度お教えいただければできるかと思ったのですが、そう簡単にはいきませんでした。。。

    キャンセル

  • 2018/04/20 18:02

    すみません!!解決しました!!!!
    本当に本当にありがとうございました!!
    弟子入りしたいぐらいです・・・
    本当に感謝いたします!!!

    キャンセル

  • 2018/04/20 18:03

    > 正確には別の文字列でして、、、

    具体的に提示していただけないと回答のしようがないですね

    キャンセル

checkベストアンサー

+2

フォーム部品にdisabled=trueとすることでフォームの送信対象から外れることを使えばよいでしょう.

<form id="f">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <button type="submit">送信</button>
</form>
f.onsubmit = e => [].forEach.call(f.elements, input => (input.value == "" || +input.value === 0) && (input.disabled = true));


https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/20 14:44

    disabledは戻ってきたりしたとき大変ですよ

    キャンセル

  • 2018/04/20 14:50

    確かにベストではありませんが. その時はその時ということで
    あとは設計上の問題かと思います

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15277questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。