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,
]);
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'
}))
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.