12

私は非常に単純な形をしています：

<form id="toBeTranslatedForm" action="actionpage.php" method="POST" >
        <textarea name="userInput" id="toBeTranslatedTextArea"></textarea>
        <select id="translationOptions">//dynamically filled</select>
        <input type="submit" value="Translate" />
</form>

Jqueryを使用して、フォームが送信されたかどうかを検出しています。

function outputTranslated()
{
    $('#toBeTranslatedForm').submit(function() {
        //do stuff
    });
}

テキスト領域に入力されたテキストと、上のフォームの選択ボックスで選択されたオプションを取得するにはどうすればよいですか？理想的には、それらを配列に入れたいと思います。

4

6 に答える 6

7

Vanilla JS FormDataを使用：

form.addEventListener("submit", function(e) {
  e.preventDefault();
  var data = new FormData(form);
  for (const [name,value] of data) {
    console.log(name,value)
  }
})
   
<form id="form">
     <select id="sl1" name="sl">
       <option value="0" defaultSelected="true">-- Select --</option>
       <option value="trek">-- Trek --</option>
       <option value="rim">-- RIM --</option>
     </select>
     <label for="lg">remember</label>
     <input type="checkbox" name="remember" id="lg" />
     <button type="submit">submit</button>
</form>

于 2020-03-09T00:47:54.887 に答える
5 
var theArray = $('#toBeTranslatedForm').serializeArray();

.serializeArrayドキュメントを参照してください。

ちょっとしたメモでは、実際に何かが送信される前にそれらを要求しているので、それは「送信されたフォームから」ではありません。

于 2012-06-08T20:40:09.567 に答える
4

送信イベントからデータを取得できます

function outputTranslated() {
    $('#toBeTranslatedForm').submit(function(evt) {
       const form = evt.target;
       // get the field that you want
       const userInputField = form.elements['userInput'];
       alert(userInputField.value);
    });
}
于 2019-12-16T20:53:33.927 に答える
2

私はあなたがこのようなものを探していると思います。

$('#toBeTranslatedForm').submit(function() {
  alert($(this).serialize());
  return false;
});

それが役に立てば幸い

于 2012-06-08T20:42:19.893 に答える
2

価値を得る方法は次のとおりです。

function outputTranslated() {
    $('#toBeTranslatedForm').submit(function() {
       var textareaval = $('#userInput').val();
       alert(textareaval);
    });
}

textareaval上記のコードの変数定義の後に次の行を追加することで、選択ボックスに対して同じことを行うことができます。

var selectval = $('#translationOptions').val();

次に、シリアル化を使用するか、手動で配列に配置することができます。

var a = [textareaval,selectval];
于 2012-06-08T20:44:50.763 に答える
-1

送信後、次のようにして値を取得するだけで使用できます。

function outputTranslated()
{
$('#toBeTranslatedForm').submit(function() {
    var textarea = $('#toBeTranslatedTextArea').val();
    var allVals = [];
    $('#translationOptions :checked').each(function() {
   allVals.push($(this).val());
 });
});}
于 2012-06-08T20:45:29.373 に答える