I am working on Yii2 application which has one submit button, as below
<button id="next" class="btn btn-primary btn-submit " data-loading-text="Please wait, processing..." value="1" name="next" type="submit">
When I click the button, it is disabled and the text changes, as below
<button id="next" class="btn btn-primary btn-submit disabled" data-loading-text="Please wait, processing..." value="1" name="next" type="submit" disabled="disabled">Please wait, processing...</button>
Now I have added one text field with required attributes, as below
<input id="name" class="form-control" type="text"maxlength="255" required="required" title="">
My issue is that when I click on the submit button when the text field is empty, it shows me that field is required but at he same time the button becomes disabled.
How do I return this button to its original enabled state if the text field is empty?
You should use both removeAttr('disabled') and removeClass('disabled')
Try the below approach.
$name = $('#name');
$next = $('#next');
$next.on('click', function() {
$(this).addClass('disabled').attr('disabled', 'disabled').text($(this).data('loading-text'));
// Your work here
})
$name.on('input', function() {
changeState($(this));
})
changeState($name);
function changeState(elem) {
if (elem.val().trim().length) {
$next.removeClass('disabled').removeAttr('disabled');
} else {
$next.addClass('disabled').attr('disabled', 'disabled').text('Next');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" class="form-control" type="text" maxlength="255" required="required" title="">
<button id="next" class="btn btn-primary btn-submit " data-loading-text="Please wait, processing..." value="1" name="next" type="submit">Next</button>
Related
I have this form where an error message shows under every field if I leave it empty or invalid.
<form #projectForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group col-md-6" [class.has-error]="codeControl.invalid && codeControl.touched">
<label class="control-label">code</label>
<input type="text" class="form-control" required [(ngModel)]="projet.code" id="code" name="code" #codeControl="ngModel">
<span class="help-block" *ngIf="codeControl.invalid && codeControl.touched">code is required </span>
</div>
<div class="form-group col-md-6" [class.has-error]="libelleControl.invalid && libelleControl.touched">
<label class="control-label">libelle</label>
<input type="text" class="form-control" required [(ngModel)]="projet.libelle" id="libelle" name="libelle" #libelleControl="ngModel">
<span class="help-block" *ngIf="libelleControl.invalid && libelleControl.touched"> libelle is required </span>
</div>
<button type="submit" class="btn btn-primary" >submit </button>
</form>
But when it comes to the submit button , I don't want the submit button to be disabled until the form is valid, instead I want the submit button border to become red and a red error message shows under the submit button when clicked and the form is invalid. How can I achieve that ?
try this:
on your component
success: any;
constructor ()
{
this.success = true;
}
onSubmit(){
if(this.yourform.invalid){
this.success= false;
return;
}
}
on your html
<div *ngIf="success;then content else other_content"></div>
<ng-template #content>
<button type="submit" class="btn btn-primary" >submit </button>
</ng-template>
<ng-template #other_content>
<button type="submit" class="btn btn-primary" style="border: 2px solid red">submit
</button>
<!-- your error message goes here -->
</ng-template>
i copied the *ngIf here at How to use *ngIf else?
I would go with simple getter to manage state of the 'submit btn'
get isFormValid():boolean {
this.ngForm && this.ngForm.valid;
}
then
<button type="submit" class="btn btn-primary" [class.cssClassToManageBtnState]="isFormValid" >submit </button>
We have to override the default behaviour of submit button. So, remove the button type as submit and add click event to it
<button type="button" (click)="onSubmit()" class="btn btn-primary" >submit </button>
Remove the submit event in form tag
<form #projectForm="ngForm">
Add the conditional class to the button
<button type="submit" (click)="onSubmit()" class="btn btn-primary" [ngClass]="projectForm.valid ? '' : 'invalid-form-btn'" >submit </button>
<span *ngIf="!projectForm.valid">The form is not valid </span>
.invalid-form-btn {
border: 1px solid red;
}
I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code
I want to show a tooltip when the user didn't click the specific button while submitting a form. I prevent the form from submitting and I want to show just the tooltip to say "you should click first the button". Thank's in advance.
<form id="signUpForm">
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="submit" id="btn-submit" value="submit">
</form>
<script>
$('#signUpForm').submit(function(e) {
if ($('#hidden').val() == '0') {
e.preventDefault();
//show the tooltip that "you first click the agree button" and fadeOut(1000)
}
});
</script>
try this, make button type as button instead of submit:
<form id="signUpForm" >
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7" >I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="button" id="btn-submit" value="submit">
</form>
<script>
$('#btn-submit').click(function(e){
if($('#hidden').val()=='0'){
}
else {
$('#signUpForm').submit();
}
});
</script>
Check below script it will helpful to you for display the tooltip.
<script>
$(".tooltip").hide();
$('#signUpForm').submit(function (e) {
if ($('#hidden').val() == '0') {
e.preventDefault();
//show the tooltip that "you first click the agree button" and fadeOut(1000)
$("#signUpForm").find(".tooltip").stop().fadeIn();
setTimeout(function () {
$("#signUpForm").find(".tooltip").stop().fadeOut();
}, 1000);
}
});
</script>
HTML Part
<form id="signUpForm">
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="submit" id="btn-submit" value="submit">
<div class="tooltip">
you first click the agree button
</div>
</form>
I would like to have ajax submit (without reloading the page) on multiple inputs.
So I have a form which has several input fields with edit and save buttons. When a user click on edit, it focuses on that input field and save with ajax.
The question is, how to make the save button with ajax submit without reloading the page and only that edited field will be changed on save.
Here's my html and js:
HTML
<br>
<br>
<label>Fullname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Fullname" value="John Doe" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
<br>
<label>Nickname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Nickname" value="John" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
JS
jQuery(document).ready(function () {
$('.btn-save, .btn-cancel').hide();
var inputVal;
$('.btn-edit').click(function () {
$(this).closest('div').find('.btn-edit').hide();
$(this).closest('div').find('.btn-save, .btn-cancel').show();
$(this).closest('div').find('input').removeAttr('readonly').focus();
inputVal = $(this).closest('div').find('input').val();
});
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
$('.btn-cancel').click(function () {
$(this).closest('div').find('input').val(inputVal);
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
});
I created a demo on JSFiddle. Please help....
DEMO
In your save button put ajax request onclick:
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
var inputValue=$(this).closest('div').find('input').val();
$.ajax({ URL:"submit url",
type:"POST",
data:{ inputValue:inputValue },
success:function(data){
// do whatever you want with the response
}
});
});
Please read more about jQuery ajax documentation as what Euphoria said.
I am using a bootstrap dropdown and I want to trigger it with some other button.
<li class="dropdown">
Insert TA<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form class="navbar-form navbar-left" >
<div class="form-group" id = "TAform">
<input type="text" class="form-control" placeholder = "Roll Number" required>
<input type="text" class="form-control" placeholder = "M.A.C address" required>
</div>
<button type="submit" class="btn btn-default" onClick = "addMAC()" >+</button>
<button type="submit" class="btn btn-default" onClick = "removeMAC()" >-</button>
<button type="submit" class="btn btn-default" onClick = "submitForm()">Submit</button>
</form>
</ul>
</li>
I want this to be triggered (open) when I click on this other button:
<button type = "submit" class="btn btn-default" onClick = "deleteTA()">delete</button>
ie what should be I put inside the deleteTA() function.
In your case you need to toggle dropdown this way:
function deleteTA(e) {
$('.dropdown-toggle').dropdown().dropdown('toggle');
e.stopPropagation();
}
Where you pass event object into function:
<button type="submit" onClick="deleteTA(event)" class="btn btn-default">delete</button>
It's important here that you stop event propagation otherwise dropdown will immediately close.
Demo: http://plnkr.co/edit/TfdnoGdW1CMpbZlHl62A?p=preview
In the bootstrap documentation on dropdown (with interactive examples enabled) it is given in "Usage" section as:
$('.dropdown-toggle').dropdown()
Hope that helps.