button form for header sticky by javascript html laravel-CodePudding

There are two buttons on that blades (Laravel). The button (.btn-main) works in the main, but the button (.btn-header) in the header does not work.

I mean when i click the button (.btn-header) in the header, it does nothing and does not save in the database.

I know it is about the form.

inc/header.blade.php

<div >
<button type="submit" >Save</button>
</div>

index.blade.php

@extends('layouts.app')
@section('content')
<main>
<form action="{{ route('post.update', $post->id) }}" method="POST">
    @method('PUT')
    @csrf
    <input type="text" name="title" value="Title...">
    <input type="text" name="content" value="This is a test.">
    <button type="submit" >Save</button>
</form>
</div>
@endsection

app.blade.php

<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
@include('inc.header')
</header>
@yield('content')
</body>
</html>

I want the buttons to work on both sections (header and main) and store the information in the database.

CodePudding user response：

Your header button doesn't do anything because it is not part of/inside the form. You can however use a form attribute for your header button to work. Add an id attribute to your <form> element and point the form attribute in your button to that same id.

Your form:

@extends('layouts.app')
@section('content')
<main>
<form action="{{ route('post.update', $post->id) }}" method="POST" id="myForm">
    @method('PUT')
    @csrf
    <input type="text" name="title" value="Title...">
    <input type="text" name="content" value="This is a test.">
    <button type="submit" >Save</button>
</form>
</div>
@endsection

(Added id="myForm" to the <form> element.)

Your header button:

<div >
<button type="submit"  form="myForm">Save</button>
</div>

(Added form="myForm" to the button.)

Edit: make sure there is no other id="myForm" on your page, choose a different unique name if so