I have an HTML template in my Apps Script project that I am trying to evaluate. I keep getting a server error (not very helpful), but I can't find anything while debugging. I tried the running result from getCode(), but no errors there. Then I also ran output.$out.getContent() (as described here https://developers.google.com/apps-script/html_service) which gives me the expected html output.
I would attach the HTML file but it contains a lot of variables and I have trouble creating a lean version with the error. I am hoping someone knows a better or the right way to debug these files.
The html file:
<html>
<body>
<form action="https://script.google.com/macros/s/AKfycbxHQDJoAtAjBF9uIctvmxBHv-QVpYf6f15UZf8aAnAh_1U_PzU/exec" method="POST" id="mail-form">
<table>
<tr style="background-color: #392303; font-size: large; line-height: 30px;">
<th>
<?= userForm.userName ?>
</th>
<th colspan="3">
<div width="250px" style="color: #e06c01; font-weight: lighter; float: left; text-indent: 10px;"><?= userForm.experience ?></div>
<div style="color: #FFFFFF; background-color: <?= userForm.pastColor ?>; border: 1px solid white; width: 28px; height: 28px; float: right;" title="<?= userForm.pastApplications ?>">
<center><?= userForm.pastNumber ?></center>
</div>
</th>
</tr>
<tr style="background-color: #9c9181">
<td width="100">
<center><p style="font-size:small; top: 5px; margin-bottom: 3px;">Thanks meter: <?= info.thanks ?></p></center>
<center><img alt="" src="" style="margin-bottom: 10px;"/></center>
<center><img src="<?= info.avatar ?>" style="height: 60px; margin-bottom: 10px;" /></center>
<center><p style="font-size:small; margin-bottom: 3px; margin-top: 3px;">Posts: <?= info.totalPosts ?></p></center>
<center><p style="font-size:small; margin-bottom: 3px; margin-top: 3px;">Per day: <?= info.postsPerDay ?></p></center>
<center><p style="font-size:small; margin-bottom: 3px; margin-top: 3px;">Join date: <?= info.joinDate ?></p></center>
<center><p style="font-size:small; margin-bottom: 3px; margin-top: 3px;">Last activity: <?= info.activity ?></p></center>
</td>
<td>
<center><?= userForm.onSite ?></center>
</td>
<td>
<center><?= userForm.tools + '\n' + '\n' + userForm.theHardPart ?></center>
</td>
<td width="100">
<center><?= userForm.development ?></center>
</td>
</tr>
<tr style="background-color: #392303; font-size: large; line-height: 30px;">
<td colspan="4" style="color: #e06c01; font-weight: lighter; text-indent: 10px;">Review</td>
</tr>
<tr style="background-color: #9c9181">
<td colspan="1" valign="top">
<label><input type="radio" name="review" value="approved" id="review_1">Accept</label>
</td>
<td colspan="1" valign="top">
<label><input type="radio" name="review" value="rejected" id="review_2">Reject</label><br><br>
<label><b>Reason(s) for user</b></label><br>
<label><input type="checkbox" name="reason" value="Reason1" id="requirements">Reason1</label><br>
<label><input type="checkbox" name="reason" value="Reason2" id="requirements">Reason2</label><br>
<label><input type="checkbox" name="reason" value="Reason3" id="requirements">Reason</label><br>
<label><input type="checkbox" name="reason" value="Reason4" id="requirements">Reason4</label><br>
<label><input type="checkbox" name="reason" value="Reason5" id="requirements">Reason5</label><br>
<label><input type="checkbox" name="reason" value="Reason6" id="requirements">Reason6</label><br>
</td>
<td colspan="1" style="text-indent: 3px;">
<label><b>Feedback</b></label><br>
<label><i>Rejections:</i> <b>WARNING</b> users will see this</label><br>
<label><i>Approvals:</i> only for us</label><br>
<textarea name="comments" rows="10" cols="35" id="comments"></textarea>
</td>
</tr>
</table>
<input type="hidden" name="userName" id="userName" value="<?= userForm.userName ?>"/>
<input type="hidden" name="reviewerName" id="reviewerName" value="<?= userForm.reviewer ?>"/>
<input type="hidden" name="link" id="link" value="<?= info.profile ?>"/>
<input type="hidden" name="row" id="row" value="<?= userForm.row ?>"/>
<input type="hidden" name="hash" id="hash" value="<?= userForm.hash ?>"/>
<div>
<div style="float: left;">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
<div style="float: right;">
<a href="mailto:<?= mailTo ?>?subject=<?= subject ?>&body=<?= body ?>">
<b>Consult</b>
</a>
</div>
</div>
</form>
</body>
</html>
The relevant part of the script:
var htmlTemplate = HtmlService.createTemplateFromFile('DC Form');
htmlTemplate.userForm = userForm;
htmlTemplate.info = info;
htmlTemplate.mailTo = mailTo;
htmlTemplate.subject = 'CONSULT: ' + userForm.userName;
htmlTemplate.body = 'Profile link: ' + userForm.profile + '\n' + '\n';
var code = htmlTemplate.getCode();
Logger.log(code);
var html = htmlTemplate.evaluate().getContent();
EDIT:
After using the Caja Playground I found an error in this line:
<div style="color: #FFFFFF; background-color: <?= userForm.pastColor ?>; border: 1px solid white; width: 28px; height: 28px; float: right;" title="<?= userForm.pastApplications ?>">
Could it be that using scriptlets inside attributes isn't supported?
Well then, it looks like a simple missing of 'px' in the width attribute was the cause of all this trouble.
<td width="100">
It is fairly hard to locate as the error only appeared in certain conditions, probably only when that the size didn't match whatever it was. This would be why Corey G. though it had to be the variables, as the variables had to be of a certain length to trigger that width error. Headaches gone.
Without touching your html, I tried this slight variant of your .gs file:
function doGet() {
var htmlTemplate = HtmlService.createTemplateFromFile('DC Form');
var userForm = {userName: 'userName', profile: 'profile'};
htmlTemplate.userForm = userForm;
htmlTemplate.info = "info";
htmlTemplate.mailTo = "mailTo";
htmlTemplate.subject = 'CONSULT: ' + userForm.userName;
htmlTemplate.body = 'Profile link: ' + userForm.profile + '\n' + '\n';
var code = htmlTemplate.getCode();
Logger.log(code);
return htmlTemplate.evaluate();
}
This works fine for me. I suspect that something is wrong with one of the values in your variables.
Related
I have multiple input datalist that will populate based on the input or selection in the previous datalist. It uses the jQuery load event to call a page with VBscript to pull the data from a SQL Server DB. Everything works fine until an input is enter that has spaces between the words, then the options are not loaded in the datalist.
I have tried using the encodeURIComponent(), but that does not resolve the issue. The call to the VBscript page seems to work fine in all cases. I have done the same thing with linked select tags and they work fine. The spaces seem to be the issue. Thanks in advance for the help.
Below is the code I am using.
JQuery Code:
$().ready(function() {
// Ajax code to get data to populate Group dropdown selection from Site selection
$("#Site").change(function() {
$("#Groups").load("scp_getListData.asp?WS=13&LV=1&ST=" + $("#Site").val());
});
// Ajax code to get data to populate Menu Name dropdown selection from Site & Group selection
$("#Group").change(function() {
$("#MenuNames").load("scp_getListData.asp?WS=13&LV=2&ST=" + $("#Site").val() + "&GP=" + $("#Group").val());
$('#MenuNamesLabel').text(event.target.id + " was changed?WS=13&LV=2&ST=" + $("#Site").val() + "&GP=" + $("#Group").val());
});
// Ajax code to get data to populate Level 1 Menu dropdown selection from Site, Group, Name selection
$("#MenuName").change(function() {
$("#Menu1Ops").load("scp_getListData.asp?WS=13&LV=3&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val());
$('#Menu1OpsLabel').text(event.target.id + " was changed?WS=13&LV=3&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val());
});
// Ajax code to get data to populate Level 3 Menu dropdown selection from Site, Group, Name, Level 1 selection
$("#Menu_1").change(function() {
$("#Menu2Ops").load("scp_getListData.asp?WS=13&LV=4&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val() + "&ML1=" + $("#Menu_1").val());
});
// Ajax code to get data to populate Level 1 Menu dropdown selection from Site, Group, Name, Level 1, Level 2 selection
$("#Menu_2").change(function() {
$("#Menu3Ops").load("scp_getListData.asp?WS=13&LV=5&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val() + "&ML1=" + $("#Menu_1").val() + "&ML2=" + $("#Menu_2").val());
});
});
HTML Code:
<form action="test_process.asp" class="valerror" name="MyForm" id="MyForm" method="post">
<table class="normal box" style="width: 750px; text-align:center" cellspacing="1" cellpadding="0" border="0">
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Site">Site</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<select size="1" name="Site" id="Site" class="form_req" tabindex="1" required data-msg-required="The Site Field is Required!" onKeyDown="return tabCR(this,event);">
<option value="" selected="selected">Please Select</option>
</select>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Group">Group Or Cell</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Group" id="Group" list="Groups" size="20" maxlength="20" class="form_req" tabindex="2" type="text" required data-msg-required="The Group Field is Required!" onKeyDown="return tabCR(this,event);">
<datalist id="Groups">
</datalist>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="MenuName">Menu Name</label>
</td>
<td class="medium" id="Email2" style="text-align: left; padding: 3px 0px 3px 5px;">
<input name="MenuName" id="MenuName" list="MenuNames" size="50" maxlength="50" class="form_req" tabindex="3" type="text" required data-msg-required="The Menu Name Field is Required!" onKeyDown="return tabCR(this,event);">
<datalist id="MenuNames">
</datalist>
<span id="MenuNamesLabel"></span>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Menu_1">Level 1 Menu</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Menu_1" id="Menu_1" list="Menu1Ops" size="85" maxlength="150" class="form_req" tabindex="4" type="text" required data-msg-required="The Level 1 Menu Field is Required!" onKeyDown="return tabCR(this,event);">
<datalist id="Menu1Ops">
</datalist>
<span id="Menu1OpsLabel"></span>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Menu_2">Level 2 Menu</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Menu_2" id="Menu_2" list="Menu2Ops" size="85" maxlength="150" class="form_fields" tabindex="5" type="text" onKeyDown="return tabCR(this,event);">
<datalist id="Menu2Ops">
</datalist>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Menu_3">Level 3 Menu</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Menu_3" id="Menu_3" list="Menu3Ops" size="85" maxlength="150" class="form_fields" tabindex="6" type="text" onKeyDown="return tabCR(this,event);">
<datalist id="Menu3Ops">
</datalist>
</td>
</tr>
</table>
</form>
How can i move to the next page after clicking onthe submit button, in my case my submit button is not working. I used some JQuery code inside this html page, is that a reason?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected > Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id = "Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<script>
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if ($("#to_check_recognition").val() == 'yes')
$("#Average_orientation").show();
else
$("#Average_orientation").hide();
}
</script>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>
</body>
</html>
You have given required attribute to input:
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required />
When you select no & input is hidden, due to required attribute, form is not submitted.
Change value of input to 0 then submit form:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected > Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id = "Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<script>
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if($("#to_check_recognition").val() == 'yes'){
$("#Average_orientation").show();$("input[name=Average_orientation]").val("");}else if($("#to_check_recognition").val() == 'no'){
$("#Average_orientation"). hide();$("input[name=Average_orientation]").val("0"); }
}
</script>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>
</body>
</html>
in my case my submit button is not working
When I am testing your code I am correctly redirecting to "form_table_output.html"
What do you mean, when you click nothing happen or when you click something happen but it is not what you want?
submit button is working fine and correctly redirect to "form_table_output.html".
But the error is a bad path i.e. this is path "form_table_output.html" not exist. So please define it in your codebase.
Please excuse me if this question is elementary - fairly new to working with mysql. I left out the query and loop/references in the code below, because my question is on formatting the table. (I hope that info isn't needed)
Right now the result of the code below is the info being displayed in one single table row that spans the width of the table, these rows continue until all data is displayed.
How can I format this so instead of one long cell in one table row, I get two cells per table row?
I haven't been able to figure out if this is a matter of formatting the table into 2 columns or formatting the tr or td.
Thank you very much for your help and guidance on this!!
echo('<table width="85%" align="center" cellspacing="15">');
//query,loop, references
echo('<tr>
<td bgcolor="#dddddd" style="border:1px solid #000000; padding:12px">
<div style="float:right">
<form action="index.php" method="get">
<input type="hidden" name="page" value="viewproject">
<input type="hidden" name="projectid" value="'.$projectid.'">
<input type="submit" value="View Event"></form>
<br>
<form action="jump_delete.php" method="post" align="right">
<input type="hidden" name="projectid" value="'.$projectid.'">
<input type="submit" value="Delete"></form>
</div>
<div style="font-weight:bold; font-size:18px">'.$projectclient.'</div>
<div style="font-size:15px"><b>Event:</b> '.$projectname.'</div>
<div style="font-size:15px">Date: '.$duedateformatted.'</div>
<div style="font-size:15px">Staff Count: '.$projectstaffcount.'</div>
</td>
</tr>');
UPDATE: With using my own version of the help from below - I came to an answer that gets the job done for me. Thanks to all who chimed in with help and advice!!! Using an if statement to create when new rows happen.
if($i % 2 == 1) {
if($i != 0) {
echo(‘</tr>');
}
td means table data which is basically a cell or column
tr stands for table row
The number of td inside your tr will determine how many columns you are going to get.
Also, have a look at the td attribute colspan and rowspan here
In your specific case my guess is that you want to add another td inside your table
<table width="85%" align="center" cellspacing="15">
<tr>
<td bgcolor="#dddddd" style="border:1px solid #000000; padding:12px"></td>
<td bgcolor="#dddddd" style="border:1px solid #000000; padding:12px"></td>
</tr>
</table>
UPDATE:
to loop through your data you need something like this
echo '<table width="85%" align="center" cellspacing="15">';
echo '<tr>';
$i = 0;
while(...) {
// skip the first iteration
// then after every second <td> close the <tr> and open a newone
if($i > 0 and $i % 2 == 0) {
echo '</tr><tr>';
}
echo '<td bgcolor="#dddddd" style="border:1px solid #000000; padding:12px"></td>';
$i++;
}
echo '</tr>';
echo '</table>';
Try to avoid echo for html code, and use tr for rows and td for
I shall post the code how it works for me:
?>
<table width="85%" align="center" cellspacing="15">
<?php
//query,loop, references
?>
<tr>
<td bgcolor="#dddddd" style="border:1px solid black; padding:12px;">
<form action="index.php" method="get">
<input type="hidden" name="page" value="viewproject">
<input type="hidden" name="projectid" value="<?php $echo projectid;?>">
<input type="submit" value="View Event">
</form>
</td>
<td>
<form action="jump_delete.php" method="post" align="right">
<input type="hidden" name="projectid" value="<?php $echo projectid;?>">
<input type="submit" value="Delete">
</form>
</td>
</tr>
<tr>
<td style="font-weight:bold; font-size:18px;">
<?php echo $projectclient;?>
</td>
<td style="font-size:15px">
Event:<?php echo $projectname;?>
</td>
</tr>
<tr>
<td style="font-size:15px">
Date: <?php echo $duedateformatted;?>
</td>
<td style="font-size:15px">
Staff Count: <?php echo $projectstaffcount;?>
</td>
</tr>
<?php
//close loop
?>
</table>
<?php
tr add rows to you table
td add cells inside a row tr
Assuming you need the additional cell after the second form, you will need an additional <td></td>
echo('<table width="85%" align="center" cellspacing="15">');
//query,loop, references
echo('<tr>
<td bgcolor="#dddddd" style="border:1px solid #000000; padding:12px">
<div style="float:right">
<form action="index.php" method="get">
<input type="hidden" name="page" value="viewproject">
<input type="hidden" name="projectid" value="'.$projectid.'">
<input type="submit" value="View Event"></form>
<br>
<form action="jump_delete.php" method="post" align="right">
<input type="hidden" name="projectid" value="'.$projectid.'">
<input type="submit" value="Delete"></form>
</div>
// Additional td here
</td>
<td>
<div style="font-weight:bold; font-size:18px">'.$projectclient.'</div>
<div style="font-size:15px"><b>Event:</b> '.$projectname.'</div>
<div style="font-size:15px">Date: '.$duedateformatted.'</div>
<div style="font-size:15px">Staff Count: '.$projectstaffcount.'</div>
</td>
</tr>');
I have created ASP page, which looks like:
I need something like this center image:
I tried to set background for header, it works fine. However, I am not able to set for next button.
Here is my code snippet:
$(document).ready(function() {
// CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px'});
$(container).append('<input type=text class="input" id="tb1" value="Text Element 1" />');
$(container).append('<input type=text class="input" id="tb2" value="Text Element 2" />');
$(container).append('<input type=text class="input" id="tb3" value="Text Element 3" />');
$(container).append('<input type=text class="input" id="tb4" value="Text Element 4" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
var iCnt = 4;
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Text Element ' + iCnt + '" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
}
else { // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
$('#btRemove').click(function() { // REMOVE ELEMENTS ONE PER CLICK.
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) { $(container).empty();
$(container).remove();
$('#btSubmit').remove();
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt')
}
});
$('#btRemoveAll').click(function() { // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$(container).empty();
$(container).remove();
$('#btSubmit').remove(); iCnt = 0;
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue).empty();
$(divValue).remove(); values = '';
$('.input').each(function() {
divValue = $(document.createElement('div')).css({
padding:'5px', width:'200px'
});
values += this.value + ','
});
$(divValue).append('<p><b>Your selected values</b></p>' + values);
$('body').append(divValue);
}
#tbl-two-columns td.invitation-col2
{
padding-left:0px !important;
}
.cs_pendingInvitation img
{
margin-top:3px;
}
// styles for invite more friends -- selva
.invitation-header
{
background: none repeat scroll 0% 0% #C2EBFF;
z-index: 99;
}
#btAdd
{
color: #00BFFF;
}
#main a{
text-decoration:none;
}
input#nextbutton {
padding: 5px 15px;
background: none repeat scroll 0% 0% #00BFFF;
color: #FFF;
border: 0px none;
cursor: pointer;
border-radius: 5px;
}
.input {
color: #333;
height: 25px;
margin: 5px;
width: 380px;
}
<table class="tblmain atep" style="width: 450px;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdbodycontent" align="left">
<table class="wrapper" style="width:450px;margin:0 auto;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdcontainer" align="left">
<table style="width:450px;" id="tbl-two-columns" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<th class="invitation-header" valign="top"> <!-- th added for invite header --selva -->
Help make your neighborhood safer, Invite friends and family
</th> <!-- END - th added for invite header --selva -->
</tr>
<tr>
<td class="invitation-col2" valign="top">
<table id="tab1" class="tab-container" style="width:400px;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top">
<form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onsubmit="return GetTextValue()">
<!--START - Invite Buttons - Selvarani-->
<div style="padding: 5px; margin: 0px;"><input class="input" id="tb1" placeholder="Email" type="text"><input class="input" id="tb2" placeholder="Email" type="text"><input class="input" id="tb3" placeholder="Email" type="text"><input class="input" id="tb4" placeholder="Email" type="text"></div><div id="main"><a style="float: right;" href="#" id="btAdd" value="" class="bt">Invite more friends</a></div><table style="margin: 0px auto 10px; width: 350px;" border="0" cellpadding="0" cellspacing="0">
<input id="contact_list" name="contact_list" value="" type="hidden">
<!--END - Invite Buttons - Selvarani-->
</table>
<p style="">Invite from my address book</p>
<img src="Web5/images/invite-your-contacts.png" style="cursor:pointer;" alt="Invite your contacts" onclick="InviteBoxClick();"><br>
<a href="#cs_container" data-cs-init="true" class="cs_import">
</a>
<input name="cnote" value="" type="hidden">
<input name="pkfamilyinvite" value="0" type="hidden">
<input name="vn" value="0" type="hidden">
<input name="gORn" value="1" type="hidden"><br>
<input style="float: right;" id="nextbutton" name="" value="Next" type="submit"> <!-- id="nextbutton" added for button styles -- selva -->
</form>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="tdfooter" align="left">
<div class="wrapper">
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
Replace this input#nextbutton { with #nextbutton {
Description:
Drag and drop form elements to build a form that will be displayed later.
Needed:
- input and textarea formfields need to have id's in order after they have been sorted. I need to reference the answer to the questions and the instructions. Right now if they are sorted, I would not know what order to display them in later when viewing the record. there may be a better way, but Im stuck now.
Sort issue: The sortable area does not work until after the drag drop event. There are default fields that need to be sorted right away.
Here is the fiddle: http://jsfiddle.net/htscraig/vhkGD/3/
<div class="vf">
<div id="edit_menu">
<p style="text-align: center; margin: -5px 5px 5px;">Form Elements Menu</p>
<button href="#" id="questions_toggle" style="margin-left: 9px;">Questions<span id="questions_status"> show</span>
</button>
<button id="answers_toggle" href="#">Answer Type<span id="answers_status"> show</span>
</button>
<button id="instructions_toggle" href="#">Instructions<span id="instructions_status"> show</span>
</button>
<div id="questions">
<div style="text-align: center;">
<h3>VF-300 Questions<h3></div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="mooeditable" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<textarea class="mooeditable" cols="43" rows="6" style="border: medium none; width: 240px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<hr>
</div>
<div id="answers">
<div style="text-align: center;"><h3>VF-300 Answer Formats<h3></div>
<div class="item">
<input type="radio" value="Yes" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 222222</span>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 333333</span>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
<div id="instructions">
<div style="text-align: center;"><h3>Juror Instructions<h3></div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="4" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i3" form="GeneralVerdict">If your answer to question 3 is yes, then answer question 4. If you answered no, stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i4" form="GeneralVerdict">If your answer to [either option for] question 4 is yes, then answer question 5. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.</textarea>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
</div>
<div id="edit_right">
<div class="info"><h1>CoPO Verdict Builder</h1>Drag and drop form elements in box. Drag elements into position to sort</div>
<ol>
<div id="edit_area">
<div class="item_dz" id="1">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
</div>
</div>
</ol>
</div>
window.addEvent('domready', function () {
$$('.item').addEvent('mousedown', function (event) {
if (event.target == this.getParent().getElement('.delete button')) return;
event.stop();
// `this` refers to the element with the .item class
var item = this;
var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('edit_area'),
onDrop: function (element, droppable) {
if (!droppable) {
item.removeClass('item_dz');
item.addClass('item');
item.tween('background-color', '#c0c0c0', '#fff');
} else {
item.removeClass('item');
item.addClass('item_dz');
item.clone().inject(edit_area);
edit_area.highlight('#4679BD', '#AFD2FF');
item.removeClass('item_dz');
item.addClass('item');
var mySortables = new Sortables('', {
clone: true,
opacity: 0.4,
});
setTimeout(function () {
mySortables.addLists(edit_area);
}, 1);
}
element.dispose();
},
onEnter: function (dragging, edit_area) {
edit_area.tween('background-color', '#9FFF8F');
},
onLeave: function (dragging, edit_area) {
edit_area.tween('background-color', '#fff');
},
onCancel: function (dragging) {
dragging.destroy();
edit_area.tween('background-color', '#fff');
}
});
drag.start(event);
});
$$('.delete').addEvents({
mouseover: function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
},
mouseleave: function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
}
});
// start delegation relays
window.addEvent('click:relay(.delete)', function () {
if (confirm('Delete this line item?')) {
this.getParent(['.item_dz']).destroy();
this.destroy();
} else {
// Do nothing
}
})
window.addEvent('mouseover:relay(.delete)', function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
})
window.addEvent('mouseleave:relay(.delete)', function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
})
//end delegation relays
// menu toggle menus start
var status = {
'true': ' show',
'false': ' hide'
};
// questions slide start
var questionsSlide = new Fx.Slide('questions');
// set default slide as hidden
questionsSlide.hide();
$('questions_toggle').addEvent('click', function (event) {
event.stop();
questionsSlide.toggle();
$('questions_status').set('text', status[questionsSlide.open]);
});
// questions slide end
// answers slide start
var answersSlide = new Fx.Slide('answers');
// set default slide as hidden
answersSlide.hide();
$('answers_toggle').addEvent('click', function (event) {
event.stop();
answersSlide.toggle();
$('answers_status').set('text', status[answersSlide.open]);
});
// answers slide end
// instructions slide start
var instructionsSlide = new Fx.Slide('instructions');
// set default slide as hidden
instructionsSlide.hide();
$('instructions_toggle').addEvent('click', function (event) {
event.stop();
instructionsSlide.toggle();
$('instructions_status').set('text', status[instructionsSlide.open]);
});
// instructions slide end
// menu toggle menus end
$('textarea').mooEditable();
});
The sortables is only added after the first drop event. To have the .item_dz sortable from the beggining you can add this line directly after the domeready function opening: http://jsfiddle.net/ke7nq/
var sortableItem_dz = new Sortables().addItems($$('.item_dz'));
I would suggest you change the HTML for .item_dz a bit so it would include both the question and the Yes/No element. Something like the exmple under so each block would be inside a item_dz:
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or] [Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;" />Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No<span class="delete" style="opacity: 0.7;" />
<button>Delete Line</button>
</span>
</div>
To get all the elements after you are done dropping/sorting you can do
var questions = document.getElements('.item_dz');
// or to get just the ID's:
// var questions = document.getElements('.item_dz').map(function(el){ return el.get('id'); });
or use the .serialize() method: http://mootools.net/docs/more/Drag/Sortables#Sortables:serialize