简体   繁体   English

自动填写表单域

[英]Filling out a form field automatically

I have a form in my admin panel through which I want the admin to have the rights to create a new page.我的管理面板中有一个表单,我希望管理员有权通过该表单创建新页面。

In this form there are two fields, category name and URL.在这个表单中有两个字段,类别名称和 URL。

I want that when the admin fills out the category field the URL field gets automatically filled.我希望当管理员填写类别字段时,URL 字段会自动填充。

Suppose the admin enters the category name as audits and reporting then the URL should be filled as audits-and-reporting.php.假设管理员输入类别名称作为审计和报告,那么 URL 应填写为审计和报告.php。

Here is my code:这是我的代码:

  <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>

How can this to be done?如何做到这一点?

You can create a JavaScript event method which replace spaces with hyphen "-".您可以创建一个 JavaScript 事件方法,用连字符“-”替换空格。 This will be fired on change/blur of textbox.这将在更改/模糊文本框时触发。 eg例如

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

You can change hyphen as per your requirement.您可以根据需要更改连字符。

Use an html like this in which you use data-* as you would use with data-timestamp.使用像这样的 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" /> 

And then you can fetch it with jQuery's data function which you would use like:然后你可以使用 jQuery 的 data 函数来获取它,你会像这样使用:

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

In this case.在这种情况下。 Only that you would use it whenever your desired event (posibly focusout or blur) arises on your category-input elements.只有当您的类别输入元素上出现您想要的事件(可能是焦点或模糊)时,您才会使用它。 It could be like它可能像

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

---EDIT--- - -编辑 - -

If the url has to be dynamicly generated use javascript's encodeURI instead of the data-* thing.如果必须动态生成 url,请使用javascript 的 encodeURI而不是 data-* 东西。

HTML 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 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;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM