CODEWITHSUNDEEP
phpjquery
BardsWork
BardsWork

Reputation: 566

Passing value of textarea with jquery to PHP

I have a tip section that can be "custom" input from a customer. When the customer enters a value, I want to pass it to PHP for updating the order.

I'm unsuccessful and I'm thinking I'm approaching this problem the wrong way since I can't get it to work. What options are available to me without using AJAX?

The tip section:

  <?= ($receipt['tip'] > 0 ?
  '<tr id="tip-area"><th>Tip</th>
    <td><textarea id="tip" name="update_tip" readonly>'. $receipt['tip'].'</textarea></td>
  </tr>'
  : '') ?>

My form which has different tip options:

    <form method="post">
      <tr>
        <button title="20% Tip" type="submit" name="update_tip" id="update_tip" class="tip-button"
                value="<?= ($_SESSION['order']['quote']['subtotal'] * 0.2); ?>">
          <small>20%<br><?= number_format(($_SESSION['order']['quote']['subtotal'] * 0.2), 2) ?></small>
        </button>

        <button title="Edit Tip" type="button" name="update_tip" id="custom-tip" class="tip-button">
          <small>Edit<br>Tip<br></small>
        </button>

        <button title="Save Tip" type="submit" id="save_tip" class="hidden">
          <small>Save<br>Tip</small>
        </button>
      </tr>
    </form>

My jQuery:

  $('#custom-tip').click(function(){
    $('#tip').removeAttr('readonly').focus();
    $('.tip-button').addClass("hidden");
    $('#save_tip').removeClass("hidden");
  });

  $('#save_tip').click(function (){
    var tip = $('textarea#tip').val();
    $('<input type="hidden" name="update_tip" value="' + tip + '">').submit();
  });

  $('#tip').focus(function(){
    this.value = '';
  });

When they press "Edit Tip", the readonly property is remove, the area comes into focus and value is cleared.

Then the user should enter a value and hit Save.

Then I'm trying to retrieve the value they entered.

Upvotes: 1

Views: 152

Answers (2)

Barmar
Barmar

Reputation: 781028

I think this is what you want:

$("form").submit(function() {
    $("<input>", {
        type: "hidden",
        name: "update_tip",
        value: $("#tip").val()
    }).appendTo($(this));
});

This will create the hidden input with the value from the textarea and append it to the current form when before the form is submitted.

Upvotes: 1

Robert Calove
Robert Calove

Reputation: 449

You need to have PHP code on the same page (because your form does not specify an action) that handles the data. Use the 'name' attribute for your input to specify the key of the value you wish to access in the $_POST super global. For example, if I post a form with the following code: 

<form method='POST'>
    <input type='hidden' value='hello' name='world'>
    <input type='submit' value='submit'>
</form>

Then in PHP, I can access the value of the element with the name "world" with the following code:

$_POST['world']

Use this syntax to acquire the data from the form and persist it/update it.

Upvotes: 0

Related Questions