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();" />
Related
Although button type is submit, name attributes are same for radio buttons, there is action and method attributes for form, and all other requirements are done, input required attribute is still not working.
there is no novalidate attribute in the form as well.
<form action="" method="">
<div class="form-group">
<div class="form-checkbox">
<label for="resheadpay1">
<input id="resheadpay1" type="radio" id="payinthecar" name="flight-type" required/>
<span></span>Pay in the Car
</label>
<label for="resheadpay2">
<input id="resheadpay2" type="radio" id="paybycreditcard" name="flight-type" />
<span></span>Pay by Credit Card
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="txtSource" class="form-control" name="pickLocation" type="text" placeholder="Pickup Location" required/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="txtDestination" class="form-control" type="text" name="dropLocation" placeholder="Dropoff Location" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input id="txtdate" class="form-control" placeholder="Date" type="date" name="datepick" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input id="txttime" class="form-control" type="text" id="datetimepicker" name="timepick" placeholder="hh:mm" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-btn">
<button class="submit-btn" onclick="GetRoute(); showres(); hidebooking(); changeText();" type="submit">Book Now </button>
</div>
</div>
</div>
</form>
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>
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
I have some strange thing happening from my self post forms. I thought using form method="post" would not put data in the url. And I'm having different outcomes on both forms
<form method="post" action="" enctype="multipart/form-data" id="testForm">
<div class="form-group">
<div class="panel-heading">
some junk
</div>
<div class="panel-body">
<div class="col-md-12">
<textarea id="summernote" name="Full_Discription" class="form-control" required></textarea>
</div>
<div class="col-md-1">
<input type='hidden' name='var' value='<?php echo "$Known_Issue_id";?>'/>
<button name="submit" type="submit" id="submitButton" class="btn btn-accent">Submit Follow-up</button>
</div>
</div>
</div>
</form>
If I submit this form the hidden data shows in URL but not the body text from summernot
web_known_issues_bug.php?bug=20
<form method="post" enctype="multipart/form-data" id="testForm">
<div class="form-group">
<div class="col-md-2">
<label>Website Issue Type:</label>
<select class="form-control" name="Issue_Plugin" id="Issue_Plugin" required>
<option value="">- Select Web Issue -</option>
</select>
</div>
<div class="col-md-7">
<label>Description Of Known Issue:</label> <input name="Issue_Discription" type="text" value="" class="form-control" required>
</div>
<div class="col-md-2">
<label>Type Of Issue:</label>
<select class="form-control" name="Issue_Type" id="Issue_Type" required>
<option value="">- Bug Type -</option>
</select>
</div>
<div class="col-md-1">
<label>Submit Issue</label><BR>
<input type='hidden' name='bug' value='<?php echo "none";?>'/>
<button name="submit" type="submit" id="submitButton" class="btn btn-accent">Submit Issue</button>
</div>
<div class="col-md-12">
<textarea id="summernote" name="Full_Discription" class="form-control" required><?php echo $SendBody; ?></textarea>
</div>
</div>
This form is spitting everything to the url?
web_known_issues.php?message=Added%20New%20Bug%20List%20Item&title=Siclone%20Crashes%20when%20not%20used%20everyday&full=asdasdasdasdasd
I really need this stuff to send clean urls. Any idea on what I have done wrong?
Sorry, this is solved. My error, I left in some debug code in the miles of PHP
I want to close modal after form submit event is finished. I've done following things:
<form [formGroup]="alertForm" novalidate (ngSubmit)="save(alertForm.value, alertForm.valid)">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="input-field">
<div class="form-group input-field">
<label for="recipientLogin">Available Recipient</label>
<textarea class="form-control validate" id="recipientLogin" required formControlName="recipientLogin"> </textarea>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<select class="form-control" id="alert_level" formControlName="alert_level">
<option value="0" selected> Emergency </option>
<option value="1">Major</option>
<option value="2">Minor</option>
<option value="3">Information</option>
</select>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<label for="subject">Subject</label>
<input type="text" class="form-control validate" id="subject" required formControlName="subject">
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<label for="message">Message</label>
<textarea class="form-control validate" id="message" required formControlName="message"> </textarea>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<input type="file" class="form-control" id="media1" />
<input type="file" class="form-control" id="media2" />
<input type="file" class="form-control" id="media3" />
</div>
</div>
</div>
<div>
<div class="col s6">
<div style="padding-left: 20px; padding-right: 20px;">
<button type="submit" class="btn btn-default input-field">Send</button>
</div>
</div>
<div class="col s6 right-align">
<div style="padding-left: 20px; padding-right: 20px;">
<button type="submit" data-dismiss="modal" class="btn btn-default input-field">Close</button>
</div>
</div>
</div>
</form>
This triggers save() on form submit but does not close the modal for that I tried data-dismiss="modal" on save button, which block the save() call and close the modal.
I want to complete save() first after that close modal.
Assuming the form is inside a bootstrap modal, you can use
$('#modalID').modal("hide") to close the modal.
For full reference check here.
Alternatively, on success of your save call you can close the modal via the 'Close' button.
<button #btnId type="submit" />
Which your component can close via this.btnId.click()