正在尝试将数据属性值添加到其他页面上的输入中

Trying to add data attribute value to an input on a different page?

本文关键字：其他 输入 添加 数据属性      更新时间：2023-09-26

我有一个带有数据标题属性的操作按钮，该属性包含页面标题，当我单击此链接时，我基本上想被带到联系人页面（新页面）并用此标题填充主题输入字段，但我似乎遇到了问题。有人能提出建议吗？

$j=jQuery.noConflict();
$j(document).ready(function(){
enquiryCTA = $j('#enquiry-cta');
   enquiryCTA.on('click', function(){
      var dataTitle = $j(this).data('title');
      $j('span.your-subject').find('input[type=text]').val(dataTitle);
    });
});

HTML（张贴页面上）

<a href="http://localhost/jmccplantsales/contact-us/" id="enquiry-cta" class="right enquire-cta" data-title="HGV1300 dci">Make Enquiry</a>

HTML（在contact.php页面上）

<form action="/jmccplantsales/contact-us/#wpcf7-f118-p4-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="118">
<input type="hidden" name="_wpcf7_version" value="3.1.1">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f118-p4-o1">
<input type="hidden" name="_wpnonce" value="5ac1807bbb">
</div>
<p>Your Name (required)<br>
    <span class="wpcf7-form-control-wrap your-name"><br>
<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40"></span> </p>
<p>Your Email (required)<br>
    <span class="wpcf7-form-control-wrap your-email"><br>
<input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40"></span> </p>
<p>Subject<br>
    <span class="wpcf7-form-control-wrap your-subject"><br>
<input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40"></span> </p>
<p>Your Message<br>
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea></span> </p>
<input type="submit" value="Send" class="wpcf7-form-control  wpcf7-submit"><img class="ajax-loader" src="http://localhost/jmccplantsales/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; ">
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>

它不会工作，因为您的javascript函数只在包含按钮的页面上执行；它不会在联系人表单的新页面上继续执行。因此，您永远不会到达更改主题字段值的行。

如果你在同一页面上有很多这样的按钮，每个按钮都有不同的主题，你可以把主题添加到HTML中每个按钮的URL中，例如

<a href="http://localhost/jmccplantsales/contact-us/?subject=HGV1300%20dci" class="right enquire-cta">Make Enquiry</a>
<a href="http://localhost/jmccplantsales/contact-us/?subject=something_else" class="right enquire-cta">Make Enquiry</a>

然而，从您的示例来看，页面上可能只有其中一个链接。我假设数据标题属性是由其他javascript动态设置的？如果是这样的话，你可以更新你的javascript函数来获得链接href并添加主题参数：

enquiryCTA.on('click', function(e){
  e.preventDefault(); // Stop the link from clicking through
  var dataTitle = $j(this).data('title');
  var url = $j(this).attr('href') + '?subject=' + dataTitle; // get existing link href and add the subject to it
  window.location = url; // load this new url instead of the one in the link href
});

无论你使用这两种方法中的哪一种，你都需要编写一些PHP来用url中subject参数的值（"？subject="后面的位）填充联系人页面上的subject字段。我不是PHP开发人员，所以我不会试图给你这个代码。

希望这能帮助

Tom

编辑：我刚刚重读了你的问题，发现主题值取自当前页面的标题。在这种情况下，您不需要任何javascript，只需使用我提到的第一种方法将页面标题添加到链接href即可。

正如tomds所说：您不需要javascript，只需将页面标题添加到href中，即可将其传递给php脚本。显示这些数据的php代码只是：

<?php echo $_GET["subject"]; ?>

只需将其放在输入的value属性中的引号之间。

更新：如果您没有访问表单脚本的权限，您可以使用jQuery或javascript读取url"subject"参数，然后设置表单输入，类似于以下内容：

var subj = $.url.param("subject");
$("[name=your-subject]").val(subj);

编辑：您需要使用以下jQuery插件才能获得如上所示的主题参数：https://github.com/allmarkedup/jQuery-URL-Parser

但如果你不想使用它，这里有一个javascript函数，你可以使用它：

function getQuery(key_str) {
// return value of key_str variables query string of url
// Ex: url="index.html?alert=5&page=index"; if key_str = "alert" then it returns "5"
  if(window.location.search) {
    var query = window.location.search.substr(1);
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
      var pair = pairs[i].split("=");
      if(unescape(pair[0]) == key_str) return unescape(pair[1]);
    }
    return null;
  } 
}

然后执行：

var subj = getQuery("subject");
$("[name=your-subject]").val(subj);
相关文章：