HTML：表單上輸入隱藏無線電提交

我有一個有兩個可能的類型（「ID」或「曲線」）HTML：表單上輸入隱藏無線電提交

<form action="process.php"> 
<input type="radio" name="type" value="id"> 
<input type="radio" name="type" value="profile"> 
<input type="text" name="value" value="input"> 
</form>

所以基本上，我所得到的URL

/process.php?type=id&value=input

HTML表單

（或類型=輪廓，這取決於用戶挑選什麼）

我想是我的網址看起來像

/process.php?id=input

或

/process.php?profile=input

我有兩個問題：

1）是以下的jQuery/JavaScript代碼「不好的做法」？我真的不覺得我做的正確，如果我做了下面的方法（儘管它的工作原理）：

<input type="submit" onclick="formSubmit()"> 
<script> 
function formSubmit() { 

    // if the first radio (id) is selected, set value name to "id", else "profile" 
    $("form input:text")[0].name = $("form input:radio")[0].checked ? "id" : "profile"; 

    // disable radio buttons (i.e. do not submit) 
    $("form input:radio")[0].disabled = true; 
    $("form input:radio")[1].disabled = true; 
} 
</script>

2）是否有辦法做到這一點，而無需使用htaccess的規則或JavaScript？

謝謝！

來源

2011-12-11 JDelonge

如果您使用PHP爲什麼不能用它來提交您的形式，而不是JavaScript，這意味着你的函數適用於帶或不帶JavaScript的所有用戶。一個單選按鈕的PHP表單的例子在這裏http://www.homeandlearn.co.uk/php/php4p10.html –

@DominicGreen在process.php中，我可以輕鬆地檢查兩種類型的輸入（id = input或idType = id＆value = input）用於NoScript的人。事實上，我已經這樣做了。編輯：謝謝參考，雖然 - 好主意！ – JDelonge

爲什麼你想要你的網址看起來特定的方式？最終用戶肯定不會在意或注意使用了什麼確切的查詢字符串。我認爲將查詢字符串單獨放置並處理php文件中的所有內容會更好，因此下一個查看代碼的人不會來找你。 –

至於你第一個問題，我會寫我的jQuery這樣的：

// store your form into a variable for reuse in the rest of the code 
var form = $('form'); 

// bind a function to your form's submit. this way you 
// don't have to add an onclick attribute to your html 
// in an attempt to separate your pre-submit logic from 
// the content on the page 
form.submit(function() { 
     // text holds our text input 
    var text = $('input:text', form), 
     // radio holds all of our radio buttons 
     radio = $('input:radio', form), 
     // checked holds our radio button that is currently checked 
     checked = $('input:radio:checked', form); 

    // checking to see if checked exists (since the user can 
    // skip checking radio buttons) 
    if (checked) { 
     // setting the name of our text input to our checked 
     // radio button's value 
     text.prop('name', checked.val()); 
    } 

    // disabling our radio buttons (not sure why because the form 
    // is about to submit which will take us to another page) 
    radio.prop('disabled', true); 
});

至於你第二個問題，你總是可以這樣的邏輯轉移到服務器端。這取決於您是否希望預處理邏輯由客戶端或服務器完成。無論哪種方式，你應該在服務器上有邏輯來驗證表單。如果你的js出錯了，它可以可以通過發送原始表單數據。就我個人而言，我會把這個邏輯放在服務器上，以避免檢查的開銷，以確保它首先被預處理。你也可以減少你的js使用，這將爲你節省一些寶貴的帶寬。

來源

2011-12-11 22:16:38 JesseBuesking

你可以嘗試這樣的事：

<input type="radio" name="type" value="id" onclick="getElementById('textValue').setAttribute('name','id');"> 
<input type="radio" name="type" value="profile" onclick="getElementById('textValue').setAttribute('name','profile');"> 

<form action="process.php"> 
<input type="text" id="textValue" name="value" value="input"> 
<input type="submit"> 
</form>

把無線輸入的形式外，有通過ID標識的，所以你可以使用getElementById功能的文本輸入（仍需如果是要進行檢查由瀏覽器支持）。這可以避免加載jQuery，如果你不需要它在這個頁面上。

結果是您所期望的結果。

但是...我會用表格的服務器端處理。

來源

2011-12-11 22:19:14 kcsoft

HTML：表單上輸入隱藏無線電提交

回答

相關問題