jQuery的/ JavaScript的變化形式，動作上輸入字段

我有這樣jQuery的/ JavaScript的變化形式，動作上輸入字段

<html> 
    <body> 
    <form action='' name='myform' method='POST'> 
    <input type='text' name='cars'> 
    <button action='submit'>Search Cars</button> 
    </body> 
</html>

形式我想要做的是改變形式的行動是基於什麼填入輸入框像action='http://www.mysite.com/<cars_value>.html'> （由自動完成填充）。

有沒有簡單的方法來做到這一點？我可以用<select>輕鬆完成，但客戶需要輸入字段！

來源

2012-09-24 bertster

你可以做到這一點，你將需要添加ID到項目。您可能想要做的一件事是驗證用戶輸入。

HTML

<form action='' name='myform' id="myform" method='POST'> 
    <input type='text' name='cars' id="cars"> 
    <button action='submit'>Search Cars</button> 
</form>

jQuery的

$('#myform').submit(function(){ 
    var car = $('#cars').val(); 
    $(this).attr('action', "http://www.mysite.com/" + car + ".html"); 
});

編輯：最好是要在頁面底部的JavaScript;

FULL

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <form action='' name='myform' id="myform" method='POST'> 
    <input type='text' name='cars' id="cars"> 
    <button action='submit'>Search Cars</button> 
    </form> 
    <script src="path-to-jquery"></script> 
    <script> 
    // Shorthand for $(document).ready(); 
    $(function() { 
    $('#myform').submit(function(){ 
    var car = $('#cars').val(); 
    $(this).attr('action', "http://www.mysite.com/" + car + ".html"); 
    }); 
    }); 
</script> 
</body> 
</html>

來源

2012-09-24 15:24:47 jsweazy

乾杯，這看起來像我在想什麼。抱歉對jquery/js有點新鮮感 - 代碼中會出現哪些內容（jQuery位），是否需要進入？ – bertster

我已經編輯了我的答案，以顯示哪裏可以放下 – jsweazy

可愛，謝謝，我會試試看。乾杯JSweazy – bertster

如下你可以這樣做：

$('#myForm').submit(function() { 
    this.action = 'http://mysite.com/<xyz>.html'; 
    return true; 
}

來源

2012-09-24 15:18:39 techfoobar

謝謝 - 如何從表格中收集？即如果用戶輸入法拉利或阿斯頓馬丁或捷豹等？ – bertster

在這種情況下，用'$（'＃myInputField'）替換''。val（）' - 其中'myInputField'是在URL中需要的值的字段的ID。 – techfoobar

你需要從輸入字段中的值並填充XYZ值..試試這個

$('#myForm').submit(function() { 

    var value = $('input[type="text"]').val(); 

    this.action = 'http://mysite.com/' + value + '.html'; 
    return true; 
}

來源

2012-09-24 15:23:21

首先獲得您的輸入，然後更新的動作。如果要在更改值後提交表單，則返回true;如果這些是單獨的按鈕，則返回false。

<button onclick="changeVal($('input').val()">change value</button> 
<script> 
    function changeVal(value){ 
    $("form").attr("action",'http://mysite.com/'+value+'.html'); 
    return true; 
    } 
</script>

要小心這樣做，就好像你使用這個解決方案一樣，你會打開自己的JavaScript注入攻擊。在將其注入到表單之前，您需要「磨礪」您的輸入。

來源

2012-09-24 15:27:42 MaxPRafferty

感謝，對於安全性的建議，我想到了我所有的php輸入 - 所以JS端也會這樣做。乾杯 – bertster

jQuery的/ JavaScript的變化形式，動作上輸入字段

回答

相關問題