Support the ongoing development of Laravel.io →
Requests Input Forms

I have form that should post data in JSON format, but it doesn't work yet.

here is my blade

{!! Form::open(array( 'class' => 'calculator', 'name' => 'calculator', 'files' => true, 'ng-app' => 'SaunaDoorCalc', 'ng-controller' => 'SaunaDoorCalcController')) !!}
@if(Session::has('message'))
    <div class="alert alert-info">{{Session::get('message')}}</div>
@endif
@if(Session::has('errors'))
	<div class="alert alert-info">@foreach($errors->all() as $error){{ $error }}<br>@endforeach
</div>
@endif

	<input name="calc" ng-model="calc" type="hidden" value="saunadoor">

<div class="row">
	<div class="col-xs-12 col-sm-6">Размер дверной коробки
		<div class='input' ng-repeat="a in sizeswitch">
			<input type="radio" name='radio' ng-model="$parent.selectedSizeSwitch" ng-value="a.label" id="@{{a.value}}">
			<label for="@{{a.value}}">@{{a.label}}</label>
		</div>
	</div>

   <div ng-switch on="selectedSizeSwitch">
	<div class="col-xs-12 col-sm-6" ng-switch-when="Стандартный">Стандартные размеры дверной коробки (мм)
		<div class="custom-dropdown custom-dropdown--white">
			<select ng-model="$parent.selectedStandardSize" ng-options="b.label for b in standardsizes" class="standard_sizes custom-dropdown__select custom-dropdown__select--white"></select>
		</div>
	</div>

	<div class="col-xs-12 col-sm-6" ng-switch-when="Нестандартный">Нестандартные размеры дверной коробки
		<div class='input'>
			<input name="door_size_b" id="input1" type="text" ng-model="$parent.DoorSizeB" ng-pattern="/^[0-9]{1,4}$/" placeholder=""><label for="door_size_b">Ширина дверной коробки, мм</label>
			<span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
		</div>

		<div class='input'>
			<input name="door_size_h" id="door_size_h" type="text" ng-model="$parent.DoorSizeH" ng-pattern="pattern"><label for="door_size_h">Высота дверной коробки, мм</label>
			<span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
		</div>
	</div>
   </div>


</div>

<div class="row">
	<div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Стекло</span>
		<div class="custom-dropdown custom-dropdown--white">
			<select ng-model="selectedGlass" name="glass" ng-options="c.label for c in glass" class="custom-dropdown__select custom-dropdown__select--white"></select>
		</div>
	</div>

	<div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Материал коробки</span>
		<div class="custom-dropdown custom-dropdown--white">
			<select ng-model="selectedKorobka" name="korobka" ng-options="d.label for d in korobka" class="custom-dropdown__select custom-dropdown__select--white"></select>
		</div>
	</div>
</div>


<div class="row">
	<div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Петли</span>
		<div class="custom-dropdown custom-dropdown--white">
			<select ng-model="selectedPetli" ng-options="e.label for e in petli" class="custom-dropdown__select custom-dropdown__select--white"></select>
		</div>
	</div>

	<div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Декор</span>
		<div class="custom-dropdown custom-dropdown--white">
			<select ng-model="selectedDekor" ng-options="f.label for f in dekor" class="custom-dropdown__select custom-dropdown__select--white"></select>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Доставка</span>
		<div class="custom-dropdown custom-dropdown--white">
			<select ng-model="selectedDostavka" ng-options="g.label for g in dostavka" class="custom-dropdown__select custom-dropdown__select--white"></select>
		</div>
	</div>

	<div class='input col-xs-12 col-sm-6'>
  		<input type='checkbox' id='montazh' ng-model="montazh" ng-true-value="1500" ng-false-value="0"/>
  		<label for="montazh">Монтаж</label>
	</div>
</div>


<table class="result table table-hover table-striped table-bordered table-condensed" ng-switch on="selectedSizeSwitch"> 
	<caption>Итоговая спецификация</caption>
<tbody>
<tr><td>Опция</td>							<td>Значение</td>												<td>Цена, руб</td></tr>
<tr><td>Размер дверной коробки (мм):</td>	
	<td ng-switch-default>@{{selectedSizeSwitch}}, @{{selectedStandardSize.label}}</td>
  	<td ng-switch-when="Нестандартный">@{{selectedSizeSwitch}}, @{{DoorSizeB}}x@{{DoorSizeH}}</td>	
  	<td ng-switch-default>@{{selectedStandardSize.price}}</td>
  	<td ng-switch-when="Нестандартный">@{{DoorSizeB*DoorSizeH*5000/1000000}}</td>
</tr>

<tr><td>Стекло</td>							<td>@{{selectedGlass.label}}</td>								<td>@{{selectedGlass.price}}</td></tr>
<tr><td>Материал дверной коробки:</td>		<td>@{{selectedKorobka.label}}</td>								<td>@{{selectedKorobka.price}}</td></tr>
<tr><td>Петли:</td>							<td>@{{selectedPetli.label}}</td>								<td>@{{selectedPetli.price}}</td></tr>
<tr><td>Декор:</td>							<td>@{{selectedDekor.label}}</td>								<td>@{{selectedDekor.price}}</td></tr>
<tr><td>Доставка:</td>						<td>@{{selectedDostavka.label}}</td>							<td>@{{selectedDostavka.price}}</td></tr>
<tr><td>Монтаж:</td>						<td>@{{montazh.label}}</td>										<td>@{{montazh}}</td></tr>

<tr><td>Стоимость двери:</td>				<td></td>
  <td ng-switch-default>@{{selectedStandardSize.price + selectedGlass.price + selectedKorobka.price + selectedPetli.price + selectedDekor.price + selectedDostavka.price + montazh}}</td>
  <td ng-switch-when="Нестандартный">@{{DoorSizeB*DoorSizeH*5000/1000000 + selectedGlass.price + selectedKorobka.price + selectedPetli.price + selectedDekor.price + selectedDostavka.price + montazh}}</td>
</tr>
</tbody>
</table>


<div class="col-sm-6">
	<div class="input">
		<input id="name" name="name" ng-model="name" type="text" required>
		<label for="name">Ваше имя *</label>
	</div>
	<div class="input">
		<input id="phone" name="tel" ng-model="tel" type="text"  required>
		<label for="phone">Номер телефона *</label>
	</div>
	<div class="input">
		<input id="email" name="email" ng-model="email" type="email"  required>
		<label for="email">Адрес электронной почты *</label>
	</div>
</div>

<div class="col-sm-6">
	<div class="input">
		<textarea id="message" name="message" ng-model="message"></textarea>
		<label for="message">Комментарии</label>
	</div>
</div>


<div class="footer col-xs-12 col-sm-6">
    <button type="submit" class="btn btn-primary pull-right" ng-click="submit(calculator.$valid)">Отправить заказ</button>
</div>

{!! Form::close() !!}

then my angular script


angular
  .module('SaunaDoorCalc',[])
  .controller('SaunaDoorCalcController', function($scope, $http) {

    $scope.outerScope = {};
    $scope.data = {};

    $scope.sizeswitch = [           
      { label: 'Стандартный', value: 'standard'},
      { label: 'Нестандартный', value: 'special'}
    ];
    $scope.selectedSizeSwitch = 'Стандартный'; // Default is Стандартный

    $scope.standardsizes = [           
      { label: '585х1880', price:5600 },
      { label: '685x1880', price:3600 },
      { label: '685x1980', price:5600 },
      { label: '685x2080', price:5600 },
      { label: '685x2180', price:6600 },
      { label: '785x1880', price:5600 },
      { label: '785x1980', price:5600 },
      { label: '785x2080', price:5600 },
      { label: '785x2180', price:6600 }
    ];
    $scope.selectedStandardSize = $scope.standardsizes[1];  
    // Default is 685x1880 - second array element. First element index is 0.
    $scope.DoorSizeB = 700;  
    $scope.DoorSizeH = 2000;  

    $scope.glass = [           
      { label: 'Прозрачное (стандарт)', price:0 },
      { label: 'Матовое (Matelux)', price:1000 },
      { label: 'Бронза (Bronze)', price:1500 },
      { label: 'Матовая Бронза (Matelux Bronze)', price:2000 },
      { label: 'Черное', price:4000 }
    ];
    $scope.selectedGlass = $scope.glass[0]; 

    $scope.korobka = [           
      { label: 'Липа (стандарт)', price:1000 },
      { label: 'Лиственница', price:2000 },
      { label: 'Бук', price:3000 },
      { label: 'Дуб', price:6000 }
    ];
    $scope.selectedKorobka = $scope.korobka[0]; 

    $scope.petli = [           
      { label: 'Хром (стандарт)', price:900 },
      { label: 'Бронза', price:1900 },
      { label: 'Золото', price:2000 }
    ];
    $scope.selectedPetli = $scope.petli[0]; 

    $scope.dekor = [           
      { label: 'Нет', price:0 },
      { label: 'Пескоструйный рисунок', price:1000 },
      { label: 'Лазерная гравировка', price:1500 },
      { label: 'Фотопечать', price:2000 },
      { label: 'Пескоструйный рисунок с фьюзингом', price:3000 }
    ];
    $scope.selectedDekor = $scope.dekor[0]; 

    $scope.dostavka = [           
      { label: 'Нет', price:0 },
      { label: 'в пределах МКАД', price:1500 },
      { label: 'за МКАД', price:1500 }
    ];
    $scope.selectedDostavka = $scope.dostavka[0]; 
    $scope.montazh = 0;

    $scope.url = 'http://steklo.dev/izdeliya-iz-stekla/steklyannye-dveri/steklyannye-dveri-dlya-sauny';

    $scope.submit = function(isValid) {
      if (isValid) {
          $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message, "dostavka1": $scope.dostavka, "dostavka2": $scope.selectedDostavka }).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; 
                        })
            }else{
                
                  alert('Form is not valid');
            }

        }


  });

So I expect to get message with $scope.name, $scope.email, $scope.message, $scope.dostavka, $scope.selectedDostavka

BUT

if in my controller I have

dd( Input::all() );

then on the output I get

array:9 [▼
  "_token" => "WxC7nWvurGkS1w9pAw1KC9044pGQ34uirlWWGXo8"
  "calc" => "saunadoor"
  "radio" => "Стандартный"
  "glass" => "object:3"
  "korobka" => "object:8"
  "name" => "Fedor"
  "tel" => "1234567"
  "email" => "tet@mail.com"
  "message" => ""
]

if in my controller I have

dd( Input::json() );  

then on the output I get

ParameterBag {#211#parameters: []
}

if in my controller I have

dd( json_encode( Input::all() ) );

then on the output I get

"{"_token":"WxC7nWvurGkS1w9pAw1KC9044pGQ34uirlWWGXo8","calc":"saunadoor","radio":"\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439","glass":"object:3","korobka":"object:8","name":"Fedor","tel":"1234567","email":"tet@mail.com","message":""}"

First of all I cannot understand how to setup this POST properly to get JSON data in controller? And the second is that I see that what is actually sending is all form elements that have name attribut. And even if they not listed in my $http.post function. Why this happens?

Last updated 3 years ago.
0

Sign in to participate in this thread!

Eventy

Your banner here too?

schel4ok schel4ok Joined 15 Feb 2015

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.