将 HTML 输入值传递给 jQuery 表单值答案

【问题标题】：Pass HTML input values to jQuery form value将 HTML 输入值传递给 jQuery 表单值
【发布时间】：2018-12-01 19:04:09
【问题描述】：

有一个表单，我需要将 HTML 文本输入值传递给 Stripe 表单。

我怎样才能做到这一点？

我所拥有的片段：

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

JS：（表单的一部分）

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

我试图抓住这个价值的方法：

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

此时我只是在谷歌搜索和猜测。 =/

###UPDATE###

我试图避免代码转储，但问题可能还有更多。

这里有更详细的更新。
我需要将部分表单存储在数据库中并不断收到此错误。

我已经尝试了此线程中的大多数解决方案，但一直收到此错误。

SQLSTATE[23000]：违反完整性约束：1048 列 gift_trans_fee' 不能为空

这就是我需要将 HTML 传递给 Stripe 脚本的原因。

大部分 JS 表单字段用于在 Stripe 中创建费用/客户，但是我有一些项目需要存储在数据库中

HTML 字段

<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="">

完整的 JS 表单

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 逻辑：

$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() 应该可以，你能分享完整的代码吗？
$("#trip").val() 应该可以工作，假设你已经正确加载了 jQuery.js。如果你想使用document.getElementById 删除# 并获取value 属性：document.getElementById('trip').value
你也可以试试jQuery("#trip").val()

标签： javascript php jquery laravel forms

【解决方案1】：

使用$('#trip').val()

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

或删除#

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

【讨论】：

【解决方案2】：

只是在做

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

应该可以正常工作，如果没有其他带有 ID 行程的字段，因为它是 ID，所以不应该存在。

使用

jQuery(idorclassorsomething).html(inputtext);

要显示您的文本，请将 idorclassorsomething 更改为 id、class 或您想要显示输入文本的其他内容。您可能希望通过单击按钮或 keyup 或 keydown 来实现。

【讨论】：