自動填寫表單域

Question

我的管理面板中有一個表單，我希望管理員有權通過該表單創建新頁面。

在這個表單中有兩個字段，類別名稱和 URL。

我希望當管理員填寫類別字段時，URL 字段會自動填充。

假設管理員輸入類別名稱作為審計和報告，那么 URL 應填寫為審計和報告.php。

這是我的代碼：

  <td height="26" align="right" ><span class="required">*</span> Name :</td>
  <td>
    <input type="text" name="category_name" value=""   placeholder="Your Catgeory Name" size="40" /> <a href="#" class="url_from_title">Create URL</a><br />

    <div id="error_url_creator" class="red"></div>
  </td>
 </tr>
 <tr class="trOdd">
<td height="26" align="right"><span class="required">**</span> Page URL :
</td>
</tr>

如何做到這一點？

Answer 1

您可以創建一個 JavaScript 事件方法，用連字符“-”替換空格。 這將在更改/模糊文本框時觸發。 例如

   function getUrl(txtBoxText){
    return txtBoxText.toLowerCase().replace(/ /g,"-")+”.php”;
}

您可以根據需要更改連字符。

Answer 2

使用像這樣的 html，在其中使用 data-*，就像使用 data-timestamp 一樣。

    <input class="category-input" type="text" data-category-url="audits-and-reporting.php" name="category_name" value="" placeholder="Your Catgeory Name" size="40" /> 

然后你可以使用 jQuery 的 data 函數來獲取它，你會像這樣使用：

   $(input).data("category-url");

在這種情況下。 只有當您的類別輸入元素上出現您想要的事件（可能是焦點或模糊）時，您才會使用它。 它可能像

$(".category-input").on("focusout blur", function(){
       var url = $(this).data("category-url");
       // Now you can place that url wherever you want
});

- -編輯 - -

如果必須動態生成 url，請使用javascript 的 encodeURI而不是 data-* 東西。

Answer 3

HTML

<table>
    <tr>
        <td><span class="required">*</span> Name :</td>
        <td>
            <input type="text" name="category_name" value="" placeholder="Your Catgeory Name" size="40" id="Catname" />
            <a href="#" class="url_from_title" onclick="CreateURL()">Create URL</a><br />

            <div id="error_url_creator" class="red"></div>
        </td>
    </tr>
    <tr class="trOdd">
        <td>
            <span class="required">*</span> Page URL :
            <input type="text" id="CreatedURL" name="URL" />
        </td>
    </tr>
</table>

Javascript

 function CreateURL() {
    var CatName = document.getElementById("Catname").value;
    var URL = CatName.toLowerCase();
    var replacedString = URL.replace(/ /g, "-");
    var FinalURL = replacedString + ".php";
    document.getElementsByName('URL')[0].value = FinalURL;
}