Pass HTML input values to jQuery form value

Question

Have a form where I need to pass HTML text input values into a Stripe form.

How can I achieve this?

Snippet of what I have:

<input type="text" name="trip" id="trip" value="">

JS: (part of the form)

.append(jQuery('<input>', {
        'name': 'trip',
        'value': getElementById('#trip'),
        'type': 'hidden'
      }))

What I've Tried to grab that value:

'value': $("#trip").val(),
'value': document.querySelector('#trip'),
'value': document.getElementById('#trip')

At this point I'm just googling and guessing. =/

###UPDATE###

I was trying to avoid a code dump, but there might be more to the issue.

Here is a more detailed update.
I'm needing to store parts of the form in a Database and keep getting this error.

I've tried most of the solutions in this thread but keep getting this error.

SQLSTATE[23000]: Integrity constraint violation: 1048 Column gift_trans_fee' cannot be null

This is the reason I need to pass the HTML to the Stripe script.

Most of the JS Form Fields are for creating a Charge / Customer in Stripe, But I have a few items I need to store in the DB

HTML FIELDS

<input type="checkbox" class="faChkSqr" value="yes" name="gift_trans_fee" id="gift-check" autocomplete="off" checked>

   //DEPENDING ON WHAT'S CHOSEN WILL BRING UP DIFFERENT FIELDS  
<select onchange="tripbehalf(this);" class="custom-select marb-15" id="tripbehalf">
<option selected="true">Optional Info</option>
<option value="trip">This is for a trip.</option>
<option value="behalf">This is on behalf of...</option>
<option value="both">Both Options</option>
</select>

<input type="text" id="trip_participants" name="trip_participants" value="">

<input type="text" id="behalf_of" name="behalf_of" value="">

FULL JS FORM

function createHandler(route) {
return StripeCheckout.configure({
key: '{{ config("services.stripe.key") }}',
image: 'https://xxxx-stripe.jpg',
locale: 'auto',
token: function(token) {
  // Use the token to create the charge with a server-side script.
  // You can access the token ID with `token.id`
  var newForm = jQuery('<form>', {
    'action': route,
    'method': 'POST',
  }).append(jQuery('<input>', {
    'name': 'stripe_token',
    'value': token.id,
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'csrfmiddlewaretoken',
    'value': getCookie('csrftoken'),
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'amount',
    'value': Math.round(document.querySelector('.total').innerText * 100),
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'email',
    'value': token.email,
    'type': 'hidden'
  }))
///EXTRA VALUES NEEDED IN DATABASE///
  .append(jQuery('<input>', {
    'name': 'gift_trans_fee',
    'value': getElementById('gift-check'),
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'trip',
    'value': getElementById('tripbehalf'),
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'trip_participants',
    'value': getElementById('trip_participants'),
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'behalf',
    'value': getElementById('tripbehalf'),
    'type': 'hidden'
  })).append(jQuery('<input>', {
    'name': 'behalf_of',
    'value': getElementById('behalf_of'),
    'type': 'hidden'
  }));


  $("body").append(newForm);
  newForm.submit();
}
});
}

PHP Logic:

$stripeTransaction->transactions()->create([
    'user_id' => auth()->id(),
    'customer_email' => $charge->receipt_email,
    'amount' => $charge->amount,
    'recurring' => false,
    'gift_trans_fee' => $request->gift_trans_fee,
    'trip' => $request->trip,
    'trip_participants' => $request->trip_participants,
    'behalf' => $request->behalf,
    'behalf_of' => $request->behalf_of,

]);

$("#trip").val() should work, Can you share complete code? — Satpal
– Satpal, Commented Jun 22, 2018 at 10:08
$("#trip").val() should work, assuming you've loaded jQuery.js correctly. If you want to use document.getElementById remove the # and get the value property: document.getElementById('trip').value — Rory McCrossan
– Rory McCrossan, Commented Jun 22, 2018 at 10:09

score 2 · Accepted Answer · 2018-06-22 10:34:59Z

2

Use $('#trip').val()

.append(jQuery('<input>', {
        'name': 'trip',
        'value': $('#trip').val(),
        'type': 'hidden'
      }))

OR Remove #

   .append(jQuery('<input>', {
            'name': 'trip',
            'value': document.getElementById('trip').value,
            'type': 'hidden'
          }))

edited Jun 22, 2018 at 10:34

answered Jun 22, 2018 at 10:10

user6299088

Sign up to request clarification or add additional context in comments.

Comments

kevinfromspace · Accepted Answer · 2018-06-22 10:16:19Z

1

just doing

var inputtext = jQuery("#trip").val();

should work just fine, if there are no other fields with the ID trip which there shouldn't be since it's an ID.

use

jQuery(idorclassorsomething).html(inputtext);

to show your text change idorclassorsomething into an id, class or something else where you want to show the input text. You might wanna put it in a click on a button or on keyup or keydown.

answered Jun 22, 2018 at 10:16

kevinfromspace

1632 silver badges15 bronze badges

Collectives™ on Stack Overflow

Pass HTML input values to jQuery form value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related