javascript - Javascript 获取实际的 url 来填写表格
问题描述
我对 Javascript 很陌生,想在我的 WP 网站上添加一些 javascript 代码。
我想做的是能够用实际的 URL 填写表单的 URL 部分。例如:we're on
www.example.com/test1,上面有一个表格,上面有几个信息,还有一个 URL 字段要填写。
我希望这个字段是带有实际网址的字段www.example.com/test1
Acutally 我知道我必须window.location.href
在我的 Javascript 中使用,但如何让它填写表格?
编辑(表格部分):
<div class="job_application application">
<input type="button" class="application_button button" value="Postuler" />
<div class="application_details">
<div role="form" class="wpcf7" id="wpcf7-f89-p76-o1" lang="fr-FR" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/wp/poste/recruitment-intern-human-resources-knowledge/#wpcf7-f89-p76-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="89" />
<input type="hidden" name="_wpcf7_version" value="4.7" />
<input type="hidden" name="_wpcf7_locale" value="fr_FR" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f89-p76-o1" />
<input type="hidden" name="_wpnonce" value="2a4920fb40" />
</div>
<p><label> Votre nom (obligatoire)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre prénom(obligatoire)<br />
<span class="wpcf7-form-control-wrap your-forename"><input type="text" name="your-forename" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre adresse de messagerie (obligatoire)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Numéro de Téléphone (obligatoire)<br />
<span class="wpcf7-form-control-wrap your-tel"><input type="tel" name="your-tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre CV (obligatoire)<br />
<span class="wpcf7-form-control-wrap your-cv"><input type="file" name="your-cv" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre Lettre de Motivation (obligatoire)<br />
<span class="wpcf7-form-control-wrap your-lm"><input type="file" name="your-lm" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Commentaire<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><label> URL<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="url" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-required wpcf7-validates-as-url" autocomplete="on" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><input type="submit" value="Envoyer" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div> </div>
</div>
</div>
</div>
</div><!-- .entry-content -->
<div class="shapely-next-prev row">
<div class="col-md-6 text-left">
<div class="wrapper"><span class="fa fa-angle-left"></span> <a href="http://192.168.125.218/wp/poste/ubisoft-montreuil-france-6-assistante-chargee-de-communication-interne-h-f-stage-6-mois-janvier-2019-communications-pr/" rel="prev">Assistant(e) Chargé(e) de Communication Interne H/F – Stage 6 mois – Janvier 2019 (Communications & PR)</a></div> </div>
<div class="col-md-6 text-right">
</div>
</div>
</article>
</div><!-- #primary -->
</div>
</div><!-- #main -->
解决方案
做你需要的方法是使用属性获取 DOM 元素,例如“type”
document.querySelector('[type="url"]').value = window.location.href;
当然,如果您有该类型的不同 DOM 元素,我建议您为其分配一个唯一的 id,然后您可以按如下方式使用:
document.getElementById("myURLField").value = window.location.href;
推荐阅读
- constraints - 带有线性约束的 Scipy 最小化试图在 nan 调用目标函数
- devops - ServcieNow 和 DevOps 集成问题
- javascript - 如何在我的 firebase 数据库中显示使用 javascript 在 php 网页中格式化的列表?
- python - 用于在另一个列表的任何值的列表中查找最高位置的单行
- android - 取消运行协程的 Job 并重用 Job 对象
- javascript - 在循环内重新声明块范围的循环变量
- asp.net - 如何将 ASP.NET Web 服务配置为不将端口号附加到请求 URL
- javascript - 为什么在 addEventListener 回调中使用 this 作为对要附加到的元素的引用不起作用?
- python - 来自文件的多级数据框
- amazon-web-services - 使用负载均衡器的 ec2 实例上的 SSL 证书