I need some help in that i have validation working partially. When one selects a payment method called CC the user input needs validation to kick in instantly and wont allow one to input the wrong number or be able to pay(the button will be disabled). My issue is that validation isn't working in that when i input the first number is turns the button on and validation isn't working and i have used this resource as well Validation based on user input.
Here is my html/angular code:
<label for="phone_number" class="fund-project-personal-details-label">Phone Number</label>
<input placeholder="Phone Number" id="phone_number" type="text" ng-model="phone_number" ng-required="selected_payment_method === 'CC'"
ng-pattern="phoneNumberPattern">
<button type="submit"
class="waves-effect waves-light btn-large orange white-text proceed-payment"
ng-disabled="selected_payment_method == undefined || paymentForm.$invalid || selected_reward_total_amount == 0">
Next: Pay
<i class="fa fa-chevron-right" ng-if="!proccess_payment_spinner"></i>
<div class="preloader-wrapper small active right payment-loader" ng-if="proccess_payment_spinner">
<div class="spinner-layer spinner-white-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</button>
This is my JS code:
$scope.phoneNumberPattern = (function() {
let regexp = /^[07]{10,10}$/;
let requireNumber = "selected_payment_method === 'MPESA'"
return {
test: function(value) {
if( $scope.requireNumber === true) {
return true;
}
return regexp.test(vlue);
}
};
})();
Related
In my angular application I have on textarea and within the popup and when we enter any data in textarea the to be displayed in some div.
.component.html
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="Trigger" name="Trigger"></textarea>
</div>
<!-- the entered data of textarea will display in below code-->
<div class="col-sm-5 " >
<div class="content-text" >
<p>{{Trigger}}</p>
</div>
</div>
<button type="button"><i class="icon icon-close" type="button" aria-hidden="true"></i></button>
and I have the close button and my requirement is to close the div when we click on the close button .
Can anyone help me on tha same.
You can create a boolean flag to check when to show or hide the div and then create a click event handler on your button to set that showDiv boolean to false to hide that div;
For example:
showDiv: boolean = true;
closeDiv() : void {
this.showDiv = false;
}
<div class="col-sm-5 " *ngIf="showDiv">
<div class="content-text" >
<p>{{Trigger}}</p>
</div>
</div>
<button (click)="closeDiv()" type="button">
<i class="icon icon-close" type="button" aria-hidden="true"></i>
</button>
You can use *ngIf
Template:
<div *ngIf="display">Test Data</div>
<input type="button" value="click" (click)="update"/>
Component:
display = true;
update(){
this.display = !this.display;
}
You can do this by using JavaScript like this.
on Click it will display none. This is just an example
function show() {
var x = document.getElementById("tabi")
x.style.display = "none"
}
<div class="form-group popover-form" >
<label>Enter Custom Trigger Habit: When I</label>
<textarea class="form-control" [(ngModel)]="Trigger" name="Trigger"></textarea>
</div>
<!-- the entered data of textarea will display in below code-->
<div class="col-sm-5 " id='tabi' >
<div class="content-text" >
<p>{{Trigger}}</p>
</div>
</div>
<button type="button" onclick="show()"><i class="icon icon-close" type="button" aria-hidden="true">Button</i></button>
again, probably a terrible title - but what I'm trying to do is to make a simple search feature on my website. You click a nav button, which updates the search bar, whi in turn triggers an onchange event to update the current appended list.
function update() {
var list = $("#comic__modern-list");
list.empty();
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var filter = comics[this].type;
var publisher = comics[this].publisher;
if (search == "") {
if(filter == "modern") {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
} else if (search == publisher) {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
});
}
The current list is generated by this, which works fine:
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var currentObject2 = comics[this].type;
console.log(currentObject2);
if (search == "") {
if(currentObject2 == "modern") {
var list = $("#comic__modern-list");
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
}
});
From what I can gather, this has to do with the keyword "this" no longer meaning what it did when it was outside of the function, so I'm assuming the fix will be to do with bind(), but I can't make heads nor tails of it.
p.s, if there's an easier/simpler way to set up a search system, please enlighten me!
I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.
var checkbox = document.querySelector("input[name=toggle]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("on-toggle").style.display = "block";
document.getElementById("on-toggle").style.height = "auto";
} else {
document.getElementById("on-toggle").style.display = "none";
document.getElementById("on-toggle").style.height = "0";
}
<div id="switch">
<h2 id="CTA-switch">Turn creativity on </h2>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle">
<i class="bulb">
<span class="bulb-center"></span>
<span class="filament-1"></span>
<span class="filament-2"></span>
<span class="reflections">
<span></span>
</span>
<span class="sparks">
<i class="spark1"></i>
<i class="spark2"></i>
<i class="spark3"></i>
<i class="spark4"></i>
</span>
</i>
</label>
</div>
</div>
<div id="on-toggle">
<div id="references">
<h1>REFERENCE SITES</h1>
</div>
</div>
</div>
You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.
Suppose there is a .NET Bootstrap form with multiple input buttons. When a User presses the Enter key, the default button value is sent to the Controller regardless of in which panel the User is modifying data. I think the code determines which panel is active and which button corresponds to that panel, but how does one send the correct panel's button value to the Controller? $closestButton.Submit(); did not work and I can't find the answer searching the questions here. Thanks in advance!
The Controller:
[HttpPost]
public ActionResult SaveData(SaveDataViewModel model, string buttonCommand)
{
if (buttonCommand == "Save Basics")
{
//Do stuff
}
else if (buttonCommand == "Save Owner")
{
//Do other stuff
}
return View();
}
The View:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" id="basicsPanel">
<div class="panel-heading">Basic Info</div>
<div class="panel-body">
<div class="row">
<!-- Text boxes and such -->
</div>
<div class="row">
<!-- This is the default button upon pressing Enter key, and its value is always sent to the Controller -->
<button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info" id="ownerPanel">
<div class="panel-heading">Owner</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!-- Other text boxes and such -->
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
<button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
</div>
</div>
</div>
</div>
</div>
</div>
Finally, the script that detects which button was pressed, but can't set the value of "buttonCommand":
$(document).keypress(function (e) {
if (e.which == 13) {
var $activeElement = document.activeElement.id;
var $closestPanel = $($activeElement).closest('panel');
var $closestButton = $($closestPanel).children('input[type=submit]');
//Got the intended button, now how to send its value?
}
});
The answer here was: a) capture a keypress event and test whether it's the Enter key; b) if it is, call a function to prevent default behavior; c) get the active element; d) get the id attribute of the closest panel; e) check if the panel name equals one of the panel names of the page and call a .click() on that panel's button id.
Trying to achieve the accessibility to overlay, but unable to achieve that.
Want heading should be read first when the overlay is opened and then corresponding tags should be read.
in the last the close should be read. and click of escape button the pop up should be closed and intimate the user that the pop is going to close.
How do achieve that. have used tab index but it doesn't help.
here is my DOM Structure.
<div class="modal">
<div class="modal-dialog">
<div class="modal-content text-center">
<div class="modal-body">
<div id="show_main_heading">
<h3 class="text-left" tabindex = "0" id="" tabindex = "-1">Header</h3>
<p class="text-left" tabindex = "1">Content or Description</p>
<p class="text-left" tabindex = "2"><label class="">*</label>required field</p>
</div>
<form class="form-horizontal no-summary" novalidate="novalidate">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="firstName" class="col-md-12 text-left" aria-hidden="true" tabindex = "3">firstname</label>
<div class="col-md-12">
<input type="text" tabindex = "4" aria-label="firstName" name="firstName" class="form-control" id="firstName" placeholder="firstname" autocomplete="off">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="col-md-12">
<button class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</form>
Privacy Policy
<p class="error-message"></p>
</div>
</div>
</div>
</div>
Bootsrap uses the escape() function to check if the keypressed is is 27, like so :
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}
This piece of code can be found on GitHub too:
You probably want to be editing the code inside that function, something like below :
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
if (e.which == 27){
// prompt if user if he really want to close the window .
if() // user says close window .
{ this.hide() }
else { return false; }
}
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}