header 的按钮表单由 javascript html laravel 置顶

Question

那个叶片 (Laravel) 上有两个按钮。按钮 (.btn-main) 在 main 中工作，但按钮 (.btn-header ) 在 header 中不起作用。

我的意思是当我点击 header 中的按钮 (.btn-header) 时，它确实什么都没有，也没有保存在数据库中。

我知道这是关于表格的。

inc/header.blade.php

<div class="sticky fixed">
<button type="submit" class="btn-header">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" class="btn-main">Save</button>
</form>
</div>
@endsection

app.blade.php

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

我希望按钮在两个部分（header和main) 并将信息存储在数据库中。

Answer 1

您的 header 按钮没有任何作用，因为它不是 of/inside 表单的一部分。但是，您可以使用 form attribute 让 header 按钮起作用。将 id 属性添加到 <form> 元素，并将按钮中的 form 属性指向相同的 id.

你的表格：

@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" class="btn-main">Save</button>
</form>
</div>
@endsection

（已将 id="myForm" 添加到 <form> 元素。）

您的 header 按钮：

<div class="sticky fixed">
<button type="submit" class="btn-header" form="myForm">Save</button>
</div>

（向按钮添加了 form="myForm"。）

编辑：确保您的页面上没有其他 id="myForm"，如果有，请选择不同的唯一名称

header 的按钮表单由 javascript html laravel 置顶

button form for header sticky by javascript html laravel

html

javascript

laravel