We Keep Coding

Cannot read property 'split' of undefined (debugging issue)

I am having difficulty figuring out the following error:
Uncaught TypeError: Cannot read property 'split' of undefined
The HTML:
<div id="content" class="col-xs-12 col-sm-12">
<p>Please select your preferred payment method.</p>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="authorizenet" checked="checked">
Credit Card/Debit Card (Authorize.Net) </label>
</div>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="affirm">
Credit Card/Debit Card (Affirm) </label>
</div>
<p><strong>Add comments about your order.</strong></p>
<p>
<textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
<div class="cart-content">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-coupon">Coupon Code</h4>
<div class="input-group">
<input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-voucher">Gift Certificate Code</h4>
<div class="input-group">
<input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<div class="pull-right">I have read and agree to the <b>Shipping and Returns</b>. <input type="checkbox" name="agree" value="1">
<input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
</div>
</div>
The Script:
var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;
selector.html(line);
The Goal:
I have two radio buttons on the checkout page.
Credit Card/Debit Card (Authorize.Net)
Credit Card/Debit Card (Affirm)
I am unable to edit the HTML directly. Thus rebuilding the html line with the above code to give me the output I want. I am trying to change the HTML text of the 2nd radio input to just "Affirm".
The script works in a fiddle, but not on the page.

I once encountered a similar bug when trying to maintain a page without access to the source files. I was using jQuery to attempt to delete a p element sentence but was coming up undefined because it was running on the homepage before the application even got to generate that part of the html. It was an SPA. I fixed it by adding a listener on the document to the router something along like this: $(document).on("pageshow", "#checkoutPage", function() {//your jquery function});
I tried it both on CodePen and locally with VS Code and both time I got the intended effect. Have you tried maybe making sure youre using the right version of JQuery and that is linked to the html in the proper oder, also debugging via console logs? See below:
CodePen
enter code here

Display query and result on the same page

I am currently having a two page application which lets the user enter the data and hit submit and the next page opens with the Query result in a grid. like below
home.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">From Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="fromDate"
name="fromDate"
uib-datepicker-popup="{{format}}"
ng-model="request.fromDate"
is-open="popup1.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.fromDate.$error"
ng-if="homeForm.fromDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div>
<label style="font-size: medium">To Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="toDate"
name="toDate"
uib-datepicker-popup="{{format}}"
ng-model="request.toDate"
is-open="popup2.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.toDate.$error"
ng-if="homeForm.toDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="md-padding col-md-6">
<div class="row form-group">
<button type="button" class='btn btn-danger' ng-click="clearRequest(homeForm)">Clear</button>
<!--ng-disabled="!homeForm.$valid" -->
<button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
</div>
</div>
</div>
</form>
result.html
<div>
<h4 class="text-primary">Search Results</h4>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="indeterminate" ng-show="isLoading" md-diameter="150"></md-progress-circular>
</div>
<div id="gridStyle" ng-if="gridOptions.data"
ui-grid="gridOptions"
class="myGrid"
ui-grid-resize-columns
ui-grid-pagination
ui-grid-selection
ui-grid-auto-resize
ui-grid-cellNav
ui-grid-exporter>
</div>
</div>
Now I am trying to put all the query and the query result together in a page. Like all the inputs/buttons on the left and the grid on the right.
Adding the code in to Plunker here
Do I need to add one more html page that will have both these html, and I should be calling that in the app.js? I am very new to AngularJS not sure how can I do this

Yes, you should create a view component, which will include your two components which will become the child components of the newly added view.
Check out this tutorial to learn the concept.

You can use Asynchronous XHTML And JavaScript (AJAX) to have everything on a single page, without loading a different page, which is what I would do unless you have requirements to display results on a separate page.
Considering you have type=button for the submit button, it appears AJAX was intended since this will prevent the page from reloading when the submit button is clicked.
Basically, in the createRequest() function, send the query parameters (which appear to be included in the homeForm argument) to the query service. When the response is received, update the gridOptions.data with the values you want displayed in the table... Angular should take care of the rest.

Validate input fields on bootstrap modal window button clicks using angular

I am trying to validate input fields on submit/ok button click in a modal window using angularjs framework. What I have tried are to add the attributes required/ng-required on my input button. But on my ok button click the input text field is not validated and the modal window is dismissed. As below is my modal-body. I would like to see the angular behaviour of showing the red border around it on click of ok.
<div class="modal-body">
<input type="text" class="input-box" size="10" required ng-model="data.myNumber"/>
</div>
Is there something additional I need to do in my event handler for submit buttons? Below is a plunker I created for the demo. Any help would be highly appreciated.
http://plnkr.co/edit/ACoTQgIVnWnR92LngT89?p=preview
By the way the plunker will run only in firefox.

First you'll need to use the correct elements and corresponding classnames. You'll need to wrap your input in a div with classname form-group, and that needs to be wrapped into a form element. The actual input needs to have the form-control class:
<form>
<div class="form-group">
<input type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
A nice read on properly using forms with bootstrap can be found here:
http://getbootstrap.com/css/#forms
Now that it's a proper bootstrap form you can add angular validation. That's very simple just by giving the form and the input a name attribute:
<form name="modalForm">
<div class="form-group">
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
Now angular will preform validation in the background. It will add modalForm to the scope of your modalcontroller from where you can get the state of the form and it's input elements.
Now because of the required attribute the input and form has been deemed invalid which can be checked by using: modalForm.modalInput.$invalid That will return true, when the input is empty . You can use it to add the has-error class to the form-group div element which will turn the border of the input element to red. You can dynamicly add this class by using the ng-class directive:
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
</div>
</form>
You can also add a message which also will be colored through the has-error class. Add a span element with the help-block class and use the ng-show directive to toggle it on the required error:
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
<span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
</div>
</form>
Now if you want to make it impossible to push the ok button when the form is invalid you can toggle the disabled class and/or add use the ng-disabled directive:
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
I recommend reading the previous link on bootstrap forms and the following guide for using angular's forms. It has good examples:
https://docs.angularjs.org/guide/forms
Here's the complete modal code and a working example on Plunker:
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">My Modal</h3>
</div>
<form name="modalForm">
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required/>
<span ng-show="modalForm.modalInput.$error.required" class="help-block">Input is required.</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</form>
</div>
http://plnkr.co/edit/GUE3sGci478obwOrzhNw?p=preview
PS: i know it doesn't answer you question as to how to preform input validation on button click but that's because it's not "the angular way" of using forms. The above and the links i provide should give you a good idea on how to properly use validation within Angular. Hope it helps, good luck.

Here are the main directions to get what you want:
Wrap your input in a <form> element.
In the ok() function, close modal only if it's valid
I also replaced type="text" with type="number", since you want the user to input a number. Also corrected the plunker to make it work:
ModalInstanceController
app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
$scope.ok = function () {
if ($scope.numberForm.$valid) {
$modalInstance.close();
}
};
// ...
}
HTML
<form name="numberForm">
<div class="form-group">
<input type="number" class="form-control input-box" required ng-model="data.myNumber"/>
</div>
<button class="btn btn-primary" ng-click="ok()" >OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>
See plunker
Improvement: Play with angular validation to add red borders if input is invalid:
<form name="numberForm">
<div class="form-group" ng-class="{ 'has-error' : numberForm.myNum.$invalid }">
<input type="number" name="myNum" class="form-control input-box" required ng-model="data.myNumber"/>
</div>
<button class="btn btn-primary" ng-click="ok()" ng-disabled="numberForm.$invalid">OK</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</form>
See forked plunker

How to bind using the ng-model in angular js

I just started using angular js and I was playing with the ng-model directive but I can't figure out what im doing wrong. I want the input email value to show in the h1 tag as I'm typing. pretty much I'm not getting anything show in the h1 tag as I type.
<body ng-app="starter">
<ion-pane>
<ion-content style="margin-top: 163px">
<div ng-controller="loginController">
<form action="">
<div class="row">
<div class="col col-50 col-offset-25">
<div class="card">
<div class="item item-text-wrap">
<div class="list">
<label class="item item-input">
<i class="icon ion-email placeholder icon"></i><input type="email" placeholder="Email" ng-model="email" />
<h1>{{email}}</h1>
</label>
<label class="item item-input">
<i class="icon ion-locked placeholder-icon"></i><input type="text" placeholder="Password" />
</label>
<br/>
<button class="button button-full button-positive">Clock Me In</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</ion-content>
</ion-pane>
</body>
this is my javascript
var app = angular.module('starter', ['ionic'])
app.controller('loginController', function($scope)
{
})

Your changes are not displayed on screen because while you are typing the email it is invalid. Invalid values are reflected to $scope as null, so there is nothing to show.
As suggested in comments, you can change it type="text". Since you removed validation, you'll see the text on both screen and in your $scope, however you'll sacrifice validation.
If you still want to use email validation, and want to see it in screen/$scope you can use ng-model-options as described here.
Using ng-model-options you can allow invalid values to be stored in your $scope.
Try adding ng-model-options="{allowInvalid: true}" to your type="email" input.

ng-click doesnt work in input type submit

I write a angular application that has a form with input type submit but ng-click doesnt work
<div ng-show="!addDate && tk.doTime != null && tk.test2" class="change-item-btn" ng-click="addDate = true"> <span class="add-on"><i class="icon-time"></i></span>{{tk.doTime}}</div>
<form class="dateForm" ng-show="addDate" style="background-color:#dbf8f8;color: #152626; padding: 20px 20px 50px; margin-top:10px;" >
<div style="display:inline-block;width:50%;">
delivery
<div class="control-group">
<div class="controls">
<div class="input-append">
<input name="date" class="input-small datepicker form-control" placeholder="date" type="text" style="color:black" />
</div>
</div>
</div>
</div>
<div style="display:inline-block;width:50%;">
delivery time
<div class="input-append bootstrap-timepicker">
<input name="clock" style="color:black;direction:ltr;text-align:center" class=" input-small timepicker form-control" type="text">
</div>
</div>
<button ng-click="addDate = false" class="sbmtInput">cancel</button>
<input name="submit" type="submit" ng-click="deleting()" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />
</form>
deleting function is
$scope.deleting= function(){
$scope.addDate = false;
}
addDate value change to false but doesnt have any effect on html view
where i go wrong?

This is because ng-click is in div with ng-show and in submit input as well.
When you click the event is done twice and in divs ng-click addDate is set to true again.
In order to make this work, you should prevent propagation in input.
To do this, use stopPropagation method, available in your scope $event object.
So the input code should be:
<input name="submit" type="submit" ng-click="deleting(); $event.stopPropagation();" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />