I have a table that has a form inside one of the cells. Because of the way that bootstrap controls input field sizing, it seems the documented way to do this is through this method
http://getbootstrap.com/css/#forms-control-sizes
But, because my form is sitting in a table, is there a way to do this properly?
Here is what it looks like.. and it's def not right... I don't even think I can be putting rows inside my cell..
<td>
<div class="row">
<p>$00.00</p>
<form role="form" class="form-inline cartAdd" name="itemAdd" method="post" action="shop.php">
<div class="col-lg-3">
<label class="sr-only" for="quantity">Quantity</label>
<input type="text" class="form-control quantity" name="quantity" placeholder="Qty" maxlength="3">
</div>
<div class="form-group">
<input type="hidden" class="form-control pid" name="pid" class="pid" value="1" >
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" name="button" id="7PlateButton">Add</button>
</div>
</form>
</div>
</td>
Related
I've the following form on JSP:
<form class="form-horizontal" style="margin-bottom: 24px">
<fieldset id="myFieldset" disabled>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align: left">Created By</label>
<div class="col-sm-4">
<input class="form-control" type="text" name="created_by" value="${inputConfiguration.getCreatedBy()}" readonly/>
</div>
</div>
.
.
. few more divs of form-group
.
.
</fieldset>
<div class="form-group row">
<div class="col-sm-offset-4">
<form action="${pageContext.request.contextPath}/Configuration/EditConfiguration" method="GET">
<input type="hidden" name="marketplace" value="${param.marketplace}">
<input type="hidden" name="program" value="${param.program}">
<button class="btn btn-primary"> form_Edit </button>
</form>
</div>
<div class="col-sm-1">
<form action="${pageContext.request.contextPath}/Configuration/CopyConfiguration" method="GET">
<input type="hidden" name="marketplace" value="${param.marketplace}">
<input type="hidden" name="program" value="${param.program}">
<button class="btn btn-primary"> form_Copy to New </button>
</form>
</div>
</div>
</form>
However, the forms that are within the outer-form are not redirecting to the correct path on clicking their respective buttons. NOTE: the hidden input fields are just to pass them as url parameters to the paths mentioned in the action and nothing else. Can anyone suggest as to how to pass these as url params and how to make the nested forms work?
I am using aspnetcore mvc, dotnet version 6. I am trying to get inputs in a view. Code below i am trying to get buyer users and delivery users in a list. But i can't bind them in a list of model from controller.
Here is my codes:
public async Task<IActionResult> SendMainFlow(List<IFormFile> files, string[] DeliveryUsers, List<BuyerUsers> BuyersModel)
{
return BadRequest();
}
From the view:
<form class="col-12 col-md-6" method="POST" action="/WorkManagement/SendMainFlow" enctype="multipart/form-data">
<div class="">
<label>
Dosyalar:
</label>
<input type="file"
class=" col-12"
name="files"
multiple/>
</div>
<hr class="row " />
<div class="row m-1">
<label class="col-12 text-primary">
Satın alacak kişiler:
</label>
<div id="BuyerInputArea" class="col-lg-12">
<div class="inputBuyerRow first-input">
<div class="input-group mb-3">
<input type="text" name="BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
<input type="text" name="BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
<input type="text" name="BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
<div class="input-group-append">
<button id="removeBuyer" type="button" class="btn btn-danger">Kaldır</button>
</div>
</div>
</div>
<button id="addBuyer" type="button" class="btn btn-info">Kişi Ekle</button>
</div>
</div>
<hr class="row " />
<div class="row m-1">
<label class="col-12 text-primary">
Dağıtılacak kişiler:
</label>
<div id="DeliveryInputArea" class="col-lg-12">
<div id="DeliverySignerRow">
<div class="input-group mb-3">
<input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
<div class="input-group-append">
<button id="removeRow" type="button" class="btn btn-danger">Kaldır</button>
</div>
</div>
</div>
<div id="newRow"></div>
<button id="addDealer" type="button" class="btn btn-info">Kişi Ekle</button>
</div>
</div>
<div class="row m-2">
<button class="col-12 btn btn-info" type="submit">
İŞLEM BAŞLAT
</button>
</div>
</form>
I can get for one user of any type here. I mean a buyer or a delivry user. But i want to get a list of user. And also my code tries to add dynamicaly a #inputBuyerRow in #BuyerUserArea.
Don't confuse with code. Code is simple. I want to post my inputs with form tag. In Controller side, I want to take any type of users into a list. I did not show models because i think it is not neccessary. The main problem is how can i get #inputBuyerRow inputs in BuyerModel like a list of objects? #addBuyer button add more #inputBuyerRow element in code. There will be more users.
How can i do that. Must I do i input group or anything else? I did not find any example.
My constraints are:
I can't use Ajax Jquery or anything else like them. I must use form tag.
I must use list in controller side.
Edit: In controller, i tried to get inputs with an string array and model to find out how view send to me. So don't confuse also with this code. I was just trying. Nothing special.
Generally, in an MVC application, when submits the form, in the action method, it will get the data via the html element’s name attribute.
You can access form fields by its name from view to controller
In View
To transfer the string array, the elements should use the same name attribute. like this: name="DeliveryUserMail"
<div id="DeliveryInputArea" class="col-lg-12">
<div id="DeliverySignerRow">
<div class="input-group mb-3">
<input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
<input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
<div class="input-group-append">
<button id="removeRow" type="button" class="btn btn-danger">Kaldır</button>
</div>
</div>
</div>
To send the list of model, we should based on the list index to set the name attribute, like this: BuyersModel[0].BuyerUserName
<div class="input-group mb-3">
<input type="text" name="BuyersModel[0].BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
<input type="text" name="BuyersModel[0].BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
<input type="text" name="BuyersModel[0].BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
</div >
<div class="input-group mb-3">
<input type="text" name="BuyersModel[1].BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
<input type="text" name="BuyersModel[1].BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
<input type="text" name="BuyersModel[1].BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
</div >
In Controller
[HttpPost]
public ActionResult Create2(string[] DeliveryUserMail, List<BuyerUsers> BuyersModel)
{
//Access string, list here
}
The result is like this:
I'm wondering if it's possible to enable autocomplete of a credit card stored in the browser, for example using simple html, the browser shows option to autocomplete stored credit card details.
<form method="post" id="usrForm">
<h4>Do not use a real card</h4>
<label for="nameoncard">Name on Card</label>
<input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
<label for="ccnumber">Credit Card Number</label>
<input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number">
<label for="cc-exp-month">Expiration Month</label>
<input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
<label for="cc-exp-year">Expiration Year</label>
<input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
<label for="cvv2">CVV</label>
<input type="text" id="cvv2" name="cvv2" autocomplete="cc-csc">
<input type="submit" value="Submit" name="submit">
</form>
We are using a form with Hosted payment fields, something like that:
<div class="panel panel-default bootstrap-basic">
<form class="panel-body" action="your-form-handling-page" method="POST" id="checkout-form" onsubmit="return do_when_clicking_submit_button()">
<div class="row">
<div class="form-group col-md-12">
<label for="cardholder-name">Name on Card</label>
<input type="text" class="form-control" id="cardholder-name" placeholder="Full Name">
<span class="helper-text"></span>
</div>
<!--Hosted Field for CC number-->
<div class="form-group col-md-12">
<label for="card-number">Card Number</label>
<div class="input-group">
<div class="form-control" id="card-number" data-bluesnap="ccn"></div>
<div id="card-logo" class="input-group-addon"><img src="https://files.readme.io/d1a25b4-generic-card.png" height="20px"></div>
</div>
<span class="helper-text" id="card-help"></span>
</div>
<!--Hosted Field for CC EXP-->
<div class="form-group col-xs-7">
<label for="exp-date">Exp. Date</label>
<div class="form-control" id="exp-date" data-bluesnap="exp"></div>
<span class="helper-text"></span>
</div>
<!--Hosted Field for CC CVV-->
<div class="form-group col-xs-5">
<label for="cvv">Security Code</label>
<div class="form-control" id="cvv" data-bluesnap="cvv"></div>
<span class="helper-text"></span>
</div>
</div>
<button class="btn btn-success btn-lg col-xs-6 col-xs-offset-3" type="submit" id="submit-button">Pay Now</button>
</form>
</div>
<!--BlueSnap Hosted Payment Fields JavaScript file-->
<script type="text/javascript" src="https://sandbox.bluesnap.com/services/hosted-payment-fields/v1.0/bluesnap.hpf.mini.js"></script>
It would be awesome if there would be a way so that browsers suggests autocomplete.
Am I missing something obvious here? Any help would be greatly appreciated.
I work for BlueSnap. Unfortunately the Hosted fields themselves have autocomplete disabled so this will not work no matter what you add to the divs in your client code (if you inspect the field you will see autocomplete="off") . I have opened a bug in our system to support this since I can see why it's an important feature to have. Thanks for posting this.
I am using Spring.
The method in my RESTController is this,
http://localhost:8080/delivery-api/training/submit. It is able to save hard code values into database.
This is part of my html form, it can be open up using this URL: http://localhost:8080/delivery-web/training/apply.
<form th:object="${applyForm}" class="form-horizontal" role="form" method="post" action="http://localhost:8080/delivery-api/training/submit" >
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1" > Country </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" placeholder="Country"
class="col-xs-10 col-sm-7" th:field="*{country}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Fee </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" th:field="*{Fee}" class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Start Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{startDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1">End Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{endDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<br> <br>
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i> Submit
</button>
</div>
</div>
</form>
When I click on submit, it can be directed to http://localhost:8080/delivery-api/training/submit and insert the hard coded values into database, but it did not direct to my application-form.html page after that.
My controller
#PostMapping(value = "/apply")
public String apply(#Valid #ModelAttribute("applyForm") DeliveryApplicationForm applyForm, BindingResult errors, Model model) {
model.addAttribute("applyForm", applyForm);
return VIEW_PATH + "application-form";
}
I would like to render html page and also pass data from my form to RESTController method through a controller after I click on the submit button in my html page.
May I know how I can do it?
I would like to populate a bootstrap form with results from a mongo query using handlebars but am not sure where to put the relevant expressions.
For example, if the code is:
<form method="post" action="/students" enctype="multipart/form-data">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">STUDENT</label>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">Surname</label>
<div class="col-md-2">
<input class="form-control" type="text" name="surname">
</div>
<label class="col-md-2 control-label" for="title">First Name</label>
<div class="col-md-2">
<input class="form-control" type="text" name="firstname">
</div>
</div>
</form>
and, say I have the following {{surname}} and {{firstname}} expressions, is there a place in the code I can put them to ensure that when the page renders the forms contain the surname and firstname objects already? Is this even possible?
Any help is much appreciated
If I understand you right you want the inputs value to be filled. You can set the inputs value like this
<input class="form-control" type="text" name="surname" value="{{$surname}}">