I have a website, which was abandoned by developer, but Monday is time when I must show to clients.
Well, we have the following, structure, example, client is on profile page, so we split this page into 2 blades.
Page header is one blade (this displays a header of this page)
Page content is second blade (this displays a content of this page)
I’m moving save button from bottom to top, BUT, problem is, that top is in header page, but <form method post> is on page content.
Is it possible, to somehow without heavy developing in php, fix this issue?
content page, have all input fields, with checkers and error messages also, it has <form post>
header page, is only displaying a header of this page, and I want to add a Save button, here.
This is partly content page code
<form method="POST" action="{{route('my.settings.profile.save',['type'=>'profile'])}}">
@csrf
@include('elements.dropzone-dummy-element')
<div class="mb-4">
<div class="">
<div class="card profile-cover-bg">
<img class="card-img-top centered-and-cropped" src="{{Auth::user()->cover}}">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<div class="actions-holder d-none">
<div class="d-flex">
<span class="h-pill h-pill-accent pointer-cursor mr-1 upload-button" data-toggle="tooltip" data-placement="top" title="{{__('Upload cover image')}}">
@include('elements.icon',['icon'=>'image','variant'=>'medium'])
</span>
<span class="h-pill h-pill-accent pointer-cursor" onclick="ProfileSettings.removeUserAsset('cover')" data-toggle="tooltip" data-placement="top" title="{{__('Remove cover image')}}">
@include('elements.icon',['icon'=>'close','variant'=>'medium'])
</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="card avatar-holder">
<img class="card-img-top" src="{{Auth::user()->avatar}}">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<div class="actions-holder d-none">
<div class="d-flex">
<span class="h-pill h-pill-accent pointer-cursor mr-1 upload-button" data-toggle="tooltip" data-placement="top" title="{{__('Upload avatar')}}">
@include('elements.icon',['icon'=>'image','variant'=>'medium'])
</span>
<span class="h-pill h-pill-accent pointer-cursor" onclick="ProfileSettings.removeUserAsset('avatar')" data-toggle="tooltip" data-placement="top" title="{{__('Remove avatar')}}">
@include('elements.icon',['icon'=>'close','variant'=>'medium'])
</span>
</div>
</div>
</div>
</div>
</div>
</div>
@if(session('success'))
<div class="alert alert-success text-white font-weight-bold mt-2" role="alert">
{{session('success')}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="form-group">
<label for="username" class="col-sm-2">
<span class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{__('Username')}}</span>
</label>
<input class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }} mt-n3"
id="username" name="username"
aria-describedby="emailHelp" value="{{Auth::user()->username}}">
@if($errors->has('username'))
<span class="invalid-feedback" role="alert">
<strong>{{$errors->first('username')}}</strong>
</span>
@endif
</div>
<div class="form-group">
<label for="name" class="col-sm-2">
<span class="h6 small bg-white text-muted pt-1 pl-2 pr-2">{{__('Full name')}}</span>
</label>
<input class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }} mt-n3" id="name" name="name" aria-describedby="emailHelp" value="{{Auth::user()->name}}">
@if($errors->has('name'))
<span class="invalid-feedback" role="alert">
<strong>{{$errors->first('name')}}</strong>
</span>
@endif
</div>
as you can see, this is simple form, with inputs.
and here is a header page
<div class="">
<div class="row">
<div class="col-12 col-md-4 col-lg-3 mb-3 pr-0 settings-menu">
<div class="settings-menu-wrapper">
<div class="d-none d-md-block">
@include('elements.settings.settings-header',['type'=>'generic'])
</div>
<div class="d-block d-md-none mt-3">
@include('elements.settings.settings-header',['type'=>'settingTab'])
</div>
<hr class="mb-0">
<div class="d-none d-md-block">
@include('elements.settings.settings-menu',['availableSettings' => $availableSettings])
</div>
<div class="setting-menu-mobile d-block d-md-none mt-3">
@include('elements.settings.settings-menu-mobile',['availableSettings' => $availableSettings])
</div>
</div>
</div>
<div class="col-md-8 col-lg-9 mb-5 mb-lg-0 min-vh-100 border-left border-right settings-content mt-1 mt-md-0 pl-md-0 pr-md-0">
<div class="ml-3 d-none d-md-flex justify-content-between menufix">
<div>
<h5 class="text-bold mt-0 mt-md-3 mb-0 {{(Cookie::get('app_theme') == null ? (getSetting('site.default_user_theme') == 'dark' ? '' : 'text-dark-r') : (Cookie::get('app_theme') == 'dark' ? '' : 'text-dark-r'))}}">{{ ucfirst(__($activeSettingsTab))}}</h5>
<h6 class="mt-2 text-muted">{{__($currentSettingTab['heading'])}}</h6>
</div>
<button class="btn btn-primary btn-block rounded fixknopki" type="submit">{{__('Save')}}</button>
</div>
as you can see, I already added a Save button, to make in on top. But, it wont work, because form is called in different blade
I tried to adjust CSS , and add margin-top and margin-left for my save button, on content page, but, seems like this is incorrect way of fixing my issue 😉
2
Answers
You can add
to your button.
Don’t forget to add an ID to the form.
If I’m understanding how these two templates are rendered on the final output correctly: the button does not appear between the form tags. Because of this, the button won’t work because it isn’t part of any form.
To fix this, add an
idto the form and use theforattribute on the button.The value of the
forattribute in the button tag would match theidof the form tag.This tells the browser which form a button is for. This should make the button submit that form no matter where it is rendered on the final page.