ユーザーの入力に応じてフォームの提出リダイレクト

-1

事前にお詫び - 私はすべてのコーディングに非常に多くの助けが必要です。 ...ユーザーの入力に応じてフォームの提出リダイレクト

、そのまま

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <form action="form_output.htm"> 
 
     Input:<br> 
 
     <input type="text" name="input" value="Enter here"> 
 
     <br><br> 
 
     <input type="submit" value="Submit"> 
 
    </form> 
 
    <p>Click 'Submit' to continue.</p> 
 
    </body> 
 
</html>

かなりシンプルだが - 私はそれが彼らに基づいて特定のページにユーザーをリダイレクトする必要があります。

は、ここに私の現在のHTMLです入力。

たとえば、ユーザーがcatを入力する場合は、ターゲットページをform_output_cat.htmにします。これだけでHTMLを使用してなんとかですが、どんな指導をいただければ幸い:)

感謝している場合、

わからない

ベン

出典

2016-04-10 Ben

ユーザーがinputの値を変更するときは、action属性を変更することができます。

var form = document.querySelector('form'); 
 
document.querySelector('input').addEventListener('change', function() { 
 
    form.setAttribute('action', 'form_output_' + this.value + '.html'); 
 
}); 
 

 
form.addEventListener('submit', function(event) { 
 
    event.preventDefault(); 
 
    alert('form should send to: ' + form.getAttribute('action')); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <form action="form_output.htm"> 
 
     Input:<br> 
 
     <input type="text" name="input" placeholder="Enter here"> 
 
     <br><br> 
 
     <input type="submit" value="Submit"> 
 
    </form> 
 
    <p>Click 'Submit' to continue.</p> 
 
    </body> 
 
</html>

出典

2016-04-10 13:13:52

このJavaScriptは、あなたがやりたいのか？

<script>タグの末尾に、</body>の直前に追加します。

const input = document.querySelector("[name=input]"); 
const form = input.parentNode; 
input.addEventListener("input",() => { 
    form.action = `form_output_${input.value}`; 
});

出典

2016-04-10 13:12:50 Chiru

このコードは... https://kangax.github.io/compat-table/es6/ –

@MoshFeuそれは、クロスプラットフォームではありません。これは、私が生まれていた前に存在していたブラウザーで動作します（https://babeljs.io）。さらに、最新のブラウザはすべて 'const'、arrow関数、テンプレート文字列をサポートしているので、問題なく実行する必要があります。ここでは問題ありません。 – Chiru

ありがとう。私は新しいことを学びました。私が理解したように、babelはコンパイラですが、古いブラウザではネイティブにサポートされていません。私はあなたの答えでそれを使用すると、私のような人（2分前;）か、それを知る必要があるので、これを言及する必要があると思います。 –

ユーザーの入力に応じてフォームの提出リダイレクト

答えて

関連する問題