How do I get the value of a text field using AngularJS? - javascript

I want to get the value of a text field value using AngularJS when a form is submitted.
The code below always shows "undefined".
html:
<form ng-submit="AdvanceSearchSubmit($event)" name="AdvanceSearch" novalidate>
<p ng-show="!AdvanceSearch.SearchKeyWord.$pristine && AdvanceSearch.SearchKeyWord.$invalid" class="text-danger">Text Cannot Be Empty!</p>
<div ng-hide="AdvanceSearchModel" class="input-group">
<input name="SearchKeyWord" ng-model="SearchKeyWord" id="SearchKeyWord" class="form-control" placeholder="Search in timeline...." type="text" required>
<span class="input-group-btn" ng-click="isAdvanceSearch='false'; SearchPost(0,'true')">
<button ng-disabled="AdvanceSearch.$invalid" type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
one attempt:
$scope.AdvanceSearchSubmit = function(event)
{
alert(event.target.value);
};
another attempt:
$scope.AdvanceSearchSubmit = function(event)
{
alert(event.SearchKeyWord.value);
};

instead of event pass the SearchKeyWord as a parameter
ng-submit="AdvanceSearchSubmit(SearchKeyWord)"
controller
$scope.AdvanceSearchSubmit = function(keyWord)
{
alert(keyWord);
};

You don't need to pass the event at all to your AdvanceSearchSubmit on submit. You already have your values available inside $scope like ng-model for input field like ng-model="SearchKeyWord"
alert($scope.SearchKeyWord); //access value from `$scope` directly

Related

I am trying to set action with variable of the form using jquery. It is correctly setting the action, but on the action page there is nothing

Here is what I am trying to do.
HTML:
<form id="search-form" action="search-results.php?a=" method="get">
<input type="text" id="search-field" autocomplete="off">
<button type="submit" class="btn fs-search"> <i class="fas fa-search"></i> </button>
<ul></ul>
</form>
jQuery:
function nameOfFunction(x, y) {
$("#search-field").val(x);
x = btoa(x);
y = btoa(y);
var ogAction = $("#search-form").attr("action");
var action = ogAction + x + "&b=" + y;
$("#search-form").attr("action", action);
}
Thanks for any solutions.
You're using the form in the wrong way. The action cannot pass values, but is only the address where the values should be sent to.
Values of a form are sent by input elements in the form. The name attribute of the input specifies the key in which the value will be stored on the receiving end.
<form id="search-form" action="search-results.php" method="get">
<!-- name: search -->
<input name="search" type="text" id="search-field" autocomplete="off">
<button type="submit" class="btn fs-search"><i class="fas fa-search"></i></button>
</form>
In your PHP file
$search = $_GET['search'];

How to keep selected date after form submission?

I am using ng-bootstrap date picker to my form. I need to keep selected date picker value after form submission. Currently date picker values empty (reset) after form submission. How to keep selected date picker values?
<form class="form-inline" name="form" #invoiceheaderform="ngForm" novalidate (ngSubmit)="invoiceheaderform.form.valid && save();">
From Date *
<div class="input-group">
<input class="form-control ngbfield"
name="invfromdate" [readonly]="true" #vl="ngModel" [(ngModel)]="model.fromDate" ngbDatepicker #d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
</div>
<!-- <div *ngIf="invoiceheaderform.submitted && vl.invalid" class="invalid-feedback">From Date is required</div> -->
</div>
<button type="submit" [disabled]="disableRunButton" class="btn btn-primary mb-2 expad">Save</button>
</form>
check whether you are modifying your model values (model.fromDate) in the save() function. Since it is a date, it is possible that you are changing the date format within the save() function and assign back to the same variable. If it is the case, use another variable to store modified values.
<div class="input-group">
<input class="form-control ngbfield" name="fromDate" [readonly]="true" #vl="ngModel" [(ngModel)]="model.fromDate" ngbDatepicker #d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
</div>
The problem could be that the model values are reset on submit and since the values are bound by ngModel the date values are also reset
For submit, instead of calling save directly as above, consider passing the event as save($event) and calling event.preventDefault() from inside the save function

How to add textbox value to array on click of button in angularjs and add required functionality

Hi now with this code I am able to add the text box value to array and empty the textbox after adding the value to the array. Now my question on adding the required validation for the textbox. If value is present either in textbox or in the array then required validation should be removed. Else it should be added. Kindly help me.
<div class="input-group">
<input ng-disabled="$parent.BuildModel.DisableControl" type="text" class="form-control textBoxStyle " name="Logpath" ng-model="$parent.BuildModel.Logpath" id="Logpath" required />
<span class="input-group-addon ">
<button ng-click="onclickfun();">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
<span ng-disabled="$parent.BuildModel.DisableControl" class="help-block" name="LogPaths" id="LogPaths" ng-model="$parent.BuildModel.LogPaths" >{{LogPaths}}</span>
In controller
$scope.BuildModel.LogPaths = [];
$scope.onclickfun = function () {
if ($scope.BuildModel.LogPath.length < 0) {
Alertify.alert("Please enter log path for adding to list");
}
$scope.BuildModel.LogPaths.push($scope.BuildModel.LogPath);
console.log($scope.BuildModel.LogPaths);
$scope.BuildModel.LogPath = ClientConfig.EMPTY;
$scope.BuildModel.res = $scope.BuildModel.LogPaths.join(' ');
};
You are using $parent but you don't need to use it. I have created a simple example for do that. You can see the example in HERE
html
<div ng-app ng-controller="LogController">
<input ng-model="inputData"></input>
<input type="submit" ng-click="addPath()" value="add"></input>
<div ng-repeat="log in logs">{{ log }}</div>
</div>
controller
function LogController($scope) {
$scope.logs = [];
$scope.addPath = function () {
$scope.logs.push($scope.inputData);
$scope.inputData = null;
};
}

AngularJS: Setting value of form field to various object properties

I have a simple AngularJS dynamic form that is bound by ng-model to a property modelParams.value. Each form field displays the value of modelParams.value However, I would like to have a button called "Default" that sets the values of all of the form fields to some other property in this associative array such as modelParams.defaultValue, or modelParams.oldValue. I assume that once the "Default" button is pressed this would override the value of ng-model="modelParams.value".
Here is the form:
<form name="modelParamsForm">
<div class="form-group" ng-repeat="modelParam in modelParams">
<div class="row">
//INPUT FORM FIELDS
<input type="number" class="form-control input-sm" required ng-
model="modelParam.value" >
</div>
</div>
<button class="btn btn-primary btn-sm" ng-
click="updateModelParams(modelParams, modelParamsForm)">
</button>
//DEFAULT BUTTON
<button type="button" class="btn btn-default btn-sm" ng-
click="default()">Default</button>
</form>
My JSON looks like this:
[{"model":"MAF","paramname":"CascDefaultSpreadOverride","minvalue":"0","maxvalue":"100","description":"The defaault repo spread override to use for CASC positions.","defaultvalue":1.0,"value":1.0,"datatype":"FLOAT"},{"model":"MAF","paramname":"DefaultLotSize","minvalue":"1","maxvalue":"1000","description":"The minimum lot size that must be met for a collateral allocation.","defaultvalue":1.0,"value":1.0,"datatype":"INTEGER"},{"model":"MAF","paramname":"HtbColdHaircut","minvalue":"0","maxvalue":"100","description":"The haircut to apply to positions with a Cold HTB category.","defaultvalue":0.1,"value":0.1,"datatype":"FLOAT"},{"model":"MAF","paramname":"HtbExtraHotHaircut","minvalue":"0","maxvalue":"100","description":"The haircut to apply to positions with a Extra-Hot HTB category.","defaultvalue":0.9,"value":0.9,"datatype":"FLOAT"},]
$scope.field = 'value';
$scope.change = function() {
$scope.field = 'oldValue';
}
...ng repeat blabla
<input ng-model="modelParam[field]"/>
...
<button ng-click="change()">Change</button>
EDIT: Here is a working demo: http://jsfiddle.net/zy94an54/

Hide form on submit with Angular JS

Trying to wrap my head around some Angular items and working thru a tutorial to edit and learn.
Clicking the below button shows the below form. How do I reverse this once the form is submitted? Meaning hiding the form on submit until the button is clicked once more.
<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-primary">
<i class="fa fa-plus"></i>Add Task
</button>
Basically, the form appears, I enter something and submit, but would like the form to dissapear upon submit? Thinking something to do with ng-hide, but can I do this using only Angular? Or do I need to do something with javascript/css?
<div id="addForm" class="margin-full-5">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="addTask(taskInput)">
<i class="fa fa-plus"></i> Add Task
</button>
</div>
</div>
</div>
</form>
You can also achieve this using a combination of Angular form's attribute $submitted, ng-hide and ng-submit
<form name="myForm" ng-hide="myForm.$submitted" ng-submit="submit()">
<button>Submit</button>
</form>
Read about it here: https://docs.angularjs.org/api/ng/type/form.FormController
Somewhere in your view.
<button ng-click="showTheForm = !showTheForm">Add a Task</button>
<form ng-show="showTheForm" ng-submit="processForm()">
<button>Submit</button>
<button type="button" ng-click="showTheForm = false">Cancel</button>
</form>
Somewhere in your controller
$scope.processForm = function() {
// execute something
$scope.showTheForm = false;
}
Your form is displaying IF the addNewClicked value evaluates to true, which occurs when you click the add task button. If you want the form to disappear on submit, you just need to make the onClick to that button change your addNewClicked to false.
AngularJS Docs for Ng-If
You can do that by using ng-show/ng-hide as per example below :
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" ng-hide="hideform" id="newTaskForm" class="add-task">
and modify the submit method to make the hideform = true;
$scope.addTask = function(input){
... your things
$scope.hideform = true;
}
You can also do the same using jQuery :
$("#newTaskForm").hide();
This should do the trick:
$scope.addTask = function(taskInput) {
...
$scope.addNewClicked = false;
}
You could use ng-show as you can see in this jsfiddle
This will show and hide the div element based on clicking the button. When the button is clicked it will toggle the boolean, hence acting as an on/off switch for ng-show

Categories

Resources