I wanted to add validation to this input
<div class="col-lg-6">
<!-- Content Here -->
<!-- Needs Validation -->
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" href="add_workout_2.php" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</div>
I tried using the required tag but it doesn't seem to work (I can just click the submit button without inputting any value).
Edit:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</form>
In this case the "required" parameter will only trigger, if a valid "submit" event is getting called correctly. Anchor tags has the "type" parameter, but it's not for the same use as an input/button tag. I'd suggest that you convert your anchor tag to a button as follows:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<button class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</button>
</form>
Then you'll get the wanted result. If you don't want the styling of the button, you can work around that with styling. For future reference, you don't need to add "value="" to the input tag for having an empty tag :-)
I hope it helped.
Change your code to this:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" required>
<input class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button" value="+ ADD EXERCISES TO WORKOU">
</form>
Related
I implemented a button to display an input field after the button has been clicked, I checked that it worked but as I was doing some final debugging, the button doesn't work again. The strange thing is that, the same piece of code works for a different button. Would you please have a look how I can fix the bug? Thanks a lot!
Here is the code for buttons and input field. The button "Change Password" works, the "Reject" button does not.
<div>
#if($user->user_status=="pending")
<a style="float:right" class="btn btn-primary text-right" href="/users/approve_user/{{$user->id}}">Approve</a>
<a style="float:right" class="btn btn-primary text-right" onclick="rejectClick()">Reject</a>
#else
<a style="float:right" class="btn btn-primary text-right" href="/users/delete_user/{{$user->id}}">Delete</a>
<a style="float:right" class="btn btn-primary text-right" onclick="passwordClick()">Change Password</a>
#endif
</div>
<div class="form-group">
<form action="/users/reject_uesr/{{$user->id}}" method="post">
<label for="textInput" class="hide" id="textTitle">Reject Reason: </label>
<input class="form-control hide" name="reject_reason" value="" type="text" id="textInput" placeholder="Please write down the reason to reject this user:" />
<input class="btn btn-primary hide" type="submit" id="textSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<div class="form-group">
<form action="/users/change_password/{{$user->id}}" method="get">
<label for="textInput" class="hide" id="password">New Password </label>
<input class="form-control hide" name="password" value="" type="text" id="passwordInput" placeholder="Please Enter The New Password:" />
<input class="btn btn-primary hide" type="submit" id="passwordSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
Here is the code for script:
<script>
function rejectClick(){
document.getElementById('textTitle').className="show";
document.getElementById('textInput').className="show";
document.getElementById('textSubmit').className="btn btn-primary show";
}
function passwordClick(){
document.getElementById('password').className="show";
document.getElementById('passwordInput').className="show";
document.getElementById('passwordSubmit').className="btn btn-primary show";
}
</script>
I have the following Bootstrap markup:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
<button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
</div>
</div>
When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.
Is there a form cancel button capability in Bootstrap?
Change your code to the following:
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
Cancel
</div>
</div>
simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
if you would like to keep both elements as <button>. You can create a click handler with jQuery:
$('#cancel').click(() => {
location.href = '../' //returns to parent
})
A direct method is to use onclick="history.back()" Like so:
<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>
It is supported in all browsers at the time of this posting
I need to change the style on a working search box to match the theme.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
<div class="search_box">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" />
<input type="button" name="btn1" id="btn_top" value="" />
</form>
</div>
The first div is the style I need, the second is the working search box.
Respectively, here is what each looks like currently:
http://gyazo.com/ecd1b696f723879d5512588b1d384017
Manage the width of your parent container as per your requirement, but the get the search bar, as you are showing: check the linked fiddle:
https://jsfiddle.net/happy2deepak/d4jad6ah/
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-dark btn-lg">Go!</button>
</span>
</div>
Form elements by default are block elements, it seems.
JsFiddle here
When I use input text-box & button within form element, button is moved to next line:
<form action="/" method="post"><input class="form-control" id="Email" name="Email" placeholder="Your email address" type="text" value=""> <span class="input-group-btn">
<button class="btn btn-success">Sign up!</button>
</span></form>
When I remove form tag these input & button elements are displayed inline, correctly. What could be wrong?
I tried display:inline css but it did not help.
Are you using "input-group" around your form control and button?
http://jsfiddle.net/49t4xwcs/3/
<form>
<div class="input-group">
<input type="email" class="form-control" placeholder="Your email address"/>
<span class="input-group-btn">
<button class="btn btn-success">Sign up!</button>
</span>
</div>
</form>
Try to add
Style="float:left"
To the search and to the button
hi all i am try to apply bootstrap css in my mvc application
i want reconstruct this example http://getbootstrap.com/examples/signin/ in my application
i code my login page like
<form id="loginform" method="post" class="form-signin" role="form">
<h3 class="form-signin-heading">Login</h3>
<input type="text" name="user_NA" class="form-control" placeholder="User ID" />
<input type="password" name="user_pwd" class="form-control" placeholder="Password" />
<input type="submit" name="Submit" value="Login" class="btn btn-lg btn-primary btn-block" />
</form>
but i got the output like
i am not done any changes in bootstrap.css
i want tha black header(default). but here shows a button. please someon help me
You can try this..
Fiddle here
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
Good Luck..