I have two registration forms ona a page, but I only want to render one by clicking on proper button: 'Contract Form' or 'Company Form'. Should I do it with v-if? In the code below I just copied few lines of the form.
<template>
<div>
<button #click="contract">UMOWA</button>
<button #click="company">FIRMA</button>
<div v-if="contract">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<input id="lastname" v-model="lastName" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
<div v-if="company">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<button type="submit">Zarejestruj się</button>
<input id="lastname" v-model="lastName" type="text" required />
<label for="email">ADRES E-MAIL</label>
<input id="email" v-model="email" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
</div>
</template>
Yes but you will need to add true in the buttons onclick:
<button #click="contract = true">UMOWA</button>
<button #click="company = true">FIRMA</button>
Related
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
I have a form for adding new users and I am having problems with the form reset because it does not remove the valid class of materialize.
The form:
<div class="col s12 m12 l4 xl4">
<form (ngSubmit)="onSubmit(); newLabMember.reset()" #newLabMember="ngForm" ngNativeValidate>
<!-- New lab member form -->
<div class="section">
<h5>Add lab member</h5>
<div class="input-field">
<input type="text" name="firstName" [(ngModel)]="user.firstname" class="validate" id="firstName" validate required>
<label for="firstName">First name</label>
</div>
<div class="input-field">
<input type="text" name="lastName" [(ngModel)]="user.lastname" class="validate" id="lastName" validate required>
<label for="firstName">Last name</label>
</div>
<div class="input-field">
<input type="text" name="email" [(ngModel)]="user.email" class="validate" id="email" validate required>
<label for="email">Member email</label>
</div>
<blockquote>An email will be sent to the new user with a password and further instructions.
</blockquote>
<div class="input-field">
<button type="submit" class="waves-effect waves-light btn blue-grey darken-1">Add new member</button>
</div>
</div>
</form>
</div>
As you can see, when I submit the form I use reset() form but the class .valid from materialize still there.
I am trying to make a form using bootstrap3 in laravel5.1 so that I can get values from user and store it on the database and want to redirect the same page.
here is the form part of my code --
<div class="row">
<form action="{{url('fastshops/menu')}} " method="post" role="form">
<legend>ADD NEW ITEM</legend>
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" name="ItemID" id="" placeholder="Item ID...">
<label for=""></label>
<input type="text" class="form-control" name="ItemName" id="" placeholder="Item Name...">
<label for=""></label>
<input type="text" class="form-control" name="SellPrice" id="" placeholder="Sell Price...">
<label for=""></label>
<input type="text" class="form-control" name="NetPrice" id="" placeholder="Net Price...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
but this part action="{{url('fastshops/menu')}} is not working ! If I click on the submit button I am having TokenMismatchException ! please help me out.
thanks in advance.
add this
<input type="hidden" name="_token" value="{{Session::token()}}"/> or
<input type="hidden" name="_token" value="{{csrf_token()}}"/>
inside your form.
Laravel 5 automatically check for CSRF on all Post request for all the routes. Read the docs, they are pretty self explainatory
#using (Html.BeginForm()) {
<div>
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p>
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>
}
Here i want to make all the label field and text field to appear on same line?How could i do that?
Change Parent Div and paragraph display style to inline
<div style="display:inline">
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p style="display:inline">
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>
I have widget called List builder, which i used to sort list of contacts.
when i submit the form the, i should get these sorted list of contacts in my $_POST array.
I am getting the content from CGridview widget but not from the following widget:
$this->widget('ext.widgets.multiselects.XMultiSelects',array(
'leftTitle'=>'Email',
'leftName'=>'Contactlist[email][]',
'leftList'=>Contactlist::model()->findUsersByemail( ),
'rightTitle'=>'Email-List',
'rightName'=>'Contactlist[email][]',
//'rightList'=>Contactlist::model()->findUsersByemail( ),
'rightList'=>array(),
'size'=>20,
'width'=>'200px',
));
How to submit this widget data, so that i can access it from $_POST array?
Here is the code generated by this widget:
<form id="yw0" action="/amantran/index.php?r=invmgmt/contactlist/admin" method="get">
<div class="row">
<label for="Contactlist_econtact">Econtact</label> <input size="10" maxlength="10" name="Contactlist[econtact]" id="Contactlist_econtact" type="text" /> </div>
<div class="row">
<label for="Contactlist_fname">Fname</label> <input size="40" maxlength="40" name="Contactlist[fname]" id="Contactlist_fname" type="text" /> </div>
<div class="row">
<label for="Contactlist_lname">Lname</label> <input size="25" maxlength="25" name="Contactlist[lname]" id="Contactlist_lname" type="text" /> </div>
<div class="row">
<label for="Contactlist_email">Email</label> <input size="50" maxlength="50" name="Contactlist[email]" id="Contactlist_email" type="text" /> </div>
<div class="row">
<label for="Contactlist_mobile">Mobile</label> <input size="10" maxlength="10" name="Contactlist[mobile]" id="Contactlist_mobile" type="text" /> </div>
<div class="row">
<label for="Contactlist_address">Address</label> <input size="50" maxlength="50" name="Contactlist[address]" id="Contactlist_address" type="text" /> </div>
<div class="row buttons">
<input type="submit" name="yt0" value="Search" /> </div>
You are having method="get" in your form, change it to method="post"