Can't submit form with "attributes" input field - html

I have a form with the following setup:
<div class="row">
<div class="col-3">
#include('acp.sidebar')
</div>
<div class="col-9">
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form class="form-horizontal" role="form" method="POST" action="{{ url('acp/provider/add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" name="id">
<fieldset>
<legend>Grunddaten</legend>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="description">Beschreibung</label>
<textarea class="form-control" id="description" name="description" required></textarea>
</div>
<div class="form-group">
<label for="url">Domain</label>
<input type="text" class="form-control" id="url" name="url" required>
</div>
<div class="form-group">
<label for="ref">Ref-Code</label>
<input type="text" class="form-control" id="ref" name="ref" required>
</div>
<div class="form-group">
<label for="image">Logo</label>
<input type="file" name="image" id="image" class="form-control" accept="image/*">
</div>
<div class="form-group">
<label for="checkboxes">Payment-Anbieter</label>
<div>
#foreach($paymentProviders as $key => $provider)
<label class="checkbox-inline" for="checkboxes-{{$key}}">
<input name="paymentProviders[]" id="checkboxes-{{$key}}" value="{{$provider->id}}" type="checkbox">
<img src="{{url('/images/paymentProvider/small/'.$provider->image)}}">
{{$provider->name}}
</label>
#endforeach
</div>
</div>
</fieldset>
<fieldset>
<legend>Crawler</legend>
<div class="form-group">
<label for="attributes">Suchattribute</label>
<input type="text" class="form-control" id="attributes" name="attributes" required>
</div>
<div class="form-group">
<label for="crawlerType">Typ</label>
<select id="crawlerType" name="crawlerType" class="form-control">
#foreach($crawlerTypes as $crawlerType)
<option value="{{$crawlerType}}">{{$crawlerType}}</option>
#endforeach
</select>
</div>
</fieldset>
<div class="form-group">
<div class="pull-right">
<button type="submit" class="btn btn-primary">
Absenden
</button>
</div>
</div>
</form>
</div>
</div>
As you can see there is a input named "attributes" down below. When I add this, I can't submit my form. It's like clicking on a button with no "submit" attribute.
After removing or renaming this input, it works. It's not a big thing to rename my input - I'm just interested if this is a bug, or a for me unkown feature.
I'm using Bootstrap v4.0.0-alpha.6 and Laravel 5.4.22.

Related

Template parse errors: Unexpected closing tag "form". It may happen when the tag has already been closed by another tag

<div class="container" novalidate>
<form [formGroup]="profileData" (ngSubmit)="register()">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" formControlName="fname" required>
<div>
<div *ngIf="profileData.controls['fname'].hasError('required')" class="alert alert-danger">
**** can't left blank ****
</div>
<div *ngIf="profileData.controls['fname'].hasError('minlength')" class="alert alert-danger">
**** minlength will be 3 ****
</div>
<div *ngIf="profileData.controls['fname'].hasError('maxlength')" class="alert alert-danger">
**** maxlength should be 9 ****
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" formControlName="lname">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" formControlName="uemail">
</div>
<div class="form-group" formGroupName="addr">
<div class="form-group">
<label>city</label>
<input type="text" class="form-control" formControlName="ucity">
</div>
<div class="form-group">
<label>Address Lane</label>
<input type="text" class="form-control" formControlName="uaddress">
</div>
</div>
<div class="form-group">
<input type="radio" name="gender" value="male" formControlName="gender"><b>male</b>
<input type="radio" name="gender" value="female" formControlName="gender"><b>female</b>
</div>
<div class="form-group">
<label>country</label>
<select class="form-control" formControlName="ucountry">
<option value="india">india</option>
<option value="usa">usa</option>
<option value="canada">canada</option>
<option value="dubai">dubai</option>
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success">
</div>
</form>
</div>
it showing like this...
Uncaught Error: Template parse errors:
Unexpected closing tag "form". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
[ERROR ->]
where should i mistaken in this..?
Seems you are not closing the div tag here
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" formControlName="fname" required>
<div><!-- this is not closed, replace with </div>-->
Instead of
Line 7
<form [formGroup]="profileData" (ngSubmit)="register()">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" formControlName="fname" required>
<div> <!-- Here -->
Close the last div tag
try this
<div class="container" novalidate>
<form [formGroup]="profileData" (ngSubmit)="register()">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" formControlName="fname" required>
</div>
<div *ngIf="profileData.controls['fname'].hasError('required')" class="alert alert-danger">
**** can't left blank ****
</div>
<div *ngIf="profileData.controls['fname'].hasError('minlength')" class="alert alert-danger">
**** minlength will be 3 ****
</div>
<div *ngIf="profileData.controls['fname'].hasError('maxlength')" class="alert alert-danger">
**** maxlength should be 9 ****
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" formControlName="lname">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" formControlName="uemail">
</div>
<div class="form-group" formGroupName="addr">
<div class="form-group">
<label>city</label>
<input type="text" class="form-control" formControlName="ucity">
</div>
<div class="form-group">
<label>Address Lane</label>
<input type="text" class="form-control" formControlName="uaddress">
</div>
</div>
<div class="form-group">
<input type="radio" name="gender" value="male" formControlName="gender"><b>male</b>
<input type="radio" name="gender" value="female" formControlName="gender"><b>female</b>
</div>
<div class="form-group">
<label>country</label>
<select class="form-control" formControlName="ucountry">
<option value="india">india</option>
<option value="usa">usa</option>
<option value="canada">canada</option>
<option value="dubai">dubai</option>
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success">
</div>
</form>
</div>

how can I edit the size of back ground box size to make it adjust to inside boxes with node.js

image of web page
hello I'm making school project for assignment.
but I don't know how to change the size of background grey box to make adjust with inside E-mail, password... etc box.
here's my code which I'm struggling.
{{!-- 회원 가입 페이지 view --}}
<br/><br/>
<form action="" style-"width: 700px; margin: auto"
<div class="jumbotron">
<div class="col-md-5 col-md-offset-5">
<h1>Sign up</h1>
{{# if hasErrors}}
<div class="alert alert-danger">
{{# each messages}}
<p>{{ this }}</p>
{{/each}}
</div>
{{/if}}
<form action="/user/signup" method="post" style="width: 500px; margin:auto">
<br/>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="text" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-control">
</div>
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<button type="submit" class="btn btn-primary pull-right">Sign up</button>
</form>
</div>
</div>
I think it is because you have put everything inside
<div class="jumbotron">
Try moving <div class="jumbotron"> inside <div class="col-md-5 col-md-offset-5">
You might have to change the col-md-5 to col-md-6

The form text starts with padding spaces

I have such a bootstrap form,
The text form area starts with padding:
I have to manually remove the spaces:
the codes:
<form class="form-horizontal" action="/article/create/{{ b.id }}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="title" placeholder="
Write Title Later" >
</div>
</div>
<div class="form-group">
<label for="content" class="col-sm-1 control-label" >Content</label>
<div class="col-sm-11">
<textarea class="form-control" id="content" rows="10" value="
Write Content Firstly">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button type="submit" class="btn btn-primary">Publish</button>
</div>
</div>
</form>
What's the problem with my code?
You need to remove all space between 'textarea' and '/textarea'. Here is the updated code ^^
<form class="form-horizontal" action="/article/create/{{ b.id }}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="title" placeholder="Write Title Later" />
</div>
</div>
<div class="form-group">
<label for="content" class="col-sm-1 control-label" >Content</label>
<div class="col-sm-11">
<textarea class="form-control" id="content" rows="10" value="
Write Content Firstly"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button type="submit" class="btn btn-primary">Publish</button>
</div>
</div>
</form>

How to quit default values in html inputs

I have an html form that :
looks like
And I want that those values doesn't appear like these, just blank.
How can I do it?
The code in fact is here: github
Blank input as you want... please run and see
<div class="container">
<h1>Add New Book</h1>
<div class="row">
<div class="col-md-6">
<form (ngSubmit)="saveBook()" #bookForm="ngForm">
<div class="form-group">
<label for="name">ISBN</label>
<input type="text" class="form-control" [(ngModel)]="book.isbn" name="isbn" required>
</div>
<div class="form-group">
<label for="name">Title</label>
<input type="text" class="form-control" [(ngModel)]="book.title" name="title" required>
</div>
<div class="form-group">
<label for="name">Author</label>
<input type="text" class="form-control" [(ngModel)]="idA" name="author" required>
</div>
<div class="form-group">
<input type="text" class="form-control" [(ngModel)]="book.author" name="author" required>
</div>
<div class="form-group">
<label for="name">Publisher</label>
<input type="text" class="form-control" [(ngModel)]="book.publisher" name="publisher" required>
</div>
<div class="form-group">
<label for="name">Price</label>
<input type="number" class="form-control" [(ngModel)]="book.price" name="price" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" [disabled]="!bookForm.form.valid">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
</div>

form submitting not refresing value if get out the button

I have a form, that I need my save button to be outside of form elements, but if I take it out elsewhere, it doesn`t like refresh the form.
<form ng-submit="save()" action="" name="addInv" novalidate>
<div class="col-md-10">
<label>Name:</label>
<input type="text" ng-model="newlocation.name" class="form-control">
</div>
<div class="col-md-10">
<label>Storage administrator:</label>
<select ng-model="newlocation.administrator" class="form-control" ng-options="user.resource_uri as user.first_name for user in users"></select>
</div>
<div class="col-md-6">
<label>Street:</label>
<input type="text" ng-model="newlocation.street" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>City:</label>
<input type="text" ng-model="newlocation.city" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>Country:</label>
<input type="text" ng-model="newlocation.country" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>Postal code:</label>
<input type="text" ng-model="newlocation.postalCode" class="input-medium form-control">
</div>
<div class="col-md-6">
<button class="btn tbn-lg btn-primary">Save</button>
</div>
</form>
If I put button outside the <form> form doesn't refresh values.
You could use JavaScript to do this
<input type="submit" onclick="document.forms[0].submit();" />