使用jQuery,laravel 5.3将表单数据发送到div提交,表单外部

时间:2017-02-28 13:53:01

标签: javascript php jquery forms laravel

这是我的表格

      <form method="post" action="{{url('/vpage')}}"> 
      <input type="hidden" name="_token" value="{{ csrf_token() }}">

      <label>First Name</label>
           <input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >

      <label>Email Address</label>
          <input type="text" name="email" placeholder="Email Address"  value="{{$user->email}}" >

      <label>Phone Number <span> (optional)</span></label>
             <input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >

      <button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started </button> 
       </form> 

这是形式之外的div

   <div class="vgasRit">
        <p>SUMMARY</p>
           <div class="sfieldz w100">

              <label>Name:</label>
              <input type="text" placeholder="John Smith" value="{{$user->firstname}}">

          </div>
          <div class="w100">
              <label>Email Address:</label>
              <input type="text" placeholder="johnsmith@gmail.com" value="{{$user->email}}" >
           </div>

            <div class="w100">
               <label>Phone Number:</label>
            <input type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
             </div>
    </div>

我想在用户提交表单时访问“fistname”,“lastname”和“phone”的值,以便我可以在摘要div中显示它。

注意:我已经在我的控制器中尝试过php的紧凑功能,这样我就可以在我的视图中发送整个数据库对象但这个解决方案不起作用,在使用紧凑功能之后我就像访问对象一样这个

    <input type="text" placeholder="John Smith"  value="<?= (!empty($group_data)) ? $group_data->firstname : '';?>">

有关于此的任何想法?我是laravel的新手。我在网上服了几个小时但没有发现任何东西。

2 个答案:

答案 0 :(得分:1)

假设所有内容都在同一页面上,请为表单的输入提供一个ID:

<form id="form" method="post" action="{{url('/vpage')}}"> 
<label>First Name</label>
       <input id="firstname" type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >

  <label>Email Address</label>
      <input id="email" type="text" name="email" placeholder="Email Address"  value="{{$user->email}}" >

  <label>Phone Number <span> (optional)</span></label>
         <input id="phone" type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >

也为你的摘要div输入提供一个id:

<p>SUMMARY</p>
       <div class="sfieldz w100">

          <label>Name:</label>
          <input id="firstname2" type="text" placeholder="John Smith" value="{{$user->firstname}}">

      </div>
      <div class="w100">
          <label>Email Address:</label>
          <input id="email2" type="text" placeholder="johnsmith@gmail.com" value="{{$user->email}}" >
       </div>

        <div class="w100">
           <label>Phone Number:</label>
        <input id="phone2" type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
         </div>

然后,当用户提交表单时,使用jquery获取这些值:

$('#form').submit(function() {
    // set our summary div inputs values with our form values
    $('firstname2').val($('firstname').val());
    $('email2').val($('email').val());
    $('phone2').val($('phone').val());
});

应该是它。

答案 1 :(得分:1)

您的观点(我在同一视图中假设表单和夏季div):

        <form method="post" action="{{url('/vpage')}}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <label>First Name</label>
            <input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}">

            <label>Email Address</label>
            <input type="text" name="email" placeholder="Email Address" value="{{$user->email}}">

            <label>Phone Number <span> (optional)</span></label>
            <input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}">

            <button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started</button>
        </form>


@if($Data->input('firstname'))
      <p>SUMMARY</p>


           <div class="sfieldz w100">

              <label>Name:</label>
              <input id="firstname2" type="text" placeholder="John Smith" value="{{$Data->input('firstname')}}">

          </div>
          <div class="w100">
              <label>Email Address:</label>
              <input id="email2" type="text" placeholder="johnsmith@gmail.com" value="{{$Data->input('email')}}" >
           </div>

            <div class="w100">
               <label>Phone Number:</label>
            <input id="phone2" type="text" placeholder="(888) 888-888" value="{{$Data->input('phone')}}">
             </div>

@endif

Contoroller

function vpageController(Request $r){
  return view("path.to.view",['Data'=>$r]);
}

路线:

Route::Route::match(['POST', 'GET'],'/vpage', 'ControllerName@vpageController');