javascript - jquery - 使用链接和 php session 切换输入值

Question

我已经阅读了各种类似的问答。我想这可能太具体了。

我想通过“点击”无效的超链接来切换输入(文本)值

<a id="same" href="javascript:;">link</a>

切换值存储在 session 中。

所以点击链接一次，value="session"。再次点击 value=""。来回。我知道这可能很简单。我可以阅读 jquery。仍在学习编写它。

$("#same").on("click", function(){
    $("[name='event_contact_name']").val($("[name='<?php echo "session 1"; ?>']").val());
    $("[name='event_contact_lastname']").val($("[name='<?php echo "session 2"; ?>']").val());
    $("[name='event_contact_phone']").val($("[name='<?php echo "session 3"; ?>']").val());
    $("[name='event_contact_email']").val($("[name='<?php echo "session 4"; ?>']").val());
});

Answer 1

您可以在输入元素的 data-* 属性中使用 PHP echo $_SESSION["something"]。喜欢:

data-sessionval="<?= $_SESSION["something"] ?>"

带有 anchor 切换的示例

$("#same").on("click", function() {

 var tog = this._sessTog = !this._sessTog;

  $("[data-sessionval]").val(function() {
    return tog ? $(this).data("sessionval") : "";
  });

});

<a id="same" href="javascript:;">Use session values</a>

<br>

Name: <input name="event_contact_name" data-sessionval="php echoed here">
last name: <input name="event_contact_lastname" data-sessionval="php echo text">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是为 cehckoxes 发明的东西使用 anchor - 看起来很奇怪，所以:

$("#same").on("change", function() {

 var ckd = this.checked;

  $("[data-sessionval]").val(function() {
    return ckd ? $(this).data("sessionval") : "";
  });

});

<label><input id="same" type="checkbox"> Use session values</label>

<br>

Name: <input name="event_contact_name" data-sessionval="php echoed here">
last name: <input name="event_contact_lastname" data-sessionval="php echo text">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您不喜欢复选框，请使用 CSS:

$("#same").on("change", function() {

  var ckd = this.checked;

  $("[data-sessionval]").val(function() {
    return ckd ? $(this).data("sessionval") : "";
  });

});

[type=checkbox] + span:before {
  margin-right: 10px;
  content: "\2610";
}
[type=checkbox]:checked + span:before {
  content: "\2611";
  color: #0bf;
}

<label>
   <input id="same" type="checkbox" hidden>
   <span>Use Session values</span>
</label>

<br> Name: <input name="event_contact_name" data-sessionval="php echoed here">
Last name: <input name="event_contact_lastname" data-sessionval="php echo text">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>