HTMLフォームのチェックボックスの値をチェックまたはチェックしないで変更し、それらの値をクリップボードにコピーする方法

これは私の最初の投稿です！私は初心者のコーダーですが、この問題に苦労しています。ほとんどの場合、チェックボックスで構成された複数入力フォームを使い、ユーザーに私に記入して、「コピー」ボタンをクリックして値をクリップボードにコピーします。唯一の問題は、すべての値を取得する方法や、チェックボックスをオフにするとチェックボックスの値を消す方法を理解できないことです。私は自分のコードを壊してしまい、私が間違ったことを理解できないようです。HTMLフォームのチェックボックスの値をチェックまたはチェックしないで変更し、それらの値をクリップボードにコピーする方法

誰でも私がこれを理解し、自分のやり方の誤りを理解するのを助けることができますか？

現在のコード：このチェックボックスをオフにすると、値は生成されず、選択/テキスト入力に基づいて他の入力が変更されることが理想的です。ボタンを押すと、フォームデータがクリップボードにコピーされます。

function getVal() { 
 
    var one = document.getElementById("form1").value; 
 
    document.getElementById("hiddenDiv").innerHTML =form1; 
 
}; 
 

 
var copyTextareaBtn = document.querySelector('#button'); 
 

 
copyTextareaBtn.addEventListener('click', function(event) { 
 
    var copyTextarea = document.getElementById('hiddenDiv').innerHTML; 
 
    copyTextarea.select(); 
 
    try { 
 
    var successful = document.execCommand('copy'); 
 
    var msg = successful ? 'successful' : 'unsuccessful'; 
 
    console.log('Copying text command was ' + msg); 
 
} catch (err) { 
 
    console.log('Oops, unable to copy'); 
 
} 
 
});

<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t <form id="form1"> 
 
\t \t \t <input type="text" name=""> 
 
\t \t \t <select> 
 
\t \t \t \t <option value=""></option> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t </select> 
 
\t \t \t <input type="checkbox" name="" value="Yes" checked="">Yes 
 
\t \t </form> 
 
\t <div> 
 
\t \t <button id="button" onclick="getVal()" >Copy</button> 
 
\t </div> 
 
</div> 
 
<div id="hiddenDiv"> 
 
</div> 
 
</body>

出典

2017-09-22 hmarcus

'copyTextarea =のdocument.getElementById（ 'hiddenDiv'）あなたは' copyTextarea.select（）を呼び出すしようとすると、innerHTML'ので、文字列を返す; 'それは失敗ではなく、あなたが欲しいものを確認してください。しかし、その行で達成するために –

あなたはjQueryのを試してみたい場合、これは、私はそれを行うだろうかです。私はフォームデータをどのようにフォーマットしたいのか分かりませんので、私はそれをあなたに任せます。配列の書式を設定するだけです。がんばろう。

var copyArray = new Array; 
 
var copyTextareaBtn = $('#button'); 
 
    
 
copyTextareaBtn.on('click', function() { 
 

 
    // empty the textarea first 
 
    $("#hiddenDiv").empty(); 
 
    
 
    // reset array 
 
    copyArray.length = 0; 
 
    
 
    // go through each form input and push into the copyArray 
 
    $("#form1 :input").each(function(){ 
 
    
 
    var input = $(this); 
 
    var x = [input.attr("name"), input.val()]; 
 
    
 
    // ********************************************************************** 
 
    // if the input is a select, and the checkbox is check, 
 
    // add the option to the copy array, otherwise ignore the value. 
 
    // I am jsut looking through the select and text inputs here so if you 
 
    // want a textarea etc you will need to add it to the first part of 
 
    // the if statement. 
 
    // ********************************************************************** 
 
    if(input.is("input:text") || input.is("select")){ 
 
    if(input.is("select")){  
 
     if($("#form1").find("input[name='checkbox1']").is(":checked")){ 
 
     copyArray.push(x); 
 
     } 
 
    } else { 
 
     copyArray.push(x); 
 
    } 
 
    } 
 
    // ********************************************************************** 
 
    
 
    
 
    }); 
 
    
 
    // toggle the textarea to make visible for short time. 
 
    $("#hiddenDiv").toggle(); 
 
    
 
    // copy data to text area 
 
    $("#hiddenDiv").html(copyArray); 
 
    
 
    // select text area value 
 
    $("#hiddenDiv").select(); 
 

 
    var successful = document.execCommand('copy'); 
 
    
 
    // if can copy SUCCESS 
 
    if(successful){ 
 
    console.log('Copying text command was successful'); 
 
    } else { 
 
    console.log('Oops, unable to copy'); 
 
    } 
 
    
 
    // hide input again. 
 
    $("#hiddenDiv").toggle(); 
 
    
 
});

#hiddenDiv { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form id="form1"> 
 
    <input type="text" name="input1"> 
 
    <select name="select1"> 
 
\t \t \t \t <option value=""></option> 
 
\t \t \t \t <option value="option1"> Option 1</option> 
 
\t \t \t \t <option value="option2"> Option 2</option> 
 
\t \t \t </select> 
 
    <input type="checkbox" name="checkbox1" value="Yes" checked="">Yes 
 
</form> 
 
<div> 
 
    <button id="button">Copy</button> 
 
</div> 
 
<textarea type="hidden" id="hiddenDiv"></textarea>

出典

2017-09-22 07:46:04 Icewine

これは素晴らしいです！私はJavaScriptにもっと慣れていますが、私はJQueryに少し目を向けています。それは正直言って少し真っ直ぐだろう。しかし、1つの質問は、チェックボックスの値がまだチェックされているかどうかにかかわらず、チェックボックスの値が表示されているようですが、JQueryでそれを停止する方法はありますか？再度、感謝します！！！ – hmarcus

もちろん、上記のif文を追加して、チェックボックスがオンになっているかどうかを除外しました。私は初めて追加したと思った。申し訳ありません。がんばろう。 – Icewine

HTMLフォームのチェックボックスの値をチェックまたはチェックしないで変更し、それらの値をクリップボードにコピーする方法

答えて

関連する問題