How to data-bind checkbox value to Javascript object - javascript

I am trying to set up 2-way data binding in Javascript for a simple form. I have been using the databind plugin by grnadav, but have been unable to get a (or multiple) checkbox values to bind to an object array. The data model, js binding and test output function are
// DataBind model
var model = {
title: 'sample',
cb: ['option', 'option', 'option']
}
// bind form
window.onload = function() {
DataBind.bind( document.getElementById('form'), model );
};
// log data values
function sendForm(){
console.log(JSON.stringify(model));
document.getElementById('data').innerHTML = JSON.stringify(model);
}
The HTML markup is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Test</title>
</head>
<body>
<table id="form">
<tr>
<td>Input</td>
<td><input id="title" data-key="title"></td>
</tr>
<tr>
<td>Checkboxes</td>
<td>
<input name="checkbox-group" data-key="cb[0]" id="in-checkbox1" value="one" type="checkbox"/>
<input name="checkbox-group" data-key="cb[1]" id="in-checkbox2" value="two" type="checkbox"/>
<input name="checkbox-group" data-key="cb[2]" id="in-checkbox3" value="three" type="checkbox"/>
</td>
</tr>
<tr>
<td><pre id="data"></pre></td>
</tr>
<tr>
<td colspan="2"><input type="Button" name="Submit" value="Continue" onclick="sendForm()"></td>
</tr>
</table>
<script src="DataBind.js"></script>
...
</body>
</html>

It seems that you can only bind to objects not arrays, try:
var model = {
title: 'sample',
cb: [{key:'option'}, {key:'option'}, {key:'option'}]
};
// bind form
window.onload = function() {
DataBind.bind( document.getElementById('form'), model );
};
// log data values
function sendForm(){
console.log(JSON.stringify(model));
document.getElementById('data').innerHTML = JSON.stringify(model);
}
<script src="https://rawgit.com/grnadav/databind/0.4.x/src/DataBind.min.js"></script>
<table id="form">
<tr>
<td>Input</td>
<td><input id="title" data-key="title"></td>
</tr>
<tr>
<td>Checkboxes</td>
<td>
<input name="checkbox-group" data-key="cb[0].key" id="in-checkbox1" value="one" type="checkbox"/>
<input name="checkbox-group" data-key="cb[1].key" id="in-checkbox2" value="two" type="checkbox"/>
<input name="checkbox-group" data-key="cb[2].key" id="in-checkbox3" type="checkbox"/>
</td>
</tr>
<tr>
<td><pre id="data"></pre></td>
</tr>
<tr>
<td colspan="2"><input type="Button" name="Submit" value="Continue" onclick="sendForm()"></td>
</tr>
</table>
You can add issue for that on github.

Related

changing model objects inside controllers to manipulate DOM objects

So I am learning how to use controllers in angularjs and I am stuck. I created a form using html and tested to see if the controller was responding to the html through the data-binded attribute "message". However "enter your details" does not appear under "Add Event" in the browser. Am I missing something in my code? Is there somewhere in the app.module folder where I should declare a constructor? Let me know your thoughts.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3>Add Event</h3>
<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
{{message}}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
</tr>
</table>
</div>
<script>
var eventForm = angular.module('eventForm', []);
eventForm.controller('eventsCtrl', function($scope) {
$scope.message = 'Enter your details';
$scope.addEvent = function()
{
}
});
</script>
</body>
</html>
You can like this following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>Add Event</h3>
<form
ng-app="eventForm"
ng-controller="eventsCtrl"
name="AddEventForm"
ng-submit="AddEvent()"
>
{{ message }}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" ng-disabled="AddEventForm.$invalid">
Submit
</button>
</td>
</tr>
</table>
</form>
<script>
var eventForm = angular.module("eventForm", []);
eventForm.controller("eventsCtrl", function($scope, $log) {
$scope.message = "Enter your details";
$scope.AddEvent = function() {
$log.log($scope.event);
};
});
</script>
</body>
</html>
I think you should to use form tag in this situation:
<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>

JavaScript Push function into Angular's ng-repeat array coming in blank

Let me start by saying this is not a repeated question, I read every related question! My edit functions work fine, and my push function to update the array was working, and I'm certain I never touched it, it just stopped working!
I'm going to say my HTML form has ng-model's that have no spelling errors, that are used to help with the push. The Angular code:
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
//More code here that resets the forms input//
}
My edit functions work, my delete ones do, it's just this one, when I hit the button that sets off the add() function, it resets the form input, but pushes a blank array into my ng-repeat list!
I have a form that has multiple inputs with ng-model set to whatever; name, phone1 ... etc, and the angular code is correct, so why the hell will this not work?
<div class="centered" ng-show="addcont">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Save" ng-click="add(); `showAdd()">
</td>
</tr>
</table>
</form>
</div>
MAJOR UPDATE!
I use a JQuery autotab function, and as soon as I commented it out, the arrays passed in normally again.
The function is used on the form provided above, and auto tabs to the next input.
Here's the function:
<script>
$(document).ready(function(){
$('.edit').autotab();
});
</script>
Using Jquery and angular doestnot fit every time
So, we should use the angular version of the Auto tabs.
So, Here is the solved example using Auto tabs with Angular.
The important line to be added is
$.autotab.selectFilterByClass = true;
$.autotab.selectFilterByClass = true;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$('.edit').autotab();
$.autotab.refresh();
$scope.people = [];
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
setTimeout(function () {
$.autotab.refresh();
}, 1);
//More code here that resets the forms input//
}
});
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="centered">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
{{people}}
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit number" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Save" ng-click="add()">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Please run the Above SNIPPET
Now, your pushing the code into the Array works fine with AUTO-TAB.
HERE IS A WORKING DEMO
Try to push the variables by value and not by reference. The quickest solution that I came through is using the JSON object. This might be a problem when you reset the $scope.name for example, it updates the value in your array.
$scope.add = function(id){
$scope.$apply(function() {
$scope.people.push({
name: JSON.parse(JSON.stringify($scope.name)),
phone1: JSON.parse(JSON.stringify($scope.phone1)),
...
});
});
//other code
}

extracting html table with filled in radio buttons

I have table which contains several radio buttons. After selecting a radio button and clicking a button, the html of the table (including the filled in radio button) should be stored in a variable. However, only the html table is stored in a variable (i.e. there is no checked property in the stored html code).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>
<script>
function extract_table()
{
// store html table
var table = $('form').html();
alert(table);
}
</script>
</body>
</html>
You can reflect the checked or other applied properties, if you loop the items and set as attributes before getting html().
function extract_table() {
var table = $('form');
$('form :radio').each(function() {
$(this).attr('checked', this.checked);
})
alert(table.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>

Jquery serialize() method is returning null

I am using serialize() method in my JSP page. But its returning null. Dont know what I am doing wrong
Please help.
jQuery Code :
$(document).ready(function() {
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}
});
HTML Code :
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>Address :</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
<tr>
<input type="button" id="addBtn" />
</tr>
</table>
</form>
I posted relevant code only.
I think your javascript code is bad formatted, I tried this and it works fine...
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
There's an error in your javascript code. It should be:
<script type="text/javascript">
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
</script>
Notice the closing bracket and semicolon after your click method.
you forgot the close parenthesis, the code below works
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
Missing closing parenthesis for click event handler. Also in the HTML the last <tr> has no <td> included. Consider including your input element into <td colspan="2">
jQuery
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}); // <-- missing );
HTML
<tr>
<td colspan="2">
<input type="button" id="addBtn" />
</td>
</tr>

JavaScript: To hide all grid rows when checkbox is checked and on button click

For this code below, I need your expertise.
<html>
<head>
<script>
function delrow() {
document.getElementById("db_grid_row1").style.display = 'none';
document.getElementById("db_grid_row2").style.display = 'none';
document.getElementById("db_grid_row3").style.display = 'none';
document.getElementById("db_grid_row4").style.display = 'none';
}
</script>
</head>
<body>
<form action="rowhide_action.php" method="post" name="save_form">
<input type="button" value="Delete" onClick="delrow();"></input>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Databases</th>
</tr>
</thead>
<tbody id="db_grid">
<tr id="db_grid_row1">
<td><input type="checkbox" name="cbox[]" value="1" ></input></td>
<td><input type="text" name="db[]" value="Oracle"></input></td>
<td><input type="hidden" name="modeflag[]" value="S" ></input></td>
</tr>
<tr id="db_grid_row2">
<td><input type="checkbox" name="cbox[]" value="1"></input></td>
<td><input type="text" name="db[]" value="MySQL"></input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
<tr id="db_grid_row3">
<td><input type="checkbox" name="cbox[]" value="1"></td>
<td><input type="text" name="db[]" value="Cassandra"></input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
<tr id="db_grid_row4">
<td><input type="checkbox" name="cbox[]" value="1"></input></td>
<td><input type="text" name="db[]" value="Mongo"> </input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
</tbody>
</table>
</br>
<input type="submit" value="Save"></input></br></br>
</form>
</body>
</html>
When check-boxes are checked and delete button is clicked, I want
(1) The checked-box rows have to be hidden.
(2) change element modeflag[] value="D" for the hidden rows
please help.
Thanks in advance.
with jquery it goes like this:
$(function() {
$("#del").on('click', delrow);
});
function delrow() {
var checks = $( "input[type=checkbox]:checked" );
checks.parent().parent().hide();
}
DEMO
notice I removed the event from your html element to the javascript..
let me know if you have any questions

Categories