【问题标题】:How to pass a Javascript ID value into a form Placeholder?如何将 Javascript ID 值传递给表单占位符?
【发布时间】:2017-05-08 23:46:30
【问题描述】:

我使用了一个函数来捕获“名称”的查询字符串值 - 即想象一个聚会邀请站点;

https://cometomyparty.com?name=phil

使用的函数是;

script type="text/javascript">
     function getQuerystring(){
     var q=document.location.toString();
     q=q.split("?");
     q=q[1].split("&");
     var str=""
     for(i=0;i<q.length;i++){
       tmp=q[i].split("=")
       str+=" "+tmp[1]+"<br />"
                                      }
     document.getElementById("name").innerHTML=str
                  }
     onload=function(){
       getQuerystring()
                 }
</script>

然后我可以使用 id="name" 调用 'name' 的值,我想在我的页面上使用它,即在标题中,我可以说,Phil,期待让你参加聚会...

效果很好。我遇到的问题是,我也有一个正在使用的表单,其中有一个占位符字段,就像这样;

<div class="form-section">
    <input type="text" name="name" class="validate-required" placeholder="Names">

如何在此处将我的 'id' 值 'name' 插入占位符?最终结果将是,邀请机制将在多个受邀者的同一 URL 上工作,但 URL 只会改变。 RSVP 表单将反映 URL 中的内容作为占位符,但如果它不正确,用户仍然可以更新它。

任何建议表示赞赏。

【问题讨论】:

  • 我不确定我是否理解你的问题。所以你想改变你从函数中得到的任何值的placeholder 的值?如果是这样,您可以使用document.getElementById("foo").placeholder = "foo" 吗?
  • 查看我的答案并标记为正确它解决了您的问题。
  • 感谢 Otávio,您的建议为我解决了挑战!
  • 不客气!祝你好运!

标签: javascript html forms query-string


【解决方案1】:

这个查找占位符并使用 jquery 进行更改

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){ 
        $('#name').attr("placeholder", "your place holder here");
    });
</script>

如果它是一个 $var 也不需要引号就像

$('#name').attr("placeholder", $str);

或者使用javascript

<script type="text/javascript">
     function getQuerystring(){
         var q=document.location.toString();
         q=q.split("?");
         q=q[1].split("&");
         var str=""
         for(i=0;i<q.length;i++){
             tmp=q[i].split("=");
             str+=" "+tmp[1]+"<br />";
         }
         document.getElementById("name").innerHTML=str;
         document.getElementById("name").placeholder=str;
     }
     onload=function(){
         getQuerystring();
     };
</script>

document.getElementById("name").placeholder="value here" 如果是 var 则不需要引号

另外您需要在您的 html 输入字段中插入一个 id

<div class="form-section">
    <input type="text" id="name" name="name" class="validate-required" placeholder="Names">

【讨论】:

  • jQuery 仅用于这一用途就过分了,他并没有说他正在使用它。仍然是一个正确的答案。
  • 你是对的,但是 jquery 做同样事情的代码要少得多。无论如何,这就是为什么我也制作了一个 javascript 版本。
  • 确实是公平点。并且 jQuery 非常可靠和有用,我只是希望它与内置数组更好地结合,而不是。
  • 你能把代码包装在一个 IIFE 中吗?无论如何,好的答案:赞成
  • +1 但是有很多方法可以选择一个没有id 的元素,所以你不需要需要插入 一。试试document.querySelector('input[name="name"]')
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-08-21
  • 1970-01-01
  • 2023-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多