根據用戶填寫的字段動態設置表單動作

我想要有幾個不同的選項可以映射到不同的動作，但我只需要一個提交按鈕。我不能爲我的生活得到這個工作。這裏是我到目前爲止的代碼：根據用戶填寫的字段動態設置表單動作

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/main.css') }}"> 
<meta charset="UTF-8"> 
</head> 
<body> 
<script type=text/javascript> 
function clicked() { 
    document.getElementById('id').action = "/query"; 
    document.getElementById('filename').action = "/fname"; 
    document.getElementById('dep').action = "/dependency"; 
    return true; 
    } 
</script> 
<div id="header"> 
    <h1>TestPy</h1> 
</div> 
<hr> 
<div id="wrapper"> 
    <div class="query-menu" id="nav"> 
     <form name="query_form" id="query" onsubmit="clicked()" method=post> 
      <fieldset class="fieldset-auto-width"> 
       <legend>Query</legend> 
        <table style="width:25%"> 
        <tr> 
         <td>Plugin ID:</td> 
         <td><input type=text name=script_id id="id" placeholder="19506"></td> 
        </tr> 
        <tr> 
         <td>Filename Search:</td> 
         <td><input type=text name=filename id="fname" placeholder="test.file"></td> 
        </tr> 
        <tr> 
        <td>Dependency:</td> 
        <td><input type=text name=dep id="dep" placeholder="dependency"></td> 
         </tr> 
         <tr> 
          <th rowspan="2"><td><input type=submit value=Query class="btn"></td></th> 
         </tr> 
        </table> 
      </fieldset> 
     </form> 
    </div> 
    <div class="content" id="section"> 
     {% block body %}{% endblock %} 
    </div> 
</div> 
</body> 
</html>

我想要做的是有這三個表單字段每個地圖回一個單獨的網址，但我不能得到這個工作。如果我將JavaScript取出並將網址硬編碼，那麼它工作正常。 HTML/JavaScript並不是我的強大語言，所以我很欣賞任何可以提供的反饋。謝謝！

來源

2016-01-13 Chad D

那麼你如何決定要調用哪個動作？ – Roshan

你怎麼沒有javascript？ –

我用觸發每當用戶離開輸入欄的onblur方法。

<td><input type=text name=filename id="fname" onblur="myFunctionY()" placeholder="test.file"></td> 

<td><input type=text name=dep id="dep" onblur="myFunctionY(this)" placeholder="dependency"></td> 

<td><input type=text name=script_id id="id" onblur="myFunctionY(this)" placeholder="19506"></td>

在Javascript中：

function myFunctionY(vari) { 
console.log(vari.id); 
if(vari.id=="fname") 
{ 
var x = document.getElementById("fname"); 
var link='http://www.google.com?q='+x.value; 
console.log("This is the URL "+link); 
document.query_form.setAttribute("action",link); 
} 
if(vari.id=="id") 
{ 
var x = document.getElementById("id"); 
var link='http://www.google.com?q='+x.value; 
console.log("This is the URL "+link); 
document.query_form.setAttribute("action",link); 
} 
if(vari.id=="dep") 
{ 
var x = document.getElementById("dep"); 
var link='http://www.google.com?q='+x.value; 
console.log("This is the URL "+link); 
document.query_form.setAttribute("action",link); 
} 
}

你可以有3個功能/按您的requirement.Upon提交，它進入新的動作鏈接。

來源

2016-01-13 07:44:47

所以這實際上對我來說非常好，除了一個小問題，我想知道你是否有想法。我希望每個ID都有不同的鏈接。我試圖使用if/elif語句，但JS代碼始終使用if語句。有沒有辦法只使用第一個if語句，如果id是空的？我會繼續玩，看看我想出了什麼。謝謝！ –

@ChadD，我想出了一種方法來確保它返回不同的鏈接。我編輯了答案，因爲插入這裏太長了。希望它有幫助，不用客氣！ –

使用jQuery，我會做這樣的事情：

$('#query').submit(function (e) { 
    // prevent the default action of form submission 
    e.preventDefault(); 

    // create a variable using the 3 field values 
    $form_action = '/'+$('#id').val()+'/'+$('#fname').val()+'/'+$('#dep').val(); 

    // set the form action attribute to the variable value 
    $(this).attr('action') = $form_action; 

    // submit the form as normal now that the action is changed 
    $(this).submit(); 
});

來源

2016-01-13 07:26:13 kjdion84

根據用戶填寫的字段動態設置表單動作

回答

相關問題