Unable to get submit action to occur in TYPO3 Fluid contact form - forms

We are trying to manage to get a simple contact form running. But regardless of what we try, we get nothing at all.
The form itself is on the front-end and configured like this :
<f:section name="Main">
<div class="ext-frame container">
<h2>{record.header}</h2>
<f:form action="submit" name="order" object="{order}" class="form-horizontal">
<f:for each="{settings.offer}" as="obj" key="id">
<div class="row offer">
<f:if condition="{obj.offer.img}">
<f:then>
<div class="col-sm-4 col-md-4 offer-img-container">
<img src="../{obj.offer.img}" class="offer-image" alt="{obj.offer.img.alternative}" />
</div>
</f:then>
</f:if>
<div class="col-sm-8 col-md-8 {f:if(condition: '{obj.offer.img} == \'\'', then: 'col-sm-offset-4 col-md-offset-4')}">
<label class="offer-label">
<f:form.radio property="offer" value="{id}" />
<div class="pull-right">
<p class="lead">
{obj.offer.title}<br/>
<small>{obj.offer.subtitle}</small>
</p>
<p class="small">{obj.offer.description}</p>
</div>
</label>
</div>
</div>
<hr />
</f:for>
<div class="form-group row">
<label for="salut" class="col-sm-3 control-label">Anrede*</label>
<div class="col-sm-5">
<f:form.select property="salut" options="{herr: 'Herr', frau: 'Frau'}" class="form-control" />
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 control-label">Vorname*</label>
<div class="col-sm-5">
<f:form.textfield property="name" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<label for="surname" class="col-sm-3 control-label">Nachname*</label>
<div class="col-sm-5">
<f:form.textfield property="surname" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-3 cusnr">
<label for="cusNr" class="control-label">Kundennummer</label>
<span id="helpBlock" class="help-block">(wenn bekannt)</span>
</div>
<div class="col-sm-5">
<f:form.textfield property="cusNr" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<label for="addr" class="col-sm-3 control-label">Straße/Hausnr.*</label>
<div class="col-sm-5">
<f:form.textfield property="addr" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<label for="zip" class="col-sm-3 control-label">PLZ*</label>
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon">D-</span>
<f:form.textfield property="zip" value="" class="form-control" type="number" maxlength="5" />
</div>
</div>
</div>
<div class="form-group row">
<label for="city" class="col-sm-3 control-label">Ort*</label>
<div class="col-sm-5">
<f:form.textfield property="city" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<label for="mail" class="col-sm-3 control-label">E-Mail*</label>
<div class="col-sm-5">
<f:form.textfield property="mail" value="" class="form-control" type="email" />
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-3 control-label">Telefon</label>
<div class="col-sm-5">
<f:form.textfield property="phone" value="" class="form-control" type="tel" />
</div>
</div>
<div class="form-group row"><div class="col-sm-offset-3 col-sm-5">
<f:form.select property="know" options="{
0: 'a?*',
1: 'a',
2: 'b',
3: 'c',
4: 'd',
5: 'e',
6: 'f',
7: 'g'
}" class="form-control" />
</div></div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<f:form.checkbox name="term" value="1" />
Ich habe die AGB gelesen und erkläre mich mit
ihnen einverstanden. Ich wurde über mein <a href="widerruf.php" target="_blank">
Widerrufsrecht</a> informiert.
</label>
</div>
</div>
</div>
<div class="form-group row">
<f:form.submit name="submit" value="Send" class="col-xs-12 col-sm-5 col-sm-offset-3 btn" />
</div>
</f:form>
</div>
</f:section>
In our ContentController.php there is also a submitAction given but it seems that this Action is never called :
public function submitAction() {
echo 'Testoutput';exit;
}

Where does the form lead you after submitting? Check out the final HTML action="" if everything is correct.
Try to set the form "method" to POST. I've just had some problems with forms using GET because the target PID got lost for unknown reasons so I had to add a <input type="hidden" name="id" value="{targetPid}" /> to get it working.

Related

Bootstrap 3 form Alignment

I am using Bootstrap 3, what I want cover whole form on full page like attached image, in the image I am using kendo UI popup window. pop up window width is 1000px
Here is my HTML code,
<section class="container-fluid padding-rl">
<div class="row">
<div class="col-sm-3">
<div class="profile-box">
<img class="profile-picture" src="" alt="" />
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.FirstName" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1">Last Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.LastName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Email:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Email" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Mobile:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Mobile" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Phone:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.OfficePhone" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Account:</label>
<div class="col-sm-3" style="">
<input type="text" id="txtContactAccount" class="form-control" data-bind="value: selectedRecord.ContactAccount" />
</div>
</div>
</div>
</div>
</div>
</div>
Attached image
Thank you in advance
Unfortunately I don't see your code in your question. From the sample picture I'm guessing what you are looking to do is create a modal?
Take a look at bootstrap's documentation here:
Bootstrap JavaScript
Scroll down a bit to the part about modals, they have nice samples there too.

Form inputs in one line

I have grouped 3 inputs in one line (bootply)
<div class="container">
<div class="row">
<div class="form-group has-warning">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" placeholder="name" name="order">
</div>
<label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
</div>
<label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control" placeholder="AA" name="packetNumber">
</div>
</div>
</div>
</div>
and I want only the input with quantity has the color of the class has-warning. Is there a way to do that by keeping 3 inputs in one line?
Just remove has-warning class from the div which has class form-group and put a separate div above the quantity lable like below:
<div class="container">
<div class="row">
<div class="form-group">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" placeholder="name" name="order">
</div>
<div class="has-warning">
<label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
</div>
</div>
<label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control" placeholder="AA" name="packetNumber">
</div>
</div>
</div>
</div>
Edited Code In Bootply
Check It.

Horizontal form - Twitter Bootstrap

Today I copied literally a test piece of code from the twitter-bootstrap site into my code. I tried to get a horizontal form like in the example. but for some reason, I don't get a horzontal layout. My site http://073design.nl/kasopmaak/?
Code i used for horizontal form:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Your code works fine only when link with bootstrap version 2.3 DEMO1
Check this works in bootstrap 3
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>

Form submit, Input:all() not showing all inputs

RESTfully, When I submit my form and return Input:all() in the Store method I'm getting only couple inputs not all of them!!
Can anyone help me here to find out why?
and advise me if I've to use Ajax all the time to submit forms, With example please!
Store method in the Controller:
/**
* Store a newly created HOTEL in DB.
*
* #return Response
*/
public function store(/*AddNewHotelRequest $addNewHotelRequest*/)
{
if(Request::ajax()) {
if ( Session::token() !== Input::get( '_token' ) ) {
return Response::json( array(
'msg' => 'Unauthorized attempt to create setting'
) );
}
$input = Request::all();
$response = [
'status' => 'success',
'input' => $input,
'msg' => 'Hotel created successfully',
];
return Response::json( $response );
}
// return Input::all(); //with Request::all() same output
}
Form from view "create new hotel"
{!! Form::open([ 'data-remote' ,'method'=>'POST', 'action' => 'HotelsController#store', 'class' => 'panel form-horizontal','id'=>'hotelForm']) !!}
<input id="myToken" type="hidden" name="_token" value="{{ csrf_token() }}" />
<script> var _CSRT_token = "{{ csrf_token() }} " ;</script>
<div class="panel-heading">
<span class="panel-title">Adding New Hotel</span>
</div>
<div class="panel-body">
<!-- / .form-group of Errors -->
<div class="form-group">
<div class="col-sm-12">
#include('errors.list')
</div>
</div>
<!-- Hotel Name -->
<div class="form-group">
<label for="hotel_name" class="col-sm-2 control-label">Hotel name *</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="hotel_name" name="hotel_name" placeholder="Hotel name">
</div>
<p class="label label-warning label-tag">Name should be in English</p>
</div>
<!-- / .form-group of hotel_details -->
<div class="form-group">
<label for="hotel_details" class="col-sm-2 control-label">Hotel Details</label>
<div class="col-sm-8">
<textarea class="form-control" id="hotel_details" placeholder="Short description, General information or Some Details about this Hotel" rows="3"></textarea>
</div>
<p class="label label-warning label-tag">Details should be in English</p>
</div>
<!-- Hotel website -->
<div class="form-group">
<label for="hotel_website" class="col-sm-2 control-label">Website *</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="hotel_website" name="hotel_website" placeholder="http://">
</div>
</div>
<!-- / .form-group of rank -->
<div class="form-group">
<label for="rank" class="col-sm-2 control-label">Rank</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="rank" placeholder="Boutique or 4">
</div>
</div>
<div class="panel colourable">
<div class="panel-body">Prices</div>
<!-- / .form-group of single_price -->
<div class="form-group">
<label for="single_price" class="col-sm-2 control-label">Single price</label>
<div class="input-group col-sm-1">
<span class="input-group-addon">€</span>
<input type="text" class="form-control room-price-group" id="single_price">
<span class="input-group-addon">.00</span>
</div>
</div>
<!-- / .form-group of double_price -->
<div class="form-group">
<label for="double_price" class="col-sm-2 control-label">Double price</label>
<div class="input-group col-sm-1">
<span class="input-group-addon">€</span>
<input type="text" class="form-control room-price-group" id="double_price">
<span class="input-group-addon">.00</span>
</div>
</div>
<!-- / .form-group of extra_bed_price -->
<div class="form-group">
<label for="extra_bed_price" class="col-sm-2 control-label">Extra Bed price</label>
<div class="input-group col-sm-1">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" id="extra_bed_price">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="facilities" class="col-sm-2 control-label">Facilities *</label>
<div class="col-sm-10">
<select id="facilities" class="col-sm-8 form-controljs-example-basic-multiple" name="facilities" multiple="multiple">
<optgroup label="Free">
#foreach($facilities as $facility)
#if(!$facility->is_surcharge)
<option class="" value="{{ $facility->id }}">{{ $facility->name }}</option>
#endif
#endforeach
</optgroup>
<optgroup label="Surcharge">
#foreach($facilities as $facility)
#if($facility->is_surcharge)
<option value="{{ $facility->id }}">{{ $facility->name }}</option>
#endif
#endforeach
</optgroup>
</select>
</div>
</div>
<div class="panel colourable">
<div class="panel-body">Address</div>
<!-- / .form-group of Country -->
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country *</label>
<div class="col-sm-2">
<select id="country" class="form-control" name="country" >
<option></option>
#foreach($countries as $country)
<option value="{{ $country->id }}" phone_code="{{ $country->phone_code }}" >{{ $country->name }}</option>
#endforeach
</select>
<p class="help-block helperQuote">Begin by choosing your country.</p>
</div>
</div>
<!-- / .form-group of Region -->
<div class="form-group">
<label for="region" class="col-sm-2 control-label">Region *</label>
<div class="col-sm-2">
<select id="region" class="form-control" name="region">
</select>
</div>
</div>
<!-- / .form-group of city -->
<div class="form-group">
<label for="city" class="col-sm-2 control-label">City *</label>
<div class="col-sm-2">
<select id="city" class="form-control" name="city">
</select>
</div>
</div>
<!-- / .form-group of rank -->
<div class="form-group">
<label for="zip" class="col-sm-2 control-label">Zip Code</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="zip" placeholder="34600">
</div>
</div>
<!-- / .form-group of city -->
<div class="form-group">
<label for="address" class="col-sm-2 control-label">Hotel Address *</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address" placeholder="Street name, number of building floor ...etc">
</div>
{{--<p class="label label-warning label-tag">Address should be in English</p>--}}
</div>
<!-- / .form-group of map -->
{{--GOOGLE MAPS--}}
<div class="form-group">
<label for="map" class="col-sm-2 control-label">Location *</label>
{{--Initialize Map--}}
<div class="col-sm-9">
<div id="map-canvas" class="" style="width: 100%; height: 350px !important;">
</div>
<p id="markerPosition" class="help-block"><i>Drag the pin to the position of the hotel </i></p>
<p id="lat" class="help-block">Latitude: 41.0694</p>
<p id="lng" class="help-block">Longitude: 29.0043</p>
<input id="latitude" type="hidden" value="37.7577">
<input id="longitude" type="hidden" value="-122.4376">
</div>
</div>
</div> <!-- End of Address Panel -->
<!-- Hotel tel -->
<div class="form-group">
<label for="country_code" class="col-sm-2 control-label">Country Code *</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="country_code" name="country_code" placeholder="+90">
</div>
<label for="country_code" class="col-sm-1 control-label">Phone *</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="phone" name="phone" placeholder="(___) ___-____">
</div>
<label for="extension" class="col-sm-1 control-label">Extension</label>
<div class="col-sm-1">
<input type="text" class="form-control" id="extension" name="extension" placeholder="3">
</div>
</div>
<ht/>
<!-- / .form-group of status -->
<div class="form-group">
<label for="status" class="col-sm-2 control-label">Status *</label>
<div class="col-sm-2">
<select id="status" class="form-control" name="status" >
<option value="0">Suspended</option>
<option value="1" selected>Draft</option>
<option value="2">Published</option>
</select>
<p class="help-block helperQuote"><strong>Suspended:</strong>Trash,<strong>Draft:</strong>Default,<strong>Published:Online</strong></p>
</div>
<p class="label label-warning label-tag">Only Published Hotels will be online!</p>
</div>
{{--#if (Auth::user()->isAdmin())--}}
<!-- / .form-group of publisher -->
<div class="form-group">
<label for="publisher" class="col-sm-2 control-label">Publisher *</label>
<div class="col-sm-2">
<select id="publisher" class="form-control" name="publisher" >
#foreach($publishers as $publisher)
<option value="{{ $publisher->id }}">{{ $publisher->name }} ({{$publisher->type}}) </option>
#endforeach
</select>
</div>
</div>
{{--#endif--}}
<div class="form-group" style="margin-bottom: 0;">
<div class="col-sm-offset-2 col-sm-1">
<button type="submit" class="btn btn-lg btn-primary btn-flat"><span class="btn-label icon fa fa-plus-circle"></span> Add Hotel</button>
</div>
<div id="loader" class="col-sm-1" style="display: none;"><img src="/assets/images/plugins/bootstrap-editable/loading.gif" alt="loading regions" /></div>
</div> <!-- / .form-group -->
</div>
{!! Form::Close() !!}
The output is like this:
{"_token":"PWKknjx5S9u8m98ApGDXYKqaTyF7aFZDaye9uYPm","hotel_name":"City Loft","hotel_website":"http:\/\/www.cityloft.com.tr\/","facilities":"23","country":"6","region":"3344950","city":"783593","country_code":"+355","phone":"(123) 123-1231","extension":"3123","status":"1","publisher":"1"}
you forgot name attribute for Hotel Detail and Price and might be more
<textarea class="form-control" **name="hotel_detail"** id="hotel_details" placeholder="Short description, General information or Some Details about this Hotel" rows="3"></textarea>

Creating long forms in Bootstrap to be all one form, instead of multiple forms

I'd like to create a long form that is just all one form instead of a bunch of separate forms. Is this doable? I've reviewed all the Bootstrap Documentation and this seems to be the only way to do it. Does anyone know a way around this? Below is what I have, every field is a separate form, and I need it to be one.
<div class="row-container">
<div class="row">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="claimnumber">Claim Number</label>
<input type="text" class="form-control" id="claimnumber" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="insuredid">Insured ID</label>
<input type="text" class="form-control" id="insuredid" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="claimnumber">Patient ID</label>
<input type="text" class="form-control" id="patientid" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="Text1" placeholder="">
</div>
</form>
</div>
</div>
</div>
<div class="datecontainer">
<div class="date1container">
<div class="dateheading">Service Date</div>
<div class="datebody">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar" id="date" placeholder="00/00/0000">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">End</label>
<input type="text" class="form-control calendar2" id="date2" placeholder="00/00/0000">
</div>
</form>
</div>
</div>
</div>
<div class="date2container">
<div class="dateheading">Import Date</div>
<div class="datebody">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar3" id="date3" placeholder="00/00/0000">
</div>
</form>
</div>
It works with just one form... check this
http://jsfiddle.net/7LChZ/1/show/
<div class="container">
<form class="form-inline">
<div class="row-container">
<div class="row">
<div class="field-wrapper">
<div class="form-group">
<label for="claimnumber">Claim Number</label>
<input type="text" class="form-control" id="claimnumber" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="insuredid">Insured ID</label>
<input type="text" class="form-control" id="insuredid" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="claimnumber">Patient ID</label>
<input type="text" class="form-control" id="patientid" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="Text1" placeholder="" />
</div>
</div>
</div>
</div>
<div class="datecontainer">
<div class="date1container">
<div class="dateheading">Service Date</div>
<div class="datebody">
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar" id="date" placeholder="00/00/0000" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">End</label>
<input type="text" class="form-control calendar2" id="date2" placeholder="00/00/0000" />
</div>
</div>
</div>
</div>
<div class="date2container">
<div class="dateheading">Import Date</div>
<div class="datebody">
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar3" id="date3" placeholder="00/00/0000" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
What I change is, I remove all form tags and wrap them all with just one.
You should only use one <form> -tag and not multiple ones if you only need one form. You should place it after <div class="row">. And don't forget to close it correctly!