Skip to main content
Nancy OShea
Community Expert
Community Expert
December 28, 2015
Question

Append form input values with some text

  • December 28, 2015
  • 2 replies
  • 2127 views

Merry Christmas and Happy Holidays to one & all!

I'm wondering if there's a way to append from input values with some text contained inside a title attribute on form SUBMIT.

My goal is to grab a value from the input entries and then prefix those values with some descriptive text as the form is being submitted to a shopping cart.

Example:

<form method="post" action="https://shopping_cart/ID">

<label for="arrival">Arrival Date:</label>

<input name="arrival" id="arrival" type="text" value="" title="Arrival Date:" required placeholder="mm/dd/yyyy">

<label for="nights># of Nights:</label>

<input name="nights" id="nights" value="" title="# of Nights:" type="number" min="1" required placeholder="How many nights?">

<label for="guests"># of Guests:</label>

<input name="guests" id="guests" value="" title="# of Guests:" type="number" min="1" required placeholder="How many in your group?">

<button type="submit">ADD TO CART</button>

</form>

So the result in the cart would read:

Arrival Date: (value from datepicker)

#of Nights: (value from nights input)

# of Guests: (value from guests input)

I have tried this a few different ways with straight JS and jQuery but all have failed for various reasons.

Am I spitting into the wind with this?  If so, I'll quit now and call it a day .

Nancy O.

    This topic has been closed for replies.

    2 replies

    sinious
    Legend
    December 29, 2015

    If you don't have access to the server side script you'll need to intercept the form submission, hide the form (or use a fake form and a hidden form for the real values), prepend the data and then submit the form. The general idea is you don't want to add the data to the actual form elements during submission because the user will actually see that data appear.

    Here's a JSFiddle example of a single visible and hidden input. The value the server side will want is the hidden and I'm only demonstrating this version because I don't have to make the form disappear. I'm not saying this is the best method of doing it, especially if you have a lot of form data. You don't want to duplicate every field. You can just hide the form, show a nice "processing" animation and actually change the form values directly. It would use the same code as this example: Edit fiddle - JSFiddle

    After I toss in 11/22/3333 you can see from the element panel the hidden element has the title values prepended:

    Nancy OShea
    Community Expert
    Community Expert
    December 30, 2015

    Good suggestion, Sinious.

    After consulting with the 3rd party shopping cart people, I did end up using a hidden input field with the same name and a value="Arrival date:"

    <input type="hidden" name="arrival" value="Arrival Date:" />

    <input class="form-control" name="arrival" type="text" required placeholder="mm/dd/yyyy">

    On the shopping cart, the 2 inputs get combined like so:

    Arrival date:, 12/31/15

    For the Nights and Guest input fields, I decided to switch from number inputs to select lists which allows me to add required text directly inside the option values.

    <select name="nights" id="nights" size="1" class="form-control" required>

    <option value='' disabled selected>--How many nights?--</option>

    <option value='# of Nights: 1'>1</option>

    <option value='# of Nights: 2'>2</option>

    <option value='# of Nights: 3'>3</option>

    <option value='# of Nights: 4'>4</option>

    etc....

    </select>

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    sinious
    Legend
    January 4, 2016

    Glad you got it solved and hope you had very happy holidays!

    David_Powers
    Inspiring
    December 28, 2015

    If you're using PHP to process the form, the best way to handle this is to use descriptive values for the name attribute. The name and ID attributes don't need to be the same (in fact, they can't be with radio button groups).

    <form method="post" action="https://shopping_cart/ID">

    <label for="arrival">Arrival Date:</label>

    <input name="arrival_date" id="arrival" type="text" value="" required placeholder="mm/dd/yyyy">

    <label for="nights># of Nights:</label>

    <input name="#_of_nights" id="nights" value="" type="number" min="1" required placeholder="How many nights?">

    <label for="guests"># of Guests:</label>

    <input name="#_of_guests" id="guests" value="" type="number" min="1" required placeholder="How many in your group?">

    <button type="submit">ADD TO CART</button>

    </form>

    In the processing script, create the label using str_replace() and ucfirst():

    Alternatively, keep the short name attributes, but use an array for the labels:

    $labels = [

        'arrival' => 'Arrival date: '.

        'nights' => '# of nights; ',

        'guests' => '# of guests: '

    ];

    Nancy OShea
    Community Expert
    Community Expert
    December 30, 2015

    I had not planned on using PHP code.  On  submit, customer is taken directly to a 3rd party shopping cart system.

    Nancy O.

    Nancy O'Shea— Product User & Community Expert