using the form template in bootstrap for styling only - forms

can I use only the layout of the form in bootstrap and have the input option frozen and the submit buttons behave like plain html button which redirects somewhere?
Why I want this?
So in the homepage I have resources which can be deleted pressing the delete button against them. On clicking the delete button the resource data is displayed like the layout of a form, of course I want typing inputs to be disabled, and a warning message on top, and YES and RESET option at the bottom. Since the form has a specific action assigned via GET method it will invariably perform that action irrespective of the choice selected. So if RESET is also selected the resource still gets deleted.
One option is to have the buttons as individual links with specific redirection properties but then I need to handcode the entire styling of the form.
Below is the code
#elseif($layout=='delete')
<div class="container-fluid mt-4">
<div class="row">
<section class="col md-7">
<div class="card mb-3">
<img src="https://cdn.pixabay.com/photo/2014/05/05/19/53/keyboard-338502_1280.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Are you sure you want to delete</h5>
<form action="{{url('/destroy/'.$student->id)}}" method="get">
#csrf
<div class="form-group">
<label>CNE</label>
<input value="{{ $student->cne }}" type="text" class="form-control" name="cne" placeholder="Enter CNE">
</div>
<div class="form-group">
<label>FirstName</label>
<input value="{{ $student->firstName }}" type="text" class="form-control" name="firstName" placeholder="Enter the first Name">
</div>
<div class="form-group">
<label>Last Name</label>
<input value="{{ $student->LastName }}" type="text" class="form-control" name="LastName" placeholder="Enter the Last Name">
</div>
<div class="form-group">
<label>Age</label>
<input value="{{ $student->age }}" type="text" class="form-control" name="age" placeholder="Enter Age">
</div>
<div class="form-group">
<label>Speciality</label>
<input value="{{ $student->Speciality }}" type="text" class="form-control" name="Speciality" placeholder="Enter the speciality">
</div>
<input type="submit" class="btn btn-info" value="yes">
<input type="submit" class="btn btn-warning" value="reset">
</form>
</div>
</div>
</section>

Firstly, if you want disable input, add readonly to your inputs :
<input value="{{ $student->cne }}" type="text" class="form-control" name="cne" placeholder="Enter CNE" readonly>
Second, now the type of your reset button = submit so when you click it, your form is submitted. Change your code :
<input type="reset" class="btn btn-warning" value="reset">

Related

FormSubmit.co is redirecting to an infinite (presumably) loading screen

Whenever I try sending an email through an email form I made, it redirects me to another page that keeps loading for several minutes. After a random amount of time (from minutes, to even days), I get the email I sent.
I'm not sure why this is happening and have not yet found a solution. This is my code for the form:
<div class="mail">
<h1 style="font-size: 50px;">Contact Us</h1>
<form target="_blank" action="https://formsubmit.co/xxxx#gmail.com" method="POST">
<div class="form-group">
<input type="hidden" name="_template" value="table">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
</div>
</div>
<div class="form-group">
<textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
</div>
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
</form>

Aspnet.Core MVC, how to bind a list of a group of inputs?

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:

Enable autocomplete when using Hosted Payment Fields

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.

Bootstrap submit button won't work

I have the below code where I'm trying to submit data from a form into my back-end. Whenever I press the button it doesn't do anything and it's supposed to route to the specified place. I have looked at several examples and still hasn't worked. Below is my form. Any suggestions?
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h1>Sign Up</h1>
<form action ="/adduser" method="POST" id="adduser">
<fieldset class="form-group">
<label for="InputUsername"> Username </label>
<input type="text" class="form-control" name="username" id="InputUsername" placeholder="Enter username">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email"id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"id="exampleInputPassword1" placeholder="Password">
</fieldset>
<button class="btn btn-default" form="signup" type="submit">Sign up</button>
</form>
</div>
</dv>
</div>
Here is my route
#app.route('/adduser', methods=["POST"])
def adduser():
print(request.form, file=sys.stderr)
username = request.form['username']
password = request.form['password']
email = request.form['email']
models.User.create_user(email, password, username)
login_user(user)
return redirect_url('index.html')
Your button has a form attribute of signup but your form has an id of adduser, so the button does not belong to the form. Try changing these values to match.

Login form using knockout binding doesn't work on Firefox, fine on Chrome

This is utterly bizarre! I have a simple username/password form:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="LoginUserName" class="col-md-2 control-label">User name</label>
<div class="col-md-10">
<input type="text" id="LoginUserName" class="form-control" data-bind="value: userName, hasFocus: setFocus" />
</div>
</div>
<div class="form-group">
<label for="LoginPassword" class="col-md-2 control-label">Password</label>
<div class="col-md-10">
<input type="password" id="LoginPassword" class="form-control" data-bind="value: password" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<input type="checkbox" id="LoginRememberMe" data-bind="checked: rememberMe" />
<label for="LoginRememberMe">Remember me?</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default" data-bind="click: login, disable: session.isBusy()">Log in</button>
</div>
</div>
</form>
First time through, it all works fine and the user is logged in. After logging out and re-entering the user name, the password field is auto-filled. No matter if this is left auto-filled or retyped, when the login method is called, the password field is empty!
If I change the password to an incorrect one it triggers firefox to pop up the "password has changed, do you want to update...?" box at the top of the page. Provided that I answer "yes" to this and then, after that login fails, enter the correct one then it all works and I can log in.
Why on earth is firefox blanking out the password in this circumstance? Completely confused!