I am having an issue getting jquery timepicker change event to trigger. I need to update a field immediately after selecting a time. Here is the code thus far
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<script>
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
This is abbreviated code but it should still do what I am trying to get it to do. What I need it to do is on a time select the inpute with the ID d_time should update the default value as described in the above function but for some reason I can't get it to trigger. Before I was using a select option for the time and it was working fine, this method I am clueless.
I don't use javascript or jquery often, a little help would be appreciated. I read the documentation on the change event but it didn't really help.
Thanks in advance.
You can trigger your action thanks to the "changeTime" event of timepicker.js (doc). Btw, your timepicker.js version was old.
So you can try this :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script>
<script>
$('document').ready(function(){
$('#time').timepicker();
$('#time').on('changeTime', function() {
var x = $("#time").val();
$('#d_time').val("Maintenance Tonight - " +x);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if ($('#default').is(':checked')) {
$('#default_subject').css('display','block');
$('#custom_subject').css('display','none');
}
else if ($('#custom').is(':checked')) {
$('#custom_subject').css('display','block');
$('#default_subject').css('display','none');
}
}
</script>
<td>
<input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="default" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" type="text" value="custom"/>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
put the on change function on a document ready
$( document ).ready(function() {
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
}
the thing is that the element is not created in the time you fire the functon so you need to wait untill the document is ready or put this function at the end of the document.
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
try this
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
because getElementByName is not function use getElementsByName instead with index of first element
Related
The issue is with the line total += parseInt($(el).val()); If e.g. parseInt($(el).val()) holds the value 200 (which I confirmed with an alert) the value set to Total is NaN.
If I remove the + so that total = parseInt($(el).val()); then total will return the value 200 and not NaN.
Can anyone see what's causing this NaN issue?
Thanks
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function() {
//open callback contents
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
alert("total=" + total);
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents
}); //close callback function
});
}); //close jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div>
<!--close row-->
</div>
<!-- close container -->
</main>
</body>
</html>
Loaded in file below: includes/inc_1_working.html
<table width="100%" id="form1">
<tr><div id="test"></div>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price1
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id='sum'>0</div>
</td>
</tr>
</table>
remove arrow fuction jquery ready
add old style work for me
Replace parseInt() with Number()
Solution:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function(){
//open callback contents
//hide all values
$("#targetPane input, #targetPane select").each(function(i, el) {
$($(el).data("rel")).hide();
});
function getTotal() {
var total = 0;
$("#targetPane input, #targetPane select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('select #courses').change(function() {
$($(el).data("rel")).hide(getTotal());
});
$('#targetPane input[type="checkbox"], #targetPane select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents
}); //close callback function
});
}); //close jQuery
</script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="0" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div> <!--close row-->
</div> <!-- close container -->
</main>
</body>
</html>
I cannot edit the rows that are newly added. I have included the class in the newly added row. But when I click the edit button in the newly added row, its not working. Also the edit button is not working once I edit the row. I can't edit the same row two times. The function is not calling when I click the button edit.
Can u guys help me out?
Following is the reproduction of my issue -
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$('.edit').on('click',(event)=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
Can I do without using onclick() ? How to do so?
The problem is that when you load the onclick listeners for .edit there you have only two buttons, and the script don't know news rows.
If you will add dynamically rows it need another context to can execute it.
Just replace this:
$('.edit').on('click',(event)=>{...})
by
$("tbody").on("click", ".edit", (event) =>{...})
Update:
you could take name & age when you open the edit box like this:
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$("tbody").on("click", ".edit", event => {
let $btnParentSiblings = $(event.currentTarget).parent().siblings('td')
let $name = $btnParentSiblings[1];
let $age = $btnParentSiblings[2];
$("#popup > #name").val($($name).html());
$("#popup > #age").val($($age).html());
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
because your JavaScript code is running once the document is fully loaded and at that moment searches for all elements with edit class and assign their click event the editing method. so when you add a new element you must manually assign the method to its edit button.
I have the below code wherein enabling and disabling of text box is not working:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<!-- JQuery 1.12.3 JS -->
<script src="../js/jquery-1.12.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td><label class="control-label">Mode</label></td>
<td>
<label><input type="radio" name="payMode" value="cash" checked>Cash</label>
<label><input type="radio" name="payMode" value="cheque">Cheque</label>
</td>
</tr>
<tr>
<td><label>Cheque No</label></td>
<td><input type="number" name="chequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
</tr>
<tr>
<td><label>Cheque Date</label></td>
<td><input type="date" name="chequeDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
</tr>
</table>
<script>
<script>
$(':radio[name=payMode]').change(function () {
var prop = this.value == 'cash';
$('input[name=chequeNo], input[name=chequeDate]').prop({ disabled: prop, required: !prop });
});
</script>
</body>
</html>
Basically I am trying to enable 2 textboxes based on the radio click. Enable Cheque No and Cheque Date textbox if the user selects the Pay Mode as Cheque. If the user selects cash then disable the 2 textboxes. Please advice
You have two starting script tags, the inner script tag will cause a javascript error.
EDIT
Here is the link to the JSFiddle that proves it, I only removed the duplicate tag. Sometimes the simple answers are the best :)
https://jsfiddle.net/0k98xnch/
<script>
$(':radio[name=payMode]').change(function () {
var prop = this.value == 'cash';
$('input[name=chequeNo], input[name=chequeDate]').prop({ disabled: prop, required: !prop });
});
</script>
Example below shows when user change "payMode" radio button, Enable Cheque No and Cheque Date textbox if the user selects the Pay Mode as Cheque. If the user selects cash then disable and empty the 2 textboxes.
$("input[name=payMode]").on("change", function(){
if($(this).val() == "cheque"){
$("input[name=chequeNo], input[name=chequeDate]").attr("disabled", false);
}else{
$("input[name=chequeNo], input[name=chequeDate]").val("").attr("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<!-- JQuery 1.12.3 JS -->
<script src="../js/jquery-1.12.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td><label class="control-label">Mode</label></td>
<td>
<label><input type="radio" name="payMode" value="cash" checked>Cash</label>
<label><input type="radio" name="payMode" value="cheque">Cheque</label>
</td>
</tr>
<tr>
<td><label>Cheque No</label></td>
<td><input type="number" name="chequeNo" pattern="^[0-9]" min="0" step="1" class="form-control" placeholder="Enter Cheque No" disabled></td>
</tr>
<tr>
<td><label>Cheque Date</label></td>
<td><input type="date" name="chequeDate" class="form-control" placeholder="Enter Cheque Date" disabled></td>
</tr>
</table>
</body>
</html>
I'm dynamically creating a table and trying to make each row (tr) sortable. I've followed the various documentation on the jQuery UI site and thought I understood. However, I can't quite seem to figure it out.
Where did I go wrong? Thanks!
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen">
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript>" href="jquery-ui.js"></script>
<script type="text/javascript" href="bootstrap-2.2.2.min.js"></script>
<script>
$(function() {
$( "tr" ).sortable();
$( "tr" ).disableSelection();
});
</script>
</head>
<body>
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<tr>
<td>Session Title</td>
<td>Start Time</td>
<td>End Time</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr />');
$tr.append($("<td />", { text: $("#session_title").val()} ))
$tr.append($("<td />", { text: $("#start_time").val()} ))
$tr.append($("<td />", { text: $("#end_time").val()} ))
$tr.appendTo("table");
$("#agenda_form").each(function (){
this.reset();
});
});
</script>
</body>
</html>
You need to use tbody instead of tr in your jquery selection. i would also suggest makeing your headers in a theader block --- http://jsfiddle.net/rcottkqx/1/
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time
<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<thead>
<th>Session Title</th>
<th>Start Time</th>
<th>End Time</th>
</thead>
</table>
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr class="t" />');
$tr.append($("<td />", {
text: $("#session_title").val()
}));
$tr.append($("<td />", {
text: $("#start_time").val()
}));
$tr.append($("<td />", {
text: $("#end_time").val()
}));
$tr.appendTo("table");
$("#agenda_form").each(function () {
this.reset();
});
$("tbody").sortable();
$("tbody").disableSelection();
});
I have this form, it works fine but I need the tos2 checkbox to be as disabled until the user clicks to show the TOS. Only then the user will be able to check the checkbox.
If anyone can give me a hint go get this working, it will be great.
Thanks in advance.
<?php
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#form1").validate();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideToggle("slow");
});
});
</script>
<script type="text/javascript">
$(document).ready(function($) {
$("input[name$='enable']").click(function(){
if ($(this).is(':checked')) {
var remove = '';
$('input.textbox:text').attr ('value', remove);
$('input.textbox:text').attr("disabled", true);
$('input.textbox:checkbox').attr("disabled", true);
}
else if ($(this).not(':checked')) {
$('input.textbox:checkbox').attr("disabled", false);
$('input.textbox:text').attr("disabled", false);
}
}); });
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
<div id="content" align="center">
<div id="wrapper" style="width:550px !important;">
<form method="post" action="inserting-process.php" id="form1" onsubmit="return validateForm()" class="signupform" name="signupform">
<input type="hidden" name="allowlang" id="allowlang" value="no" />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="enable" id="enable" value="" style="width:15px !important"/>
The package has not been received.</td>
</tr>
<tr>
<td><input type="checkbox" name="2enable" id="3enable" value="SI" style="width:15px !important"/>
There has been an issue.</td>
</tr>
</table>
<br />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td width="120px"><strong>Name:</strong></td>
<td><input type="text" name="fname" id="fname" class="textbox required" size="30"/></td>
</tr>
</table>
<br />
<h4 align="left" style="padding-left:5px; color:#d40000;">TOS
</h4>
<div id="showHideDiv" style="display:none;">
<p align="left" style="padding-left:5px;">
Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service
</p>
<br />
</div>
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important" class="textbox required" />
I agree with the TOS.</td>
</tr>
<tr>
<td height="50"></td>
<td> <br /><button id="registerButton" type="submit" style="float:left;">Send Data</button></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
First of all, set your checkbox disabled as default:
<input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important" class="textbox required" disabled="disabled" />
In your JS function, when you show the text at "display:block;" you also enable checkbox:
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
document.getElementById("tos2").disabled = false ;
}
}
Here's all working: http://jsfiddle.net/3ELhv/
Now user only can select this checkbox when open the TOS
é #TOISS