I am creating a simple webpage for report generation using springboot + thymeleaf. I have 2 dropdown values one dependent on another. I have tried selecting value in dropdown and upon selection, i have onchange event that calls JavaScript to get the values for the selected dropdown. While it does that, the selected value is not retaining in the dropdown, it get reset to default option.
I tried ways suggested in forums but none are easy for me to understand.
I have provided my code snippet below, please educate me what can i do to get my value retained in the first dropdown..
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="../static/css/bootstrap.css" rel="stylesheet" th:href="#{/css/bootstrap.css}"/>
<link href="../static/css/start-test-view.css" rel="stylesheet" th:href="#{/css/start-test-view.css}"/>
</head>
<script>
function retrieveAppName() {
if (history.pushState) {
var selectedLOB = document.getElementById('lob').value;
var _url = location.href;
var newurl = ( _url.indexOf('lob') !== -1 ) ? _url : _url+'lob?lob='+selectedLOB;
window.history.pushState({path:newurl},'',newurl);
location.reload();
}
}
</script>
<body>
<div align="center">
<div class="container">
<div class="row">
<div class="navbar-logo">
<img alt="Dashboard" th:src="#{/img/logo.svg}">
</div>
</div>
</div>
<header>
<div class="navbar-primary">
<div class="container">
<div class="row">
<span class="portal">Report Summary</span>
</div>
</div>
</div>
<div class="navbar-secondary"></div>
</header>
<div align="Left">
<div class="container main-content">
<div class="row card">
<form class="form" th:action="#{/}" th:object="${dashboardParams}" method="post">
<div class="row">
<div class="col-sm-6 text-container">
<label class="input-label">Line Of Business</label>
<select th:name="lob" class="input-field" id="lob" name="lob" onchange="retrieveAppName()">
<option value="0">--select LOB--</option>
<option value="1">ALL</option>
<option th:each="lob:${listLOB}"
th:value="${lob.line_of_business}"
th:text="${lob.line_of_business}"></option>
</select>
</div>
<div class="col-sm-6 text-container">
<label class="input-label">Application Name</label>
<select class="input-field" id="appName" name="Application Name">
<option value="0">--select Name--</option>
<option value="1">ALL</option>
<option th:each="app:${listAppName}"
th:value="${app.app_Name}"
th:text="${app.app_Name}"></option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6 text-container">
<label class="input-label">Start Date</label>
<input class="input-field" type="date" id="sDate" name="Start Date"/>
</div>
<div class="col-sm-6 text-container">
<label class="input-label">End Date</label>
<input class="input-field" type="date" id="eDate" name="End Date"/>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<button name="Generate Report" class="submit" type="submit">Generate Report</button>
</div>
</div>
</form>
</div>
</div>
</div>
<br/><br/>
<div class="table">
<table class="table table-bordered table-sm">
<thead class ="thead-light">
<tr>
<th>Application ID</th>
<th>Application Name</th>
<th>Status</th>
<th>TestCase Path</th>
<th>Environment</th>
<th>Execution Date</th>
</tr>
</thead>
<tbody>
<tr th:each="runs : ${listRuns}">
<td th:text="${runs.app_ID}">Application ID</td>
<td th:text="${runs.app_Name}">Application Name</td>
<td th:text="${runs.status}">Status</td>
<td th:text="${runs.testcasepath}">TestCase Path</td>
<td th:text="${runs.environment}">Environment</td>
<td th:text="${runs.execdate}">Execution Date</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Controller Code:
#GetMapping("/lob")
public ModelAndView viewLOB(Model model, #RequestParam(value="lob", required=false) String lob) {
List<AppData> lobName = dao.listLOB();
List<AppData> appName = dao.listAppName(lob);
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("listLOB", lobName);
modelAndView.addObject("listAppName",appName);
model.addAttribute("lastselected", lobName);
modelAndView.setViewName("dashboardParams");
return modelAndView;
}
Related
I am developing a webpage where a user can add or delete rows to an HTML table.
The process is:
They will fill up the input widget on the webpage.
After filling up the description, unit, quantity, unit price, and pressing the add button; the data will be shown in the table. They will be able to add as many items as they want, and they will also be able to delete items whenever they want. Everything works fine up until here.
Once the user is done filling up the necessary forms, as well as adding the items they need, they will press the 'Save' button.
After pressing the 'Save button', I will fetch the values in the input field and the rows in the HTML table using POST method.
I will save the data in the database.
The dilemma is I can't fetch the rows in the table.
I researched some ways to fetch data from HTML tables using PHP, and I found out about file_get_contents function. It works perfectly fine with pre-defined tables, but not in dynamic tables.
I noticed that file_get_contents function fetches the HTML contents in the webpage, which is empty because the table will be filled when the user is using it, not when the page is created.
Now I feel like I hit the wall, and I do not have an idea for alternatives to achieve what I want.
I hope you can give me some advice. Thank you.
My webpage code:
<?php
session_start();
if (!isset($_SESSION['loggedIn']) ) {
header('Location: index.php');
}
if (isset($_POST['jo_save'])) {
$pageContents = file_get_contents('job_order_form.php');
$dom = new DOMDocument();
$tableData = $dom->getElementsByTagName('td');
$ctr1 = 0;
$ctr2 = 0;
foreach ($tableData as $node) {
$contents[$j][] = trim($node->textCotent);
$i++;
$j = $j % 5 == 0? $j++ : $j;
}
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<?php require('navbar.php');?>
<div class="container">
<h3 class="display-4">Job Order</h3>
<form action="<?php echo $path_parts['basename'];?>" method="POST" id="jo_information">
<div class="form-row">
<div class="form-group col-md-8">
<label for="jo_clientName">Client Name </label>
<input class="form-control" id="jo_clientName" name="jo_clientName" />
</div>
<div class="form-group col-md-4">
<label for="jo_date">Date(mm/dd/yyyy) </label>
<input class="form-control" id="jo_date" name="jo_date" value="<?php echo date('m/d/Y');?>" readonly/>
</div>
<div class="form-group col-md-8">
<label for="jo_representative">Representative</label>
<input class="form-control" id="jo_representative" name="jo_representative" />
</div>
<div class="form-group col-md-4">
<label for="jo_tin">TIN#</label>
<input class="form-control" id="jo_tin" name="jo_tin" />
</div>
<div class="form-group col-md-12">
<label for="jo_address">Address</label>
<input class="form-control" id="jo_address" name="jo_address" />
</div>
<div class="form-group col-md-12">
<label for="jo_location">Project Location</label>
<input class="form-control" id="jo_location" name="jo_location" />
</div>
</div>
<hr />
<div class="form-row">
<div class="form-group col-sm-12 col-md-4">
<label for="jo_creator">Created By:</label>
<input class="form-control" id="jo_creator" name="jo_creator" value="<?php echo $_SESSION['employee_fName']." ".$_SESSION['employee_mName']." ".$_SESSION['employee_lName']?>" readonly />
</div>
<div class="form-group col-sm-12 col-md-4">
<label for="jo_mobilization">Mobilization</label>
<input class="form-control" id="jo_mobilization" name="jo_mobilization" />
</div>
<div class="form-group col-sm-12 col-md-4">
<label for="jo_totalPayment">Total Payment</label>
<input type="number" class="form-control" id="jo_totalPayment" name="jo_totalPayment" readonly/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<button type="submit" class="form-control btn btn-primary" id="jo_save" name="jo_save">Save</button>
</div>
<div class="form-group col-md-3">
Cancel
</div>
</div>
</form>
<form action="<?php echo $path_parts['basename'];?>" method="POST" id="jo_items">
<div class="form-row">
<div class="form-group col-md-5">
<label for="jo_description">Description</label>
<input class="form-control" id="jo_description" name="jo_description" />
</div>
<div class="form-group col-md-2 col-sm-6">
<label for="jo_unit">Unit</label>
<input class="form-control" id="jo_unit" name="jo_unit" />
</div>
<div class="form-group col-md-2 col-sm-6">
<label for="jo_quantity">Qty.</label>
<input type="number" class="form-control" id="jo_quantity" name="jo_quantity"/>
</div>
<div class="form-group col-md-2">
<label for="jo_unitPrice">Unit Price</label>
<input type="number" class="form-control" id="jo_unitPrice" name="jo_unitPrice" />
</div>
<div class="form-group col-md-1">
<label for="jo_add"> </label>
<button type="button" class="form-control btn btn-primary" id="jo_add" name="jo_add">Add</button>
</div>
</div>
<table class="table table-striped table-sm" id="jo_item_table">
<thead class="thead-dark">
<tr>
<th scope="col">Description</th>
<th scope="col">Unit</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Amount</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#jo_add").on('click', function() {
item_amount = parseFloat($('#jo_quantity').val()*$('#jo_unitPrice').val());
new_row = "<tr> \
<td>"+$('#jo_description').val()+"</td> \
<td>"+$('#jo_unit').val()+"</td> \
<td>"+$('#jo_quantity').val()+"</td> \
<td>"+$('#jo_unitPrice').val()+"</td> \
<td>"+item_amount+"</td> \
<td><button type='button' class='btn btn-outline-danger btn-sm' onClick='deleteRow(this)'>Delete</button></td>";
jo_items_tbl = $('table tbody');
jo_items_tbl.append(new_row);
$('#jo_totalPayment').val(computeTotal);
$('#jo_description').val("");
$('#jo_unit').val("");
$('#jo_quantity').val("");
$('#jo_unitPrice').val("");
});
});
function deleteRow(cell){
var row = $(cell).parents('tr');
var rIndex = row[0].rowIndex;
document.getElementById('jo_item_table').deleteRow(rIndex);
}
function computeTotal(){
var totalAmount = 0.0;
var tbl = document.getElementById('jo_item_table');
for(var row=1, n=tbl.rows.length; row<n; row++){
totalAmount += parseFloat(tbl.rows[row].cells[4].innerHTML);
}
return totalAmount;
}
</script>
</body>
</html>
Some screenshots of the webpage:
enter image description here
enter image description here
Consider using a database (sqlite, mysql), or if you really want to use files, use CSV.
$file_name = "file.csv";
if (($handle = fopen($file_name, "r")) !== FALSE) {
while (($data = fgetcsv($handle, 0, ",")) !== FALSE) {
echo $data[0] . $data[1] . $data[2];
}
fclose($handle);
}
$fp = fopen($file_name, 'a');
// data to write
$infos = ["abc", "123"];
foreach ($infos as $info) {
fputcsv($fp, array($info));
}
fclose($fp)
Edit: "5: I will save the data in the database."
In that case, you can fetch the records from the database, no need to read from files.
Im trying show de year that the user put in the input with the id 'searchBar' and show it on the lable with the 'outp' id in the table on the same laravel page with javascript.
But its just not working..
Heres my show.blade.php
<div class="row">
<div class="form-group col-2">
<form action="" method="GET" role="search">
{{ csrf_field() }}
<div class="input-group">
<input type="text" class="form-control" id="seachBar" name="q" placeholder="Search year">
<button type="submit" id="btn"></button>
</span>
</div>
</form>
</div>
</div>
<div class="row">
<div class="form-group col-2">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-left" style="width: 5%">Data</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td class="text-left">31/01/<lable id="outp"></p></td>
</tr>
i have already connected the javascipt file with this:
<script src="{{ asset('js/showYear.js') }}" type="text/javascript"></script>
and this is my javascript file showYear.js :
var year = document.getElementById('seachBar').value;
document.getElementById('btn').onclick = function showYear(year)
{
document.getElementById('outp').innerHTML = year;
}
im new to laravel and javascript i started maybe 2 to 3 weeks ago on my intership so im kinda lost :) .
help would be great, tkx
Try with below code,
$(document).ready(function() {
$("#seachBar").keyup(function() {
$("#outp").html($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="form-group col-2">
<form action="" method="GET" role="search">
<div class="input-group">
<input type="text" class="form-control" id="seachBar" name="q" placeholder="Search year">
<button type="submit" id="btn">Submit</button>
</span>
</div>
</form>
</div>
</div>
<div class="row">
<div class="form-group col-2">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-left" style="width: 5%">Data</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td class="text-left" id="outp"></td>
</tr>
</tbody>
</table>
How can I create a table dynamically and then add rows to the table? I have been able to create the table with one row with form fields, but how I can add additional rows? Any example on how it has been implement would helpful. I did in angular 2.
screenshot
$scope.newItem = function($event, valI) {
$scope['questionelemnt'].push({
id: counter,
title: '',
desc: '',
Qty: '',
price: '',
total: ''
});
}
Any help in angular or jquery.
Directive ng-app & ng-controller code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Hello AngularJS - Add Table Row Dynamically</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>
Controller CompanyCtrl code in controller.js
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.questions = [];
$scope.addRow = function(){
$scope.questions.push({ 'title':$scope.title, 'desc': $scope.desc, 'Qty':$scope.Qty,'price':$scope.price,'total':$scope.total });
$scope.title='';
$scope.desc='';
$scope.Qty='';
$scope.price='';
$scope.total='';
};
)};
</script>
Directive ng-repeat code
<table class="table">
<tr>
<th>title
</th>
<th>desc
</th>
<th> Qty
</th>
<th>price
</th>
<th>total
</th>
</tr>
<tr ng-repeat="question in questions">
<td>{ {question.title}}
</td>
<td>{ {question.desc}}
</td>
<td>{ {question.Qty}}
</td>
<td>{ {question.price}}
</td>
<td>{ {question.total}}
</td>
</tr>
</table>
**Directive ng-submit code**
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">title</label>
<div class="col-md-4">
<input type="text" class="form-control" name="title"
ng-model="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">desc</label>
<div class="col-md-4">
<input type="text" class="form-control" name="desc"
ng-model="desc" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Qty</label>
<div class="col-md-4">
<input type="text" class="form-control" name="Qty"
ng-model="Qty" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">price</label>
<div class="col-md-4">
<input type="text" class="form-control" name="price"
ng-model="price" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">total</label>
<div class="col-md-4">
<input type="text" class="form-control" name="total"
ng-model="total" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
Happy Coding ,Hope it will help you
I was testing a website's security and in an attempt to exploit its XSS, I used <script> tag. However, this website has a word limit on the input, so my ending script tag was not inserted in the database. Now when I open the webpage the submit button no longer appear because it was inside the truncated script tag. Due to Chrome's auto-correction, that specific script tag gets closed after submit button tag. Are anyone able to help me out?
After auto-correction, the HTML code of the page looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Update Student Information</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../login/css/style_reg.css" type="text/css" />
<link rel="stylesheet" href="../login/js/jquery-smoothness-ui.css">
<script src="../login/js/jquery-2.0.3.js"></script>
<script src="../login/js/jquery-ui.js"></script>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("same_info");
c.onchange=toggle_shipping_visibility;
}
function toggle_shipping_visibility()
{
var c=document.getElementById("same_info");
var t=document.getElementById("shipping_table");
t.style.display=(c.checked) ? 'none' : '';
}
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form class="form2" action="sem-reg.php" method="POST">
<div class="formtitle">Update Student Information</div>
<div class="note">
»» All Fields are Compulsory
<h3 style="margin-left:20px;color:green;">Welcome ADARSH I can still edit it</h3>
<h3 style="margin-left:20px;color:green;">1403097</h3>
</div>
<div class="input">
<div class="inputtext">University Roll:</div>
<div class="inputcontent">
<input type="text" name="univ" placeholder="University Roll No" value="1403097"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">College Roll:</div>
<div class="inputcontent">
<input type="text" name="coll" placeholder="College Roll No" value="1006/14"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Name:</div>
<div class="inputcontent">
<input type="text" name="name" placeholder="Name" value="ADARSH I can still edit it"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Father's Name:</div>
<div class="inputcontent">
<input type="text" name="father" placeholder="Father's Name" value="PAWAN KUMAR" readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Mother's Name:</div>
<div class="inputcontent">
<input type="text" name="mother" placeholder="Mother's Name" value="SH. MT. BABLI DEVI"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Batch</div>
<div class="inputcontent" readonly>
<select name="batch" >
<option disabled="disabled" value="2011">2011</option>
<option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Semester</div>
<div class="inputcontent">
<select name="sem" >
<option value="4">4</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Branch</div>
<div class="inputcontent" >
<select name="bra">
<option value="3">B.Tech - Computer Science Engineering</option>
<option value="1">B.Tech - Biotechnology Engineering</option><option value="2">B.Tech - Chemical Engineering</option><option value="3">B.Tech - Computer Science Engineering</option><option value="4">B.Tech - Electronics & Communications Engineering</option><option value="5">B.Tech - Information Technology</option><option value="6">B.Tech - Mechanical Engineering</option><option value="10">M.Tech Part Time Thermal Engineering</option><option value="11">M.Tech Part Time Computer Science Engineering</option><option value="12">M.Tech Part Time Electronics & Communications Engineering</option><option value="13">M.Tech Part Time Chemical Engineering</option><option value="14">M.Tech Part Time Production Engineering</option><option value="15">M.Sc Physics</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Practical Group</div>
<div class="inputcontent">
<select name="prac">
<option value="2">B1</option>
<option value="1">None</option><option value="2">B1</option><option value="3">B2</option><option value="4">B3</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">D.O.B</div>
<div class="inputcontent">
<input id="datepicker" type="text" name="dob" placeholder="D.O.B." value="24/04/1997"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Section</div>
<div class="inputcontent">
<select name="sec">
<option value="1">A</option>
<option value="0">None</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
<div class="input">
<div class="inputtext">Category</div>
<div class="inputcontent">
<select name="cat" readonly>
<option value="General">General</option>
<option value="General">General</option><option value="Scheduled Castes/ Scheduled Tribes">Scheduled Castes/ Scheduled Tribes</option><option value="Backward Classes">Backward Classes</option><option value="Border Areas">Border Areas</option><option value="Backward Areas">Backward Areas</option><option value="Sports Persons">Sports Persons</option><option value="Children/ Grand Children of Freedom Fighters/Political Sufferers">Children/ Grand Children of Freedom Fighters/Political Sufferers</option><option value="Disabled Persons">Disabled Persons</option><option value="Children/Widow Of Defence Personnel/ Ex-Servicemen etc">Children/Widow Of Defence Personnel/ Ex-Servicemen etc</option><option value="Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards">Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards</option><option value="Riot Affected/ Terrorist affected families">Riot Affected/ Terrorist affected families</option><option value="Tsunami victims">Tsunami victims</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Parents):</div>
<div class="inputcontent">
<input type="text" name="phone_parent" placeholder="Phone no(Parents)" value="+919459578556"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Self): </div>
<div class="inputcontent">
<input type="text" name="phone_self" placeholder="Phone No(Self)" value="+919814615325"readonly/>
</div>
</div>
<div class="add">Permanent Address:</div>
<div class="input" style="height:120px">
<div class="inputtext">Address: </div>
<div class="inputcontent">
<textarea class="textarea" name="address" placeholder="Address" ></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea>
</div>
</div>
<div class="input">
<div class="inputtext">City: </div>
<div class="inputcontent">
<input type="text" name="city" placeholder="City" value="Dhar"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">State: </div>
<div class="inputcontent">
<input type="text" name="state" placeholder="State" value="Himachal"readonly/>
</div>
</div>
<input type="checkbox" name="same_info" id="same_info" checked="checked">Correspondence Address is same as Permanent Address<br>
<table id="shipping_table" style="display:none">
<tr class="inputtext">
<td>Address</td>
</tr>
<tr>
<td><textarea class="textarea" name="c_address"placeholder="Address"></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea></td>
</tr>
<tr class="inputtext">
<td>City</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_city" placeholder="City" value="Dhar"></td>
</tr>
<tr class="inputtext">
<td>State</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_state" placeholder="State" value="Himachal"></td>
</tr>
</table>
<div class="buttons">
«« Go Back To Home Page
<input class="orangebutton" type="submit" name="submit" value="Update" />
</div>
</form>
</div>
</body>
</html>
Using Chrome you can right-click on the last visible element, or somewhere else on the page, select Inspect and then edit the HTML that is loaded in the browser using the Chrome built in developer tools. E.g. remove/alter the <script> tag. And see if the page becomes usable again.
You can also try a recent version of Firefox or MSIE, they have features very similar to the above.
Here is my example.
As a result there is generated two groups of radio buttons.
But group with properly checked item is only one.
It works ok, but why needed item in another group is unchecked?
Here is code:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<script>
var app = angular.module('test', []);
function test1($scope)
{
$scope.test = [1,2,3];
$scope.generateChartId = function (stn)
{
return "chart" + stn;
};
$scope.generateRadioOptionName = function (stn)
{
return "optionsRadios" + stn;
};
$scope.generateRadioOptionId = function (stn, num)
{
return "optionsRadio" + stn + num;
};
}
</script>
<body ng-app="test">
<div id="example" >
<div class="box-col row" ng-repeat="stn in [1,2]">
<div ng-controller="test1">
<div>
<label>
<input type="radio" name="{{generateRadioOptionName(stn)}}"
id="{{generateRadioOptionId(stn,1)}}" checked>
XYZ
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="{{generateRadioOptionName(stn)}}"
id="{{generateRadioOptionId(stn,2)}}">
ENU
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance!
You are missing <form> tag, also your html is a bit "untidy" - you should close <input> tags
Working example :
http://jsfiddle.net/michal_taborowski/L77x525s/
ng-controller="..." and ng-repeat="..." should swap places.
I'm having a similar issue, and the wierd thing is is that it works with Angular 1.0.2, but as soon as I upgraded to 1.4.8, it stopped working correctly. What I'm hoping the behavior to be is that all the radio groups should have a preset item selected, but what is happening is that only the last group in each panel is being selected
Please see jsfiddle
This is the html
<body ng-controller="Channels" class="container-fluid">
<div ng-if="sections===null">
Loading...
</div>
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<table class="table">
<thead>
<th class="col-md-6">Name</th>
<th class="col-md-2 text-center">Read</th>
<th class="col-md-2 text-center">ReadWrite</th>
<th class="col-md-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-md-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-md-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-md-2 text-center radio">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-md-2 text-center radio">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>