I have a form that collects information on 15 participants, and based on a Class selected for each participant 3 drop down boxes (Events) are populated. Originally I had a drop down box to select the Class and I have changed to a textbox. However I cannot figure out how to associate the variable with the text box (instead of dropdown) with the Class for each participant. This is the part of function I am having trouble with: var class_id = class_dropdown.value; I have read other similar posts but cannot figure out how they associated text box and name in variable.
This is the form:
<form name="myform" method="post" action="insert_entries.php">
<table style="width: 139%" align="center">
<tr>
<td class="style2" style="width: 166px"><strong>FIRST NAME</strong></td>
<td class="style2" style="width: 161px"><strong>LAST NAME</strong></td>
<td class="style2" style="width: 66px"><strong>GENDER</strong></td>
<td class="style2" style="width: 224px"><strong>DOB</strong></td>
<td class="style2" style="width: 74px"><strong>CLASS</strong></td>
<td class="style2" style="width: 104px"><strong>EVENT 1</strong></td>
<td class="style2" style="width: 104px"><strong>EVENT 2</strong></td>
</tr>
<tr>
<td style="width: 166px">
<input type="text" name="first1" size="35" style="width: 155px" /></td>
<td style="width: 161px">
<input type="text" name="last1" size="35" style="width: 155px" /></td>
<td style="width: 66px">
<select name="gender1" class="dropdownbox" id="series id15"style="height: 23px; width: 70px">
<option></option>
<option>M</option>
<option>F</option>
</select></td>
<td style="width: 224px">
<input type="date" name="dob1" size="35" onchange = "repeat()" style="width: 155px; height: 27px;" /></td>
<td style="width: 74px">
<input type="text" name="class1" size="35" style="width: 155px" /></td>
<td style="width: 104px">
<select name="events1" class="dropdownbox" id="series id"style="height: 23px; width: 104px">
<option></option>
</select> </td>
<td style="width: 72px">
<select name="events1B" class="dropdownbox" id="series id16"style="height: 23px; width: 104px">
<option></option>
</select> </td>
</tr>
</table>
And this is the function:
<script>
// function to get event list for selected class -
function get_event(class_dropdown)
{
// get selected class value -
var class_id = class_dropdown.value;
// get name of selected class dropdown -
var class_dropdown_name = $(class_dropdown).attr('name');
// get no. appended to class dropdown name -
var class_no = class_dropdown_name.replace ( /[^\d.]/g, '' );
// prepare names of 3 event dropdowns -
var event1 = 'events'+class_no;
var event2 = 'events'+class_no+'B';
var event3 = 'events'+class_no+'C';
// empty 3 event dropdowns -
$('select[name="'+event1+'"]').html('');
$('select[name="'+event2+'"]').html('');
$('select[name="'+event3+'"]').html('');
if(class_id != '')
{
$.ajax({
url:"get_event.php",
type:"POST",
dataType:"json",
data:{class_id:class_id},
success:function(data)
{
var event_option = '';
event_option = event_option+'<option value=""></option>';
for(var i=0; i<data.length; i++)
{
event_option = event_option+'<option value="'+ data[i].eventcode +'">'+ data[i].event +'</option>';
}
// append event list to 3 dropdowns next immediate -
$('select[name="'+event1+'"]').html(event_option);
$('select[name="'+event2+'"]').html(event_option);
$('select[name="'+event3+'"]').html(event_option);
}
});
}
}
</script>
If I understand your issue, you want to run the included Javascript and have the class_dropdown variable populated with a reference to your class1 input.
There are multiple ways to do that, one of possible approaches is to inline the event call in a similar way your other input, the dob1 calls the repeat() function in the onchange inlined handler:
<input type="date" name="dob1" size="35" onchange = "repeat()" ...
The similar approach here would be to pick one the change event that occurs when the input value is changed or the blur event that occurs when the focus is taken away from the input. Then, inline the handler call passing this as the reference to actual input:
<input name='class1' onblur="get_event(this)" />
In the example call from above, the get_event is called whenever the focus is taken away from the input and the get_event is called passing the class1 reference to the method.
You can verify this in the following playgound. Just type whatever you want and focus out of the textbox. The message will display the actual value of the input.
function get_event(class_dropdown) {
var text = class_dropdown.value;
alert(text);
}
<input name='class1' onblur="get_event(this)" />
Related
I am creating one JSP page in which there is a textfield and button. If user enters some integer value lets say 2 in textfield, then 2 rows will be appended in Html table at last. So the rows of HTML table are being created dynamically.
I am implementing this using ajax call to a page which has <tr> data which is to be added to the main table after last row.
Everything is working fine. Rows are created dynamically using ajax call. But the problem is that all rows added to table have same column name attributes.
Below is my code:
main JSP page:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.table {
font-size: 11px;
}
#dailyTableDiv {
height: 70%;
overflow: scroll;
}
</style>
<script>
function addTask(){
var n=$("#dailytsks").val();
for(i=1;i<=n;i++){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
//------------------------------
// i am trying this code to set different names for different select box column.
//but this is not happenting.
for(i=1;i<=n;i++){
$("#chSelect").attr("name","chSelect"+i);
}
//------------------------------
}
function add1Row(){
$.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
$('#dailyTable tr:last').after(result);
}});
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="well">
<input type="text" id="dailytsks" name="dailytsks" /><input
type="button" name="addTsks" value="add" onclick="addTask();" /> <span
style="margin-left: 20px;"></span><input type="button" value="+"
id="add1" name="add1" onclick="add1Row();" /> <span
style="margin-left: 20px;"></span><input type="button" value="-"
id="minus" name="minus" />
</div>
</div>
<div class="container-fluid">
<div id="dailyTableDiv">
<table id="dailyTable" class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Date</th>
<th>Client Name</th>
<th>Task-Type</th>
<th>NBPE-Type</th>
<th>Task-Name</th>
<th>Planned-Hrs</th>
<th>Priority</th>
<th>Cross-Team</th>
<th>Current-Status</th>
<th>Is-Completed</th>
<th>Actual-Hrs</th>
<th>SMC-ID</th>
<th>SMC-URL</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
dailyTableRow.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<tr>
<!-- -------------------------------------------------------------------- -->
<!-- currently I am trying to set unique name for Select column only so i hv given it a ID -->
<td><input type="checkbox" id="chSelect" name="chSelect" /></td>
<!-- -------------------------------------------------------------------- -->
<td width="3"><input type="text" style="max-width: 80px;"
name="tskDate" /></td>
<td><select name="cliName">
<option>select client</option>
<option>RWS</option>
<option>Orgbase</option>
<option>RW-MAAS</option>
<option>WSO2</option>
</select></td>
<td><input type="checkbox" name="chTskType" />NBPE?</td>
<td><select name="tskNBPEType">
<option>select NBPE type</option>
<option>meeting</option>
<option>on leave</option>
<option>mom</option>
</select></td>
<td><input type="text" name="tskName" /></td>
<td><input type="text" style="max-width: 15px;" name="plndHrs" /></td>
<td><select name="tskPriority">
<option>select priority</option>
<option>low</option>
<option>med</option>
<option>high</option>
</select></td>
<td><input type="text" style="max-width: 80px;"
name="crosTeamMate" /></td>
<td><select name="curStatus">
<option>select status</option>
<option>on hold</option>
<option>in progress</option>
<option>completed</option>
</select></td>
<td><input type="radio" name="isCompleted" value="N">No <br>
<input type="radio" name="isCompleted" value="Y">Yes</td>
<td><input type="text" style="max-width: 15px;" name="actHrs" /></td>
<td><input type="text" style="max-width: 80px;" name="smcID" /></td>
<td><input type="text" style="max-width: 160px;" name="smcURL" /></td>
<td><textarea name="comment" rows="3" cols="10"></textarea></td>
</tr>
here all columns have same name which is wrong.
how can I make unique name attribute pairs for the column in rows which are added. Currently, as seen in the code I am only trying to set unique name attribute values to Select column only. But I am not able to do.
I want something like:
if name of column is "chSelect" then for two rows, it should become as :
chSelect1 & chSelect2, respectively.
This might help you
HTML:-
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
<input type="checkbox" name="chSelect" class="chSelect" />
JAVASCRIPT:-
var i = 0;
$('.chSelect').each(function () {
$(this).attr('name', "chSelect"+i);
i++;
});
LINK :-
https://jsfiddle.net/ft0uefaL/
The basic idea is to store the row number in a global variable that you'll increase each time you add a row via Ajax.
When your Ajax calls resolve, you parse the resulting html (result) using JQuery, change the name property of the chSelect element, and append the change to the last tr as you did previously:
// add a global variable to store row number
var row = 0;
function addTask(){
var n = $("#dailytsks").val();
var max = parseInt(n);
for(i=1; i<=max; i++){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
}
function add1Row(){
$.ajax({
url: "employeeSection/dailyTableRow.jsp",
success: function(result){
row += 1;
var newName = "chSelect" + row;
var html = $('<div>').append(result);
$(html).find("#chSelect").attr("name", newName)
$('#dailyTable tr:last')
.after( html.html() )
}
});
}
I have a list of textboxes as follows :
` <table id="div1" style="width:100%;">
<tr>
<td>
<label>Question Text</label>
</td>
<td colspan="5">
<textarea rows="4" cols="500" name="questiontext" id="questiontext" > <?php print $view->questions->getQuestion_Text() ?></textarea>
</td>
</tr>
<tr>
<td> <label>Option a) </label></td>
<td colspan="5"> <textarea rows="1" cols="200" name="Optiontext[]" id="text1"> </textarea> </td>
</tr>
<tr>
<td> <label> Option b) </label></td>
<td colspan="5"> <textarea rows="1" cols="200" name="Optiontext[]" id="text2"> </textarea> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>`
I need to pass the values to a jquery function as follows :
$(document).ready(function(){
$('#question').live('submit',function(){
var params={};
params.action='saveQuestion';
params.questionid=$('#questionid').val();
params.questiontext=$('#questiontext').val();
return false;
})
});
My question is how do i pass the values of the textarea to the jquery function as textarea can be dynamically created.
I tried to access the values of textarea directly in php as follows but the values are not passed:
$option_key = 1;
for($i = 0;$i<= count($_POST['Optiontext']);$i++){
$option = $_POST['Optiontext'][$i];
if(isset($option))
{
$query_options="INSERT INTO `XXX`(`Question_ID`, `Option_Key`, `Option_Value`) VALUES ($max_id,'$option_key','$option')";
$sql = mysql_query($query_options)or die($query_options."<br/><br/>".mysql_error());
$option_key = $option_key + 1;
}
}// for loop ends
The contents of each textarea are posted to the form as a comma-delimited variable called 'Optiontext[]'.
Since commas can be added in the textareas, it could get interesting trying to split the data back into the correct fields! Possibly a better solution would be a finite number of textarea fields with unique names, or dynamically create them as needed using javascript/jQuery.
I was able to pass the value of textboxes by map function as follows
$(document).ready(function(){
$('#question').live('submit',function(){
var params={};
params.action='saveQuestion';
params.questionid=$('#questionid').val();
params.questiontext=$('#questiontext').val();
var Optiontext = [];
Optiontext = $('textarea[name^="Optiontext\\["]').map(function() {
var value_textarea = $(this).val();
if(value_textarea && value_textarea != ' ')
{
return $(this).val();
}
}).get();
params.Optiontext=Optiontext;
return false;
}) });
I have several start and end dates in my system, in some cases I have several start and end dates in a screen. All of them are grouped in sets of two and have the same behaviour: the start date can't be greater than the end date and the difference between them can't be greater than a user-entered input.
I know that i have to create two methods, one for validating the first case and other for the second case. The problem is that I don't know how to reference the fields, for example:
// A custom method for validating the date range.
$.validator.addMethod("dateRange", function() {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
return isDate(startDate) && isDate(endDate) ? Date.parse(startDate) <= Date.parse(endDate) : true;
});
The problem is: this way I hard-coded the input names. This would work if I had only one set of dates per screen, but when I have more than one this won't work. How do I create a method without hard-coding the IDs of the elements that I want to use so as to use it all around the system?
I've read the online documentation in http://jqueryvalidation.org/jQuery.validator.addMethod/ but does seem to handle my problem and I think using groups wouldn't be enough to handle all elements, I probably would have to copy/paste for each set of dates.
I believe if you help me with one of the cases the second will be resolved using the same logic.
EDIT: As requested, here's the HTML
<table width="95%" id="tabela_interna">
<thead><tr valign="middle"><th colspan="6">Relatório Internações Concierge</th></tr></thead>
<tbody>
<tr valign="middle">
<td width="11%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data Solicitação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data"/>
</td>
<td width="11%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data Solicitação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data"/>
</td>
</tr>
<tr valign="middle">
<td width="11%" align="left" class="td_label"><label for="dataInicialLiberacao">Data Liberação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialLiberacao" size="12" value="" id="dataInicialLiberacao" class="data"/>
</td>
<td width="11%" align="left" class="td_label"><label for="dataFinalLiberacao">Data Liberação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalLiberacao" size="12" value="" id="dataFinalLiberacao" class="data"/>
</td>
</tr>
<tr valign="middle">
<td width="11%" align="left" class="td_label"><label for="dataInicialInternacao">Data Internação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialInternacao" size="12" value="" id="dataInicialInternacao" class="data"/>
</td>
<td width="11%" align="left" class="td_label"><label for="dataFinalInternacao">Data Internação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalInternacao" size="12" value="" id="dataFinalInternacao" class="data"/>
</td>
</tr>
</table>
I tend to do this using custom attributes, e.g.:
<input type="text" id="x" data-validate-date="true" data-validate-against="y" value="01/01/2000" />
<input type="text" id="y" value="1/1/2001" />
<input type="text" id="a" data-validate-date="true" data-validate-against="b" value="01/01/2000" />
<input type="text" id="b" value="4/4/2020" />
You can then define your validation rule something like:
$.validator.addMethod("dateRange", function() {
var allValid = true;
var results = [];
var datesToValidate = $("[data-validate-date]");
for(var i = 0; i < datesToValidate.length; i++) {
var d = datesToValidate[i];
var startDate = $(d).val();
var endDateSelector = "#" + $(d).attr("data-validate-against");
var endDate = $(endDateSelector).val();
results[i] = isDate(startDate) && isDate(endDate) && (Date.parse(startDate) <= Date.parse(endDate));
}
for(var j = 0; j < datesToValidate.length; j++) {
if(!(results[j] == true)) {
allValid = false;
}
}
return allValid;
});
I don't know if that's the best way to do it, but I think it could work for you.
I used the approach suggested by Blazemonger and created a method based on equalTo.
$.validator.addMethod("startDateCantBeGreaterThanEndDate", function(value, element, param) {
var target = $(param);
if (this.settings.onfocusout) {
target.unbind(".validate-startDateCantBeGreaterThanEndDate").bind("blur.validate-startDateCantBeGreaterThanEndDate", function() { $(element).valid(); });
}
value > target.val();
});
And used the method the same way equalTo does:
$("form").validate({
rules: {
"filtro.dataInicialSolicitacao": { startDateCantBeGreaterThanEndDate: "#dataFinalSolicitacao" },
},
messages: {
"filtro.dataInicialSolicitacao": { startDateCantBeGreaterThanEndDate: "Type your custom message." },
}
});
Hi i want to show textboxes one by one on tab press.
First i need t display 1 textbox then after pressing tab 2nd textbox will display with focus .then 3rd and 4th with same process.
I am able to display textboxes but after 1st textbox when i press tab instead of textbox ,all textboxes are displaying.
Here is my code:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('newOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep5();" /></td>
</tr>
</tbody>
</table>
this might be what you are looking for.. http://jsbin.com/oBeritE/1
here's the code.. remove the onblur="" scripts.. jQuery can handle events..
// the next step to be shown
var nextStep = 2 ;
// first 2 blank to equal with nextStep..
var focusArr = ['', '' ,'newOrdQuan' , 'takeOutAmt', 'compsPerWeek','avgProfitPerOrder'];
// put your do functions inside the function() {} ..
var doFuncs = {
do1 : function() {
//alert('function 1') ;
} ,
do2 : function() {
//alert('put function 2 ' );
},
do3 : function() {
//alert('function 3 here' ) ;
},
do4 : function() {
//alert('function 4 here' ) ;
}
};
// storing functions in array..
// first two zeros to equal with nextStep..
var doArr= [0,0] ;
var i = 2 ;
for(var d in doFuncs ) {
doArr[i] = d ; i++ ;
}
// simple function to show steps..
function showStep(index) {
$('#step' + index).css('visibility','visible');
// focus next textbox ..
$('#' + focusArr[index]).focus() ;
// the apporipriate function will be called...
doFuncs[doArr[index]]() ;
}
$(document).ready(function() {
// put focus on first
$('#prevOrdQuan').focus();
// check for keypress
$('body').bind('keyup',
function(e){
// all you need is tab, right? so we call showStep whenever it is pressed..
if(e.keyCode === 9) {
showStep(nextStep) ;
nextStep++ ; }
// remove checking for keypress after all steps have finished
if(nextStep > 6) $('body').unbind('keyup') ;
});
});
I know this is proboly the most asked question out there but I have scoured the net and tried several examples and none of them have worked. Here is my issue.
First I have no control over the TR TD structure, can't use DIV.
I need to be able to display certain TD's based on the select dropdown menu value. I have 4 different id's I am using "to", "to_field", "from", "from_field". The script I have shown is not working. Can someone help me out?
Example: If someone selects "In Use" in the dropdown then I just want all the elementID that have "from" and "from_field" to display only. If someone selects a different value then I would like to change that around.
<script type="text/javascript">
function showstuff(element){
document.getElementById("from").style.display = element=="in_use"?"visibility":"visible";
document.getElementById("to").style.display = element=="in_use"?"visibility":"hidden";
document.getElementById("from_field").style.display = element=="in_use"?"visibility":"visible";
document.getElementById("to_field").style.display = element=="in_use"?"visibility":"hidden";
document.getElementById("from").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("to").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("from_field").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("to_field").style.display = element=="relocated"?"visibility":"visible";
}
</script>
<table>
<tr>
<td><h2>Add/Edit Parts</h2></td>
</tr>
</table>
<form action="includes/inventory_parts.php" method="post" name="myform">
<table cellpadding="10" style="border:solid 1px #000000">
<tr>
<td colspan="20"><h3>Add New Part</h3></td>
</tr>
<tr>
<td style="font-weight:bold">Printer Man Part#</td>
<td style="font-weight:bold">Part#</td>
<td style="font-weight:bold">Title</td>
<td style="font-weight:bold">Serial#</td>
<td style="font-weight:bold">Status</td>
<td id="from" style="font-weight:bold;visibility:hidden">From Printer Serial#</td>
<td id="to" style="font-weight:bold;visibility:hidden;">To Printer Serial#</td>
<td style="font-weight:bold">Submit</td>
</tr>
<tr>
<td><input type="text" name="printer_man_part_number" /></td>
<td><input type="text" name="part_number" /></td>
<td><input type="text" name="title" /></td>
<td><input type="text" name="this_part_serial_number" /></td>
<td>
<select name="status" onchange="showstuff(this.value);">
<option></option>
<option value="in_use">In Use</option>
<option value="relocated">Relocated</option>
<option value="disposed">Disposed</option>
<option value="selling">Selling</option>
</select>
</td>
<td id="from_field"><input type="text" name="from" style="visibility:hidden" /></td>
<td id="to_field"><input type="text" name="to" style="visibility:hidden" /></td>
<td><input type="submit" name="submit" value="Add Part" /></td>
</tr>
</table>
</form>
function showstuff(element) {
// first hide everything
document.getElementById("from").style.visibility = 'hidden';
document.getElementById("to").style.visibility = 'hidden';
document.getElementById("from_field").style.visibility = 'hidden';
document.getElementById("to_field").style.visibility = 'hidden';
var targets;
// select the IDs that should be unhidden based on element
switch (element) {
case 'in_use': targets = ['from', 'from_field']; break;
case 'relocated': targets = ['to', 'to_field']; break;
...
}
// now unhide the selected IDs.
for (var i = 0; i < targets.length; i++) {
document.getElementById(targets[i]).style.visibility = 'visible';
}
}