I was using a foundation for apps button in a form. But ng-disabled isn't working with it.
HTML:
<form name="loginForm" novalidate>
<div class="grid-block">
<div class="grid-content">
<input type="text" placeholder="Username" ng-model="formData.username" required/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<input type="password" placeholder="Password" ng-model="formData.password"/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<a class="button" type="button" href="#" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</a>
</div>
</div>
{{loginForm.$invalid}}
</form>
When I use a normal HTML button it is working.
That's not a button it's a link href, if you use a button tag it works fine.
<button class="button" type="submit" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</button>
Related
I have used CKEditor django plugin in my form modal. But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.
As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.
Below is the HTML code snippet
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input type="text" class="form-control" name="dn" id="dnn" required="True" />
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Can someone please suggest how to make the add button make it appear below ckeditor.
If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.
Your code should look similar to this:
<div class="row">
<div class="d-flex">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input
type="text"
class="form-control"
name="dn"
id="dnn"
required="True"
/>
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
</div>
<div class="modal-footer order-1">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
I am updating hidden field in form with jquery. it works just fine for first three clicks after that it shows only first element value.
Here is working js fiddle jsfiddle link:
when users is clicking on tab the value of fileorurl changes to 1,2 or 3. it works for first 3-5 click but after that the value stocks to only 1. here is html
<div class="container" id="upload">
<div class="row">
<form id="upload-form2"
action="http://way2enjoy.com/modules/compress-png/converturl16.php"
name="arjun"
method="post"
enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#fileuu" class="btn btn-default active" data-toggle="tab">
<input type="radio" class="changev" value="1">File Upload
</a>
<a href="#urluu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="2">URL upload
</a>
<a href="#linkuu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="3">Website Link
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit"
value="Compress »"
class="btn btn-primary btn-lg pull-right"
id="upload_btn"
name="upload_btn">
<input type="hidden" name="fileorurl" id="myField" value="">
</form>
</div>
</div>
Here is javascript:
<script>
$('.changev').change(function () {
var valueuu = $(this).val();
$("#myField").val(valueuu);
});
</script>
Any help will be useful thanks!
Your checkboxes not updating for some strange reason after a few clicks. You can use the click event on their parents instead:
$('#tab a').on('click', function(){
var valueuu = $(this).find('input').val();
$("#myField").val(valueuu);
});
Fiddle
I would personally use a custom attribute for that and listen to Bootstrap events. The default value of the input is 1, because that will be the first active tab.
$(document).on('shown.bs.tab', '#tab > a', function(e) {
var dataType = $(e.target).attr('data-type');
$("#myField").val(dataType);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="upload">
<div class="row">
<form id="upload-form2" action="http://way2enjoy.com/modules/compress-png/converturl16.php" name="arjun" method="post" enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
File Upload
URL upload
Website Link
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit" value="Compress »" class="btn btn-primary btn-lg pull-right" id="upload_btn" name="upload_btn">
<input type="text" name="fileorurl" id="myField" value="1">
</form>
</div>
</div>
Fiddle here: https://jsfiddle.net/zyynnzm9/3/
Found it ^^ your radio buttons are getting checked but they aren't getting unchecked so they aren't canceling each other .. because they aren't in the same radio group
You have to put them in a radio group by adding the name attribute with equal value to each
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?
you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href
Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>