jquery star plugin not working after ajax call - javascript

I have one JSP in that JSP i have a for loop. inside the for loop i am printing stars with rating in different cells of table. After making the ajax call, stars are not coming. Just the radio buttons are coming I am using this plugin http://www.fyneworks.com/jquery/star-rating/. Here is my step by step code. I have removed some part to make it simple.
First JSP code :
<div class="book-right" id="ajaxTest">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rating.js"></script>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<--table + some intermediate loop code --->
<c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
<div>
<input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star" />
<input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star" />
</div>
<input type="hidden" id="avgRating" name="avgRating" value="${leg.courierProduct.rating}"></input>
<script>
var avgRating = $('#avgRating').val();
$('.rating-star').rating('select', avgRating);
</script>
</c:forEach>
Here is my ajax call :
function loadXMLDoc()
{
var xmlhttp;
var filtervalue=document.getElementById('filter1').value;
var url="FilterRender?filtervalue="+filtervalue;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ajaxTest").innerHTML=xmlhttp.responseText;
var preference = document.getElementById("pref_id").value;
if(preference== '1')
{
$("#myTable").tablesorter({
sortList : [[2,0]],
headers: {
0: {
sorter: false
},
4: {
sorter: false
} } });
}
else if(preference== '2')
{
$("#myTable").tablesorter({
sortList : [[1,0]],
headers: {
0: {
sorter: false
},
4: {
sorter: false
} } });
}
else
{
$("#myTable").tablesorter({
headers: {
//make the first column un-sortable
0: {
sorter: false
},
//make the fourth column un-sortable
4: {
sorter: false
} } });
}
var avgRating = $('#avgRating').val();
alert('called');
$('.rating-star').rating().rating('select', avgRating );
$('.rating-star').rating('readOnly',true);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
After the Ajax call i am loading this div:
<div class="book-right" id="ajax">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src = "js/jquery.rating.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<c:choose>
<c:when test="${fn:length(routes) == 1 and fn:length(routes[0].options) == 0}">
<div style="padding:216px;width:800px !important">
<span style="font-size: 20px; font-weight: bolder;margin: 90px;">Sorry! Currently we have no service found for this route.</span>
</div>
</c:when>
<c:otherwise>
<table id="myTable" class="tablesorter" width="769" border="0" cellspacing="0" cellpadding="0" class="sortable">
<thead>
<tr>
<th width="24%" height="67" align="center" bgcolor="#f7f6f6">
<span class="ser service"> Service Provider</span>
</th>
<th width="21%" height="67" align="center" bgcolor="#f7f6f6">
<span class = "ser icon1 icon2" >Delivery Time
</span>
</th>
<th width="16%" height="67" align="center" bgcolor="#f7f6f6">
<span class = "ser icon1 icon3">Cost
</span>
</th>
<th width="15%" height="67" bgcolor="#f7f6f6" align="center">
<span class="ser">Ratings </span>
</th>
<th width="17%" height="67" align="center" bgcolor="#f7f6f6">
</th>
</tr>
</thead>
<tbody>
<c:set var="filtervalue" scope="session" value="${param.filtervalue}"/>
<c:forEach var="route" items="${routes}" varStatus="loopCounter">
<c:forEach var="option" items="${route.options}"
varStatus="loopCounter2">
<tr>
<c:if test="${option.duration<=filtervalue}">
<td><div>
<c:forEach var="leg" items="${option.legs}"
varStatus="loopCounter3">
<span class="item"> <img
src="img/vendor_logos/<c:out value="${leg.courierProduct.logoName}" />"></span>
</c:forEach>
</div></td>
<td><span><c:out value="${option.duration}" /> days</span></td>
<td><span class="cost" style="font-size: 23px;"><img
src="img/rs.png">
<c:out value="${option.totalCost}" />/-</span></td>
<td>
<c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
<div>
<input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star"/>
<input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star"/>
</div>
<input type= "hidden" id="avgRating" name="avgRating" value= "${leg.courierProduct.rating}"></input>
<script>
var avgRating = $('#avgRating').val();
alert('called');
$('.rating-star').rating().rating('select', avgRating );
$('.rating-star').rating('readOnly',true)
</script>
</c:forEach>
</td>
<td>
<div id="${loopCounter2}" class="details" >
<span class="det">Details
<span class="fulv">
<div class="col">
<p>Cost - Rs-<c:out value="${option.cost}" /></p>
<p>Service Tax - Rs - <c:out value="${option.serviceTax}"/></p>
<p>Total - Rs - <c:out value="${option.totalCost}"/></p>
</div><!--ocl-->
</span><!--fulv-->
</span>
<span class="book">Book Now</span>
</div>
<!--details-->
</td>
</c:if>
</tr>
</c:forEach>
<!-- <br> -->
</c:forEach>
</tbody>
</table>
</c:otherwise>
</c:choose>
</div>
I have given the full second JSP code (loaded by AJAX) for reference. I am a beginner.Any help will be greatly appreciated. Please ask if any more code needs to be shown

Related

Enable Edit button if new record exists

I created a modal where I can insert new client record and edit the same record. But in relation to the edit button, I wanted it to be active only when there was a new record in the database and until the end of the day it was registered.
<a type="button" name="editar" id="'.$row["IdCliente"].'" data-toggle="modal" href="#add_data_Modal" class="btn btn-primary edit_data">Update</a>
I'm trying this way:
if(isset($_POST["employee_id3"]))
{
$output = '';
$query = "SELECT * FROM centrodb.PsicUtentes LEFT OUTER JOIN centrodb.PsicUtentesConsulta ON centrodb.PsicUtentesConsulta.CodigoUtente2 = centrodb.PsicUtentes.CodigoUtente WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id3"]."' ORDER BY IdConsulta DESC ";
$result = mysqli_query($conn, $query);
$output;
while($row = mysqli_fetch_array($result))
{
$dataAtual = DATE('Y-m-d');
$disabled = "";
if(DATE($row['Data2'])!=$dataAtual){
$disabled = "disabled";
}
$output .= '
<h4 class="modal-title">Histórico de Consultas</h4>
<div>
<button type="button" class="exibir botao" href="#" aria-hidden="true">+</button>
<button type="button" href="#" class="ocultar botao" aria-hidden="true">-</button>
</div>
<div class="conteudo">
<form method="post" id="insert_form6">
<div style="float:right">
<a type="button" name="edit3" id="'.$row["Id"].','.$row["IdConsulta"].'" data-toggle="modal" href="#add_data_Modal3" class="btn btn-primary edit_data3" "$disabled">Editar</a>
</div>
<br/>
<br/>
<br/>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<input type="Hidden" id="IdConsulta1" name="IdConsulta" class="form-control" value="'.$row["IdConsulta"].'" style="width:150px;" readonly="true" />
</td>
<td>
<label>Data Consulta</label>
<input type="text" id="Data23" name="Data2" class="form-control" value="'.$row["Data2"].'" style="width:150px;" readonly="true" />
</td>
<td>
<label>Código Utente</label>
<input type="number" id="CodigoUtente5" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;" readonly="true"/>
</td>
<td>
<label>Nome Utente</label>
<input type="text" id="Nome5" name="Nome" value="'.$row["Nome"].'" class="form-control" style="width:400px;" readonly="true"/>
</td>
<td>
<label>Data Nascimento</label>
<input type="date" id="DataNasc5" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Data Admissao</label>
<input type="date" id="DataAdmissao5" name="DataAdmissao" value="'.$row["DataAdmissao"].'" class="form-control" style="width:150px;" readonly="true"/>
</td>
<td>
<label>Valência</label>
<input type="text" id="ValenciasDescricao5" name="ValenciasDescricao" value="'.$row["ValenciasDescricao"].'" class="form-control" style="width:200px;" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Observação</label>
</p><textarea rows="6" cols="130" readonly="true">'.$row["Descricao"].'</textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>O Psicologo/a</label>
<input type="text" id="Colaborador2" name="Colaborador2" class="form-control" style="width:150px;" value="'.$row["Colaborador2"].'" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
';
}
$output;
echo $output;
}
<script>
$(document).ready(function(){
$(document).on('click', '.edit_data3', function(){
var employee_id3 = $(this).attr("Id");
$.ajax({
url:"./fetch2",
method:"POST",
data:{employee_id3:employee_id3},
dataType:"json",
success:function(data){
$('#IdConsulta').val(data.IdConsulta);
$('#Data22').val(data.Data2);
$('#CodigoUtente6').val(data.CodigoUtente2);
$('#Descricao1').val(data.Descricao);
$('#Colaborador2').val(data.Colaborador2);
$('#employee_id3').val(data.Id);
$('#insert3').val("Gravar");
$('#add_data_Modal3').modal('show');
}
});
});
$('#insert_form7').on("submit", function(event){
event.preventDefault();
if($('#CodigoUtente6').val() == "")
{
alert("Código Utente é necessário");
}
else if($('#Descricao1').val() == "")
{
alert("Observação é necessária");
}
else
{
$.ajax({
url:".conexao9",
method:"POST",
data:$('#insert_form7').serialize()
,
beforeSend:function(){
$('#insert3').val("Inserting");
},
success:function(data){
$('#insert_form7')[0].reset();
$('#add_data_Modal3').modal('hide');
$('#employee_table').html(data);
location.reload("add_data_Modal3");
}
});
}
});
});
</script>
I created a variable with the current date that compares with the date of the record. I created an empty disabled variable. There I put this disabled variable in the link. If the date is different than the current date you put the disabled variable filled.The problem is that the button stays in the same asset.
Firstly your code is vulnerable to sql injection attacks and you should use prepared statements.
Then you have some syntax errors on your code.
The lines $output; are useless, delete them.
Change "$disabled" to '.$disabled'.
and put ?> before your <script> tag.

submit input text into table as <td>

Ive been looking online for super long and I haven't been able to find an answer to something that seems super common.
Basically what I want to do is submit input text and maybe also if a radio button or something like that is checked to popup as text in a table as here are some photos of the inputs and the table.
I want to be able to press the "+" or "add" button and have all the text from the inputs added into the table and if the radio is checked (checked= true(something like that)) for it all to show up in the table when I press the add button.
Here is my HTML for the example photo:
<div class="bg">
<button id="droplist-btn" class="droplist-btn">Add By Droplist</button>
<form>
<input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>
<button type="submit" id="add-item" class="add-item">+</button>
<input type="text" id="color-input" placeholder="color"></input>
<select type="text" id="sizes-item-code" class="sizes-item-code">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">XLarge</option>
<option value="One Size">One Size</option>
</select>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label for="switch">Any Color</label>
</form>
<table id="items-table">
<!--<caption>Task</caption>-->
<tr>
<th>Item</th>
<th>Size</th>
<th>Options</th>
</tr>
<tr>
</tr>
</table>
<label id="item-code-label">Item Code</label>
<!-- idk what happened here -->
<label class="radio">.
<input type="radio" checked="checked" name="radio">
<span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
<input type="radio" name="radio">
<span class="check-keyword"></span>
</label>
</div>
<script src="jquery.js"></script>
<script src="items.js"></script>
</body>
</html>
I have tried to add both of the answers below to my other script and none of them are working here is the html for my differnt table:
<table id="proxy-list">
<tr>
<!--<th>Name</th> -->
<th colspan="3">Proxies</th>
</tr>
<tr>
<td>Proxy1:</td>
<td>174.32.116.214:87</td>
<td>
<button class="remove-btn"><div class="thex">x</div></button>
</td>
</tr>
</table>
<input type="text" id="proxy-add-name" placeholder="Name"></input>
<input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
<button id="proxy-add" onclick="addProxy()">Add</button>
Any help is appreciated thank you.
(I Know my html code is very messy im very knew to html and am still learning)
(jQuery is preferred but as I said anything helps)
Just update the start of addRow
function addRow() {
var item_text = 1; // $('#item-code-input').val() ???
var size_text = 2;
var options_text = 3;
$('#main-table').append('<tr>'
+'<td>'+item_text+'</td>'
+'<td>'+size_text+'</td>'
+'<td>'+options_text+'</td>'
+'</tr>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main-table">
<tr>
<th>Item</th><th>Size</th><th>Options</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
This is using your code - BTW I added id="switch" for the checkbox input (to link to for="switch") For options it only takes into account "Any Colour" though. The "+" button makes it add rows. I used "return false" to stop the form from submitting when the + button is clicked.
function addRow() {
var item_text = $('#item-code-input').val();
var size_text = $('#sizes-item-code').val();
var options_text = $('#switch').is(':checked') ? 'Any Color' : '';
$('#items-table').append('<tr>'
+'<td>'+item_text+'</td>'
+'<td>'+size_text+'</td>'
+'<td>'+options_text+'</td>'
+'</tr>');
}
$(function(){
$('#add-item').click(function(){
addRow();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
<button id="droplist-btn" class="droplist-btn">Add By Droplist</button>
<form>
<input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>
<button type="submit" id="add-item" class="add-item">+</button>
<input type="text" id="color-input" placeholder="color"></input>
<select type="text" id="sizes-item-code" class="sizes-item-code">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">XLarge</option>
<option value="One Size">One Size</option>
</select>
</label>
<label class="switch">
<input type="checkbox" id="switch">
<span class="slider"></span>
</label>
<label for="switch">Any Color</label>
</form>
<table id="items-table">
<!--<caption>Task</caption>-->
<tr>
<th>Item</th>
<th>Size</th>
<th>Options</th>
</tr>
<tr>
</tr>
</table>
<label id="item-code-label">Item Code</label>
<!-- idk what happened here -->
<label class="radio">.
<input type="radio" checked="checked" name="radio">
<span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
<input type="radio" name="radio">
<span class="check-keyword"></span>
</label>
</div>
<script src="jquery.js"></script>
<script src="items.js"></script>
</body>
</html>
Try this out. Not efficient but it covers what you want to do
function add() {
let table = document.getElementById("theTable")
let fd = new FormData(myForm)
let output = ""
for(let data of fd.entries()) {
output += "<td>"+data[1]+"</td>"
}
output = "<tr>"+output+"</tr>"
table.innerHTML += output
}
<form id=myForm>
<input name="name" value="John" />
<input name="age" value="32" />
<input name="lang" value="en" />
<input type=button onclick="add()" value="+"/>
</form>
<table width="100%" border=1 id="theTable">
</table>

How to get and submit the selected item(s) in shopping cart?

How to get and submit the selected item(s) in shopping cart?
Below is my demo,
there are 2 questions:
1、At present,I can only get one item manually,how to get all the selected item(s)?
2、If nothing was selected,I want the button "submit" to be disable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
<table class="table">
<thead>
<tr>
<th class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="selectAll" id="selectAll">
<span class="c-indicator"></span>Select All
</label>
</th>
<th class="col-xs-5">Name</th>
<th class="col-xs-4">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Apple</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Pear</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Peach</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
</tr>
</tbody>
</table>
<button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script>
//Select all
$("#selectAll").change(function () {
if ($(this).is(":checked")) {
$(".checkboxSelection").each(function () {
$(this).prop('checked', true);
});
}
else {
$(".checkboxSelection").each(function () {
$(this).prop('checked', false);
});
}
});
$(".checkboxSelection").change(function () {
var allSelected = true;
$(".checkboxSelection").each(function () {
if (!$(this).is(":checked")) {
$("#selectAll").prop('checked', false);
allSelected = false;
}
});
if (allSelected)
$("#selectAll").prop('checked', true);
});
</script>
<script>
//Get the value and submit
$(function () {
//Below is getting one of the items,how to get all the selected item(s) ?
var data = {
"name": $("#goods_100").val(),
"number": $("#number_100").val()
};
//ajax submit
$(document).on('submit', '#goodsTable', function (e) {
e.preventDefault();
$("#submit").addClass('disabled');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{ url('/goods/') }}",
cache: false,
data: data,
dataType: "json"
})
.done(function (msg) {
window.location.href = "/goods/success";
})
.fail(function (textStatus) {
$("#submit").removeClass('disabled');
alert('Fail,try again');
});
});
});
</script>
</body>
</html>
Every one of your checkboxes have the same name, so what's happening is:
domainList = on
domainList = on
domainList = on
domainList = on
And only the last one gets sent. You need to add [] to the name to make it an array.
domainList[] = on
domainList[] = on
domainList[] = on
domainList[] = on
That will give the Laravel controller an array instead of just one.
Example:
<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection">
But, you're using these are checkboxes. They have a default value of "on" and only show up in form data when checked. You should definitely add a value to it that represents the item's database row.
For instance:
<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection" value="stackoverflow.com" >
That would return an array of strings
domainList[] = stackoverflow.com
domainList[] = stackexchange.com
domainList[] = serverfault.com
Update your script with below for your second question:
$(document).ready(function(){
if($(".table tr input[type='checkbox']:checked").length > 0)
{
$('#submit').attr("disabled",false);
}
else
{
$('#submit').attr("disabled","disabled");
}
//Select all
$("#selectAll").change(function () {
if ($(this).is(":checked")) {
$(".checkboxSelection").each(function () {
$(this).prop('checked', true);
});
$('#submit').attr("disabled",false);
}
else {
$(".checkboxSelection").each(function () {
$(this).prop('checked', false);
});
$('#submit').attr("disabled","disabled");
}
});
$(".checkboxSelection").change(function () {
var allSelected = true;
$(".checkboxSelection").each(function () {
if (!$(this).is(":checked")) {
$("#selectAll").prop('checked', false);
allSelected = false;
}
});
if (allSelected)
{
$("#selectAll").prop('checked', true);
}
if($(".table tr input[type='checkbox']:checked").length < 1)
{
$('#submit').attr("disabled","disabled");
}
else
{
$('#submit').attr("disabled",false);
}
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
<table class="table">
<thead>
<tr>
<th class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="selectAll" id="selectAll">
<span class="c-indicator"></span>Select All
</label>
</th>
<th class="col-xs-5">Name</th>
<th class="col-xs-4">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Apple</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Pear</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Peach</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
</tr>
</tbody>
</table>
<button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

how to check the default value of a radiobutton tag and display its related contents?

below is the code to check a default value for the radiobutton tag by giving checked="checked", but i am not able to display the related form by default, it can be displayed only when i click on it, how to display anyone of these forms by default ?
HTML:
<form>
<label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>
<label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label>
</form>
<panel method="post" style="visibility:hidden" id="form1" name="form1">
<table style="width:100%;">
<tr>
<th ><span class="dropt">ID Reserve Tracks</th>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
</td>
</tr>
</table>
</panel>
<panel style="visibility:hidden" id="form2">
<table style="width:100%;">
<th ><span class="dropt">MD Reserve Tracks</th>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
</td>
</table>
</panel>
JavaScript:
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='collapse';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='collapse';
document.getElementById("form2").style.visibility='visible';
}
else{
}
}
jsfiddle: http://jsfiddle.net/uLkHk/
Your Html is not well formed, you should improve that.
To make it work as you want, just do not set the option checked in HTML. Then select it in JavaScript, calling the Click method.
See this, I modified a little your HTML, and it works.
<html>
<body>
<form>
<label>
<input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
Definitions</label>
<label>
<input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
Definition</label>
</form>
<form method="post" style="visibility: hidden" id="form1" name="form1">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">ID Reserve Tracks</span>
</td>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<form style="visibility: hidden" id="form2">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">MD Reserve Tracks</span>
</td>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<script>
function displayForm(c) {
if (c.value == "1") {
document.getElementById("form1").style.visibility = 'visible';
document.getElementById("form2").style.visibility = 'collapse';
}
else if (c.value == "2") {
document.getElementById("form1").style.visibility = 'collapse';
document.getElementById("form2").style.visibility = 'visible';
}
else {
}
}
</script>
<script>
document.getElementById('radioOld').click();
//document.getElementById('radioOld').checked = true;
//var theDefaultOption = document.getElementById('formselector');
//displayForm(theDefaultOption);
</script>
</body>
</html>
Or you can simply set the default panel's visibility to visible in the HTML as Barmar said.

js function not working in aspx (form validation)

i'm trying to write a form in aspx page includes veification in the submit button.Even if i run debugger clicking the submit doesn't perfom the Js code (or maybe there is a problem in syntax that i dont' know what is it). Can anyone help me find the mistake (either synax of script or something in the html)? thanks alot:)
the code of default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>טופס הרשמה</title>
<link rel="Stylesheet" type="text/javascript" href="style.css" />
<script>
var FinalMsg = "";
function VerifyForm() {
VerUser();
VerPasses();
VerGen();
alert(FinalMsg);
}
function VerUser(){
var vus = document.getElementById("username").value;
if(vus.length=0)
{
FinalMsg+="type username";
}
}
function VerPasses(){
var vpasfir = document.getElementById("pass1").value;
var vpassec = document.getElementById("pass2").value;
if(vpasfir.length=0)
{
FinalMsg+="type password";
}
if(vpassec.length=0)
{
FinalMsg+="type the secondary pass";
}
if (vpasfir.value != vpassec.value)
{
FinalMsg+="passs aren't match";
}
}
function VerGen() {
var vgen1 = document.getElementById("male").value;
var vgen2 = document.getElementById("female").value;
var vgen3 = document.getElementById("other").value;
if ((vgen1.checked==false)&&(vgen2.checked==false)&&(vgen3.checked==false&&)){
FinalMsg += "haven;t chosen gender";
}
}
</script>
</head>
<body dir="rtl">
<center> <img src="Title.gif" width="500px"/></center>
<form id="FormAboutYou" runat="server" method="post" onsubmit="validateForm()">
<table border="0">
<tr>
<td class="field">שם משתמש</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td class="field">סיסמה</td>
<td><input type="password" name="pass1" id="pass1"/></td>
</tr>
<tr>
<td class="field">סיסמה בשנית</td>
<td><input type="password" name="pass2" id="pass2"/></td>
</tr>
<tr>
<td class="field">כתובת דוא"ל</td>
<td><input type="email" name="email" id="email"/></td>
</tr>
<tr>
<td class="field">מזונות מועדפים</td>
<td Class="ChooseFrom">
<input type="checkbox" name="food" value="Choclate" id="choc" /> שוקולד <br />
<input type="checkbox" name="food" value="Fries" id="fries"/> צ'יפס <br />
<input type="checkbox" name="food" value="Tomatoes and other vegetables" id="veg"/> ירקות ופירות <br />
<input type="checkbox" name="food" value="Pasta" id="pasta"/> פסטה <br />
<input type="checkbox" name="food" value="Cheese" id="che"/>גבינה <br />
</td>
</tr>
<tr>
<td class="field">מגדר</td>
<td class="ChooseFrom">
<input type="radio" name="gender" value="Male" id="male"/> זכר <br />
<input type="radio" name="gender" value="Female" id="femle"/> נקבה <br />
<input type="radio" name="gender" value="Unde" id="other"/> עדיין לא החלטתי/יש לי בעיה עם שדות בינארים <br />
</td>
</tr>
<tr>
<td class="field">living in</td>
<td>
<select>
<option value="TelAviv" id="ny">new york</option>
<option value="PetaTikwa" id="rome">rome</option>
<option value="QiryatOno" id="Paris">Paris</option>
<option value="RamgatGan" id="lv">Las Vegas</option>
<option value="Haifa" id="ln">London</option>
<option value="Qraiot" id="bt">Bairut</option>
<option value="Bash" id="bej">Beijing</option>
<option value="Eilat" id="tk">Tokyo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="הזן נתוניך על פני המים" onsubmit="VerifyForm();"/>
</td>
</tr>
</table>
</form>
<hr />
<br /><br /><br /><br />
<br /><br /><br /><br />
</body>
</html>
thanks again :)
An idea could be to take onsubmit() out of the form tag.
then for your button change the onSubmit to onclick='return verifyForm();
In your verifyForm() method you need to return either true or false; if false, the form won't submit.
So, something like this at the end of your verifyForm()
if (FinalMsg == ""){
return true;
}else{
return false;
}

Categories