jquery - toggle input values with link and php sessions

Question

I have read all sorts of similar Q/A. This may be too specific I suppose.

I would like to toggle input (text) values by "clicking" a voided hyperlink

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

The toggle values are stored in sessions.

So click the link once and value="session". Click again value="". Back and forth. I know its probably simple. I can read jquery. Still learning to write it.

$("#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());
});

Why, but why you PHP echo something you can hardcode into JS? What stops you from doing $("[name='session 1']").val() — Roko C. Buljan
– Roko C. Buljan, Commented Feb 9, 2018 at 12:14
The sessions are set at this point. I need to toggle (with a link) the values of the sessions to populate the input fields. I don't suppose I need to echo. Thank you for showing me different methods. — Anthony
– Anthony, Commented Feb 9, 2018 at 12:24

Roko C. Buljan · Accepted Answer · 2018-02-09 12:40:22Z

You could PHP echo $_SESSION["something"] inside a data-* attribute of your input elements. like:

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

Example with anchor toggle

$("#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>

But using anchors for something cehckoxes were invented for - seems odd, so:

$("#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>

If you don't like the checkbox, use 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>

Collectives™ on Stack Overflow

jquery - toggle input values with link and php sessions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related