dojo framework - event doesn't work - javascript

I have a trouble in my code,
I want to send an ajax request by clicking a button,
but the request is automatically run, even when I don't click the button,
here is my code:
<script type="text/javascript">
function set(mode) {
var nomor_awal = dojo.query("input[name=nomor_awal]");
var nomor_akhir = dojo.query("input[name=nomor_akhir]");
var validGetUrl = "";
validGetUrl += "nomor_awal="+objNomorAwal.attr("value")+"&";
validGetUrl += "nomor_akhir="+objNomorAkhir.attr("value");
dojo.xhrPost({
url:"<?php echo base_url(); ?>register_perkara/pidana_biasa/"+mode+"/",
content:{
filter:validGetUrl
},
load:function(response){
(response!="1")? document.location = window.location: null;
}
});
}
dojo.ready(function(){
dojo.connect(dojo.query("input[name=filter]"), "onclick", set("set_filter"));
}
</script>
<table>
<tr>
<td><label for="nomor_awal">Nomor awal</label></td>
<td><input type="text" name="nomor_awal" size="8" value="" /></td>
</tr>
<tr>
<td><label for="nomor_akhir">Nomor akhir</label></td>
<td><input type="text" name="nomor_akhir" size="8" value="" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" name="filter" /></td>
</tr>
</table>
I don't click the filter button but the function are automatically executed, why?

I don't know dojo, but this line
dojo.connect(dojo.query("input[name=filter]"), "onclick", set("set_filter"));
executes the set function and passes the return value to dojo.connect.
You have to pass the function, not call it. So I'm quite sure you want:
dojo.connect(dojo.query("input[name=filter]"), "onclick", function() {
set("set_filter");
});

Related

OCR Web Validation using Javascript

I am a Computing teacher trying to stay one step ahead of my pupils whom are working on a assessment to with validating web forms using HTML and JavaScript. So far, I have managed to do the following but can no longer move forward:
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+='You must enter your name';
document.ExamEntry.name.focus();
document.getElementById("name").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+=' You must enter the subject';
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color="#FF0000";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+=' You must enter the examination number';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000";
result = false;
}
if(document.getElementById("examnumber").value.length!=4)
{
msg+='You must have exactly 4 digits in the examination number textbox';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000"
result = false;
}
function checkRadio() {
var user_input = "";
var len = document.ExamEntry.entry.length;
var i;
for (i=0;i< len;i++) {
if (document.ExamEntry.entry[i].length.checked) {
user_input = document.ExamEntry.entry[i].value;
break;
}
}
if (msg==""){
return result;
}
else
{
alert(msg);
return result;
}
}
function resetForm()
{
document.getElementById('ExamEntry').reset();
document.getElementById("name").style.color="#000000";
document.getElementById("subject").style.color="#000000";
document.getElementById("examnumber").style.color="#000000";
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name='ExamEntry' method='post' action='success.html'>
<table width='50%' border='0'>
<tr>
<td id='name'>Name</td>
<td><input type='text' name='name' /></td>
</tr>
<tr>
<td id='subject'>Subject</td>
<td><input type='text' name='subject' /></td>
</tr>
<tr>
<td id='examnumber'>Examination Number</td>
<td><input type='text' name='examnumber'></td>
</tr>
<tr>
<td id='entry'>Level of Entry</td>
<td><input type='radio' name='entry' value='gcse'>GCSE<BR></td>
<td><input type='radio' name='entry' value='as'>AS<BR></td>
<td><input type='radio' name='entry' value='a2'>A2<BR></td>
</tr>
<tr>
<td><input type='submit' name='Submit' value='Submit' onclick='return (validateForm());'></td>
<td><input type='reset' name='Reset' value='Reset' onclick=' (resetForm());'></td>
</tr>
</table>
</form>
</body>
What I want to do and what I am trying to do are two different things and it's now hit the point where I am banging my head against a brick wall.
What I WANT to do is be able to:
Extend the Javascript code to make sure that the user’s examination number is exactly 4 digits.
Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Can anyone help me before I totally lose the plot?
It's been a long time I have tried pure JS. It's a pleasure to try it out anytime though. So, someone's lukcy and I had some free time. I am a very tiny bit OCD when it comes to coding and I ended up cleaning a lot of your code, such as
Always enclose HTML attributes in double quotes - not a hard rule though.
Always close the input attributes - /> - not a hard rule though.
Define your elements and resue where needed in JS
Alwayst try and keep your JS separate from HTML - it's a good practice.
And follow the good old basics
As a result, here we go:
Demo: Fiddle
HTML:
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="#">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td id="entry">Level of Entry</td>
<td><input type="radio" name="entry" value="gcse" />GCSE<BR></td>
<td><input type="radio" name="entry" value="as" />AS<BR></td>
<td><input type="radio" name="entry" value="a2" />A2<BR></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="resetForm();"></td>
</tr>
</table>
</form>
JS:
var form = document.forms['ExamEntry'];
var iName = form.elements['name'];
var iSubject = form.elements['subject'];
var iExamNumber = form.elements['examnumber'];
var iLevel = form.elements['entry'];
function validateForm() {
var result = true;
var msg = "";
if (iName.value=="") {
msg+='You must enter your name';
iName.focus();
iName.style.color="#FF0000";
result = false;
} else if (iSubject.value=="") {
msg+=' You must enter the subject';
iSubject.focus();
iSubject.style.color="#FF0000";
result = false;
} else if (iExamNumber.value=="" || !/^\d{4}$/.test(iExamNumber.value)) {
msg+=' You must enter a valid examination number';
iExamNumber.focus();
iExamNumber.style.color="#FF0000";
result = false;
} else if(!checkEntry()) {
msg+=' You must select a level';
result = false;
} else {
var cfm = confirm("You have selected " + checkEntry() + ". Are you sure to punish yourself?");
if (!cfm) {
result = false;
}
}
if (!result && msg != "") alert (msg);
return result;
}
function checkEntry() {
for (var i=0; i<iLevel.length; i++) {
if (iLevel[i].checked) {
return iLevel[i].value.toUpperCase();
}
}
return false;
}
function resetForm() {
form.reset();
iName.style.color="#000000";
iSubject.style.color="#000000";
iExamNumber.style.color="#000000";
}
form.onsubmit = validateForm;
form.onreset = resetForm;
First you added the function checkRadio inside of function validateForm
Also, this line
if(document.getElementById("examnumber").value.length!=4)
actually points to this piece of html
<td id='examnumber'>Examination Number</td>
The td element can't hold values... You need to change the line to this:
if (document.ExamEntry.examnumber.value.length!=4) {
This jsfiddle should help you out...

How to use create event on a jQuery dialog in following scenario?

I've have following dialog pop-up HTML which is hidden initially when page loads(look line style="display:none;" in div):
<div id="searchPopContent" class="c-popup" style="display:none;">
<div id="pop-up">
<div class="error_msg" id="report_error" style="text-align:center; margin-top:5px;">
</div>
<div class="clear"></div>
<form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="question_issue.php">
<input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
<input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
<input type="hidden" name="op" id="op" value="question_issue"/>
<input type="hidden" name="question_id" id="question_id"/>
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" class="report_question_issue" class="buttonin"/></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
I want to dynamically set the value of input type hidden having id="question_id". After doing so much research I came to know that I have to use create() method of jQUery UI dialog plugin to set the hidden field value in UI dialog dynamically. I tried to call create() event in jquery dialog call but couldn't be able to set the value. Can anyone please help me in this regard please? Following is the code I tried to use create() event.
$(document).on("click","a[class='que_issue']", function (e) {
var hypertext = this.innerHTML;
var que_id = hypertext.substring(3);
//document.getElementById("question_id").value = que_id;
//$("#question_id").val(str);
var data = $('#searchPopContent').html();
var title = "Question issue";
var dialog_title = title;
var dialog_message = data;
var $dialog = $("<div class='view_result'></div>")
.html(dialog_message)
.dialog({
autoOpen: false,
modal:true,
title: dialog_title,
width: 400,
close:{
},
create: function() {
$("#question_id").val(que_id);
}
});
$dialog.dialog('open');
return false;
});
Also there is no errror in the firebug console for above code.
I modified your JS: http://jsfiddle.net/JyPLc/1/ , it works.
$(document).ready(function(){
$("#searchPopContent").dialog({
autoOpen: false,
modal:true,
title: "Question issue",
width: 400,
close:{
}
});
});
$("a.que_issue").on("click", function (e) {
var hypertext = this.innerHTML;
var que_id = hypertext.substring(3);
var title = "Question issue";
$("#question_id").val(que_id);
$("#qns_id").val(que_id); //this is just to show it works, can delete it
$("#searchPopContent").dialog('open');
return false;
});
You should modify the HTML first, then just call the dialog() to show to popup.

Why the text contained in textarea is not coming in the $_POST array in PHP?

I've following HTML form:
<form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="{$site_url}question_issue.php">
<input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
<input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
<input type="hidden" name="op" id="op" value="question_issue"/>
<input type="hidden" name="question_id" id="question_id" value="{$question_id}"/>
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" id="report_question_issue" class="c-btn submit_form"/></td>
</tr>
</tbody>
</table>
</form>
I'm submitting the form using AJAX. When I print the $_POST[] array I'm able to get all the values entered by user, values from hidden fields, etc. except the text from the textarea having name que_issue_comment. Can anyone guide me why such thing is happening? For your reference I'm putting below the AJAX code I've written.
<script language="javascript" type="text/javascript">
$(document).on("click","input[id='chkOther']", function (e) {
$('.set_message').toggle(this.checked);
});
$(document).on('click', "input[id='report_question_issue']", function(e) {
e.preventDefault();
//for confirmation that status change
var ans = confirm("Are you sure to report the question issue?");
if (!ans) {
return false;
}
var post_url = $('#post_url').val();
$.ajax({
type: "POST",
url: post_url,
data: $('#question_issue_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.error_message;
if(error)
alert(error);
else {
alert("Question issue has been reported successfully.");
$.colorbox.close();
}
}
});
});
</script>
The array $_POST[] printed after form submission is as follows:
(
[form_submitted] => yes
[post_url] => http://localhost/abc/pqr/web/question_issue.php
[op] => question_issue
[question_id] => 77104
[que_issue_comment] =>
)
Why the index value [que_issue_comment] is coming blank even after filling up the text area?

How Can I Insert Multiple Rows Into a DB from my HTML Form with Multiple Rows Dynamically?

so here's my situation. I have a form that gives the user the ability to add any number of rows to the form and input more data into those newly created rows (using javascript). I HAVE THIS ALREADY set up in the following code (I am using index.html, js/scripts.js and a php/upload.php files, all are externally linked, including an external CSS):
INDEX.HTML
<html>
<header>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" language="javascript" src="/jquery/js/jquery-1.9.1.js">
</script>
<script src="http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?
key=Gmjtd%7Cluua2q6bn9%2C8g%3Do5-lzbsh"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<title>Central Office Company Survey</title>
</header>
<body onload="get_company_name();">
<h1>Central Office Company Survey</h1>
<div id='map' style='width:0px; height:0px; position:absolute'></div>
<input type="hidden" id="co_city">
<input type="hidden" id="co_state">
<input type="hidden" id="co_zipcode">
<table>
<th>Company</th>
<th>CO Name</th>
<th>Get Current Location</th>
<th>Lat</th>
<th>Long</th>
<th>Address</th>
<tr>
<td><select id="company_name"></select></td>
<td><input id="co_name" type="text"></td>
<td><input type="submit" value="Get GPS" onclick="gpslookup()"></td>
<td><input id="co_lat" type="text"></td>
<td><input id="co_long" type="text"></td>
<td><input id="co_address" type="text"></td>
</tr>
</table>
<table id="tabledata">
<th>Select</th>
<th>Border Location Name</th>
<th>Cable Location</th>
<th>Direction of Vault Wall</th>
<th>Cable Type</th>
<th>Cable Size (pairs)</th>
<th>Cable Gauge</th>
<th>Vertical(s) appeared on Verticals</th>
<th>Approximate Number of Jumpers</th>
<th>Are Protectors Still In?</th>
<th>Metered Distance</th>
<th class="comments">Central Office Comments</th>
<!--Begin Rows-->
<tr>
<td><input type="checkbox"></td>
<td><input id="border_location" type="text" name="txt[]"></td>
<td><input id="cable_location" type="text" name="txt[]"></td>
<td><input id="vault_direction" type="text" name="txt[]"></td>
<td><input id="cable_type" type="text" name="txt[]"></td>
<td><input id="cable_size" type="text" name="txt[]"></td>
<td><input id="cable_gauge" type="text" name="txt[]"></td>
<td><input id="vertical" type="text" name="txt[]"></td>
<td><input id="jumpers" type="text" name="txt[]"></td>
<td><input id="protectors" type="text" name="txt[]"></td>
<td><input id="metered_dist" type="text" name="txt[]"></td>
<td><input id="comments" type="text" name="txt[]"></td>
</tr>
</table>
<input id="addrow_btn" type="submit" value="Add New Row" onclick="addRow(); return false;" />
<input id="delrow_btn" type="submit" value="Delete Row" onclick="deleteRow(); return false;" />
<input id="submit" type="submit" value="Submit" onclick="uploaddata(); return false;" />
</body>
</html>
As for the backend, I ONLY have the PHP and server side scripts able to submit information for that first row using the below code:
JAVASCRIPT FILE
function addRow() {
var table = document.getElementById("tabledata");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
//UPLOAD DATA
//Global variables
var survey = {
'co_name' : "",
'co_lat' : "",
'co_long' : "",
'co_address' : "",
'border_location' : "",
'cable_location' : "",
'vault_direction' : "",
'cable_type' : "",
'cable_size' : "",
'cable_gauge' : "",
'vertical' : "",
'jumpers' : "",
'protectors' : "",
'metered_dist' : "",
'comments' : "",
'company_name' : "",
'co_city' : "",
'co_state' : "",
'co_zipcode' : ""
}
function uploaddata() {
//Read all of the data from the page
for (eID in survey) {
survey[eID] = document.getElementById(eID).value;
}
//Insert data into database
$.ajax({
type: 'POST',
url: './php/upload_survey.php',
data: survey,
async: false,
dataType: 'text',
success: function() {
alert("Thank you. Your survey has been submitted.");
window.location.reload();
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error... " + textStatus + "\n" + errorThrown);
}
});
}
PHP FILE
//Assign passed parameters
$co_name = $_POST['co_name'];
$co_lat = $_POST['co_lat'];
$co_long = $_POST['co_long'];
$co_address = $_POST['co_address'];
$border_location = $_POST['border_location'];
$cable_location = $_POST['cable_location'];
$vault_direction = $_POST['vault_direction'];
$cable_type = $_POST['cable_type'];
$cable_size = $_POST['cable_size'];
$cable_gauge = $_POST['cable_gauge'];
$vertical = $_POST['vertical'];
$jumpers = $_POST['jumpers'];
$protectors = $_POST['protectors'];
$metered_dist = $_POST['metered_dist'];
$comments = $_POST['comments'];
$txt = $_POST['txt'];
$stringLogInfo = "INFO: Location: $co_address CO Name = $co_name !!!\n\n";
log_audit($logAuditFile, $logModule, $stringLogInfo);
//Parse and store the ini file, this will return an associative array
ini_set("display_errors", "1");
error_reporting(E_ALL);
//Insert Survey Form Information into the database
$fieldlist=$vallist='';
foreach ($_POST as $key => $value) {
$fieldlist.=$key.',';
$vallist.='\''.$value.'\',';
}
$fieldlist=substr($fieldlist, 0, -1);
$vallist=substr($vallist, 0, -1);
$sql='INSERT INTO table_name ('.$fieldlist.') VALUES ('.$vallist.')';
mysql_query($sql) or die ("Unable to Make Query:" . mysql_error());
My objective up to this point, having already everything else sort of ready, is to be able to loop through all the data in the form, according to however many rows they create and submit all those new row values into the SQL Database into SEPARATE rows. Please Advise!
Focusing on the HTML part of this question here is an approach to grow a form dynamically:
First the HTML:
<table id="tabledata">
<thead>
<th>Select</th>
<th>Border Location Name</th>
<th>Cable Location</th>
<th>Direction of Vault Wall</th>
<th>Cable Type</th>
<th>Cable Size (pairs)</th>
<th>Cable Gauge</th>
<th>Vertical(s) appeared on Verticals</th>
<th>Approximate Number of Jumpers</th>
<th>Are Protectors Still In?</th>
<th>Metered Distance</th>
<th class="comments">Central Office Comments</th>
</thead>
<tbody id="input"></tbody>
<tbody id="template">
<tr>
<td><input name="selected" type="checkbox" /></td>
<td><input name="border_location" type="text" /></td>
<td><input name="cable_location" type="text" /></td>
<td><input name="vault_direction" type="text" /></td>
<td><input name="cable_type" type="text" /></td>
<td><input name="cable_size" type="text" /></td>
<td><input name="cable_gauge" type="text" /></td>
<td><input name="vertical" type="text" /></td>
<td><input name="jumpers" type="text" /></td>
<td><input name="protectors" type="text" /></td>
<td><input name="metered_dist" type="text" /></td>
<td><input name="comments" type="text" /></td>
</tr>
</tbody>
</table>
<button id="ActionAddRow">Add Row</button>
<button id="ActionSubmit">Submit</button>
And This JavaScript:
$(function () {
var addInputRow = function () {
$('#input').append($('#template').html());
};
addInputRow();
$('#ActionAddRow').on('click', addInputRow);
$('#ActionSubmit').on('click', function () {
var data = $('#input tr').map(function () {
var values = {};
$('input', $(this)).each(function () {
if (this.type === 'checkbox') {
values[this.name] = this.checked;
} else {
values[this.name] = this.value;
}
});
return values;
}).get();
$.post('/echo/json/', {
json: JSON.stringify(data),
delay: 1
}).done(function (response) {
alert("POST success");
console.log(response);
});
});
});
And then this CSS:
tbody#template {
display: none;
}
Produces this demo
Here is a breakdown of what is happening. First the table element can define mutiple bodies, so I've added the HTML of an empty row of inputs and hidden (with CSS) it in a tbody with the ID of template. Using JavaScript, I then define a simple function that just appends the contents of that row to the tbody with the ID of inputs and I bind that function to the click event of a button. Then because the inputs tbody is starts out as empty I call that function once. Then for submitting the form, I select all rows of the inputs tbody and iterate over the inputs found inside them. Next, I am combining them into one large array of JavaScript objects with each element representing a row, and finally I'm posting this showing a round trip with this data from the client to the server (I'm using JSON2.js to serialize the data). Your PHP page would pick up from here to check them on the server, and (using a prepared statement) insert valid rows into the database.
Your PHP would take the POSTed values like this:
$value = json_decode($_POST['json']);
And treat the submitted data as an associative array. This approach uses an AJAX Form Post, so the response of the PHP page should be a valid JSON with a structure something like this:
{Success: true}

how to update several span elements based on user input HTML

I have a huge form with at least 200 input fields- text/radio/checkboxes.
I have divided this into several sections to structure it well and there is an update button for each section which takes the user input and persists it to the db. This is done by Ajax so I don't have to reload the page.
How can I easily update the <span>s corresponding to the input fields with whatever the user inputs without reloading the page? DO I have to do a $("#spanid").html($("#input1").val()) on each <span> item or is there an easy way to do this?
Here's the code for a fraction of the form.
HTML
<form id="history" name="history" action="" method="post">
<table class="normal">
<tr><th colspan="8">HISTORY</th>
</tr>
<tr><td style="width:200px"><b>Chief Complaint Location</b></td>
<td style="width:450px"><b>Comment</b></td>
<td><b> Previous</b> </td>
</tr>
<tr><td>Head</td>
<td ><input type="text" maxlength="100" name="headH" id="headH" ></td>
<td class="data2"><span id="headSpan"><%=msmtCommentHead%></span></td>
</tr>
<tr><td>Neck</td>
<td><input type="text" maxlength="100" name="neckH" id="neckH" ></td>
<td class="data2"><span id="neckSpan"><%=msmtCommentNeck%></span></td>
</tr>
<tr><td>Upper Extremeties</td>
<td><input type="text" maxlength="100" name="upperExtremetiesH" id="upperExtremetiesH"></td>
<td class="data2"><span id="ueSpan"><%=msmtCommentUpperExtremeties%></span></td>
</tr>
<tr><td>Thoracic Spine</td>
<td><input type="text" maxlength="100" name="thoracicSpineH" id="thoracicSpineH"></td>
<td class="data2"><span id="tsSpan"><%=msmtCommentThoracicSpine%></span></td>
</tr>
<tr><td><input type="button" id="submitHistory" value="Update"/></td></tr>
</table>
</form>
Javascript:
$(function(){
$("#submitHistory").click(function() {
var query = $("#history").serialize();
$.ajax( {
type: "POST",
url: "/oscar/cmcc/History.do",
dataType: "json",
data: query
});
document.getElementById('history_cmcc').reset();
var date = new String("<%=date%>");
$("#headSpan").innerHTML = $("#headH").val()+ "," + date;
$("#neckSpan").innerHTML = $("#neckH").val() + ","+ date;
$("#tsSpan").innerHTML = $("#thoracicSpineH").val() + ","+ date;
$("#lsSpan").innerHTML = $("#lumbarSpineH").val() + ","+ date;
$("#leSpan").innerHTML = $("#lowerExtremetiesH").val() + ","+ date;
$("#chSpan").innerHTML = $("#chestHeartH").val() + ","+ date;
}
Thanks!
In general you can do this:
$('input[type=text]').each(function() {
$(this).closest('tr').find('span').html($(this).val());
});
$('input:checked').each(function() {
$(this).closest('tr').find('span').html($(this).val());
});
Update per OP comment:
In your example if you wanted to put the label that is to the left of a radio button inside the span you could do this. This depends on your specific requirements.
$('input[type=radio]:checked').each(function() {
$(this).closest('tr').find('span').html($(this).closest('tr').find('td:eq(0)').text());
});
$(':input').each(function() {
$(this).closest('tr').find('span').html(this.value);
});
:input applied for all inputs. Also can use input.

Categories