How to Edit any posted text in react - html

I can see the title to be edited but the question is how can I view a detailed bar for editing? in the tutorials, I am following works correctly but with me, it doesn't.
'{{#each errors }}
<div class="alert alert-danger">{{text}}</div>
{{else}}
{{/each}}
<div class="card card-body">
<h3>Edit Candidates</h3>
<form action="/ideas" method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" value="{{idea.title}}" required>
</div>
<div class="form-group">
<label for="details">Details</label>
<textarea class="form-control" name="details" required {{idea.details}}></textarea>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</form>
</div>'

Related

form not submitting on localhost or remote

After submitting the form nothing happens, page doesn't reloads. Out of ideas.
<form action="/departmentinsert.php" method="POST" class="contact-form">
<div class="col-md-12">
<div class="row">
<div class="form-group">
<input class="form-control" id="name" name="name" placeholder="Отделение" type="text">
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<button type="submit" name="submit" id="submit">
Добавить <i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</form>
to submit the form you will need to use <input type="submit"> instead of the <button> tag
once you update the code I am sure it will work, if you are using PHP it should be like this
<?php
if(isset($_POST['submit']){
// your code
}
?>
if this doesn't work please post your PHP as well so i can check where's the problem
hope this help.
I changed formatting to and it works now. My code now is
<form action="" method="POST" >
<div class="form-group">
<input class="form-group" id="name" name="name" placeholder="Отделение" type="text">
</div>
<div class="form-group">
<input class="form-group" id="title" name="title" placeholder="Заголовок" type="text" size="255">
</div>
<div class="form-group">
<input class="form-group" id="breadcrumb" name="breadcrumb" placeholder="Хлебные крошки" type="text" size="255">
</div>
<div class="form-group">
<input class="form-group" id="pagetitle" name="pagetitle" placeholder="Титул страницы" type="text" size="255">
</div>
<div class="form-group">
Опубликовать?
<input name="active" type="checkbox" value="1" checked>
</div>
<div class="form-group">
<button type="submit" name="submit" id="submit">
Добавить <i class="fa fa-paper-plane"></i>
</button>
</div>
</form>

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 perform validations in angular2

I am trying to perform validations to my fileds in such a way that when i click on submit button it must show error to fields which are empty.Can anyone please help me .............
<div *ngFor="let detail of details" class="nopadding col-sm-12">
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate">
<div class="form-process"></div>
<div class="col_half">
<label for="template-contactform-name">First Name <small>*</small></label>
<div class="input-group divcenter">
<span class="input-group-addon noradius"><i class="icon-user iconcolorcss"></i></span>
<input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
</div>
</div>
<div class="clear"></div>
<div class="col_full">
<button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button>
</div>
<div class="clear"></div>
</div>
Try this for simple validations....
<input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
<span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span>
<button (click)="clicked = true"></button>
I don't its correct or not but this works fine with me. Refer this code:
<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="dis_title">Topic<span>*</span></label>
<input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title">
<label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg-->
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button>

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();" />