cgi script is sending form data multiple times, once per refresh - javascript

I'm trying to write my own webmail application using python cgi with smtplib and imaplib. When I hit the send button on the "send" form the email is sent, however, for every refresh after that the message is sent again. The page (cgi script) is refreshed automatically every two minutes via javascript:
<script language="javascript">
window.setInterval('refresh()', 180000);
function refresh()
{
// this checks to see which tab is selected, page is refreshed only if compose tab is not selected
elList = document.getElementsByTagName("a");
for (i = 0; i < elList.length; i++)
{
if (elList[i].className === 'tab active')
{
var activeTab = elList[i].innerHTML;
}
}
if (activeTab.indexOf("Unread") >= 0)
{
window.location.reload(true);
}
}
</script>
I can't really tell whether the form data is sent multiple times or just read multiple times. However, I see no reason why the form should be submitted again on refresh so I have to believe that it is just being read multiple times. Here are the components, which enable the reading of the form data:
# Create instance of FieldStorage
form = cgi.FieldStorage()
if form.keys() != []:
for x in form.keys():
if x == 'send':
send_email()
I tried to reset the form using javascript in the page head tag, but this did not work:
<script language="javascript">
Form.reset('send'); // reset send form so email is not sent again
</script>
For completeness, here is the form definition:
<form name="send" action="/cgi-bin/myemail.py" method="post" >
<table id="example" class="compose" >
<tr>
<td><input type="submit" value="To:" style="height: 1.95em; width: 4em"></td><td><input type="text" name="send_to" size="90"></td><td><input type="submit" name="send" value="SEND" style="height: 1.95em; width: 12em"></td>
</tr>
<tr>
<td><input type="submit" value="Cc:" style="height: 1.95em; width: 4em"></td><td><input type="text" name="send_cc" size="90"></td> <td><input type="submit" name="send" value="SAVE" style="height: 1.95em; width: 12em"></td>
</tr>
<tr>
<td><input type="submit" value="Bcc:" style="height: 1.95em; width: 4em"></td><td><input type="text" name="send_bcc" size="90"></td> <td><input type="submit" name="send" value="DELETE" style="height: 1.95em; width: 12em"></td>
</tr>
<tr>
<td><input type="submit" value="Subj:" style="height: 1.95em; width: 4em"></td><td><input type="text" name="send_subj" size="90"></td> <td><input type="submit" name="send" size="200" value="ATTACH" style="height: 1.95em; width: 12em"></td>
</tr>
<tr>
<td colspan="3">
<!-- <td colspan="3"> <div id="result" class="body" style="background-color:#000000"></div></td> -->
<textarea name="send_body" cols="118" rows="23"> </textarea>
</td>
</tr>
</table>
</form>
How can I keep this form data from being read multiple times? Thanks.

Related

How to add a form per row in a table (dynamic rows added)

Hello!
Given that each row contains information for a form and are dynamically generated from a php echo, I want to send to the form only the inputs within the row that has been selected(event is thrown onclick of checkbox). How would you do it?
I used let rowForm = $(event.currentTarget).closest("tr");
But I've been stuck with it for a while. Do you mind giving me a hand? After that, I will send the resulting form to a php by a fetch.
ex: new URLSearchParams(new FormData(document.getElementById("formRegistroPedido")));
I tried Open AI to solve this. I finally solved the problem:
$(document).on('click', '.check', function(){
var row = $(this).closest("tr");
let rowInputs = Array.from(row.find('td input'));
let values = {};
let form = new FormData();
rowInputs.forEach(input => {
if(input == rowInputs[rowInputs.length - 1]) {
return;
}
let inputValue = input.value;
//Append the input value to the form
form.append(input.name, inputValue);
});
form.forEach((value, key) => {
console.log(key + ': ' + value);
});
});
input{
width: 50%;
}
table{
border: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<form id="form1">
<table border=1>
<tr>
<th>Prueba</th>
<th>Prueba2</th>
<th>Prueba3</th>
<th>Prueba4</th>
</tr>
<tr>
<td> <input form="form1" name="letrA" type="text" required></td>
<td> <input form="form1" name="letrB" type="text" required></td>
<td> <input form="form1" name="letrC" type="text" required></td>
<td> <input class='check' type="checkbox"required></td>
</tr>
<tr>
<td> <input form="form1" name="letrA" type="text" required></td>
<td> <input form="form1" name="letrB" type="text" required></td>
<td> <input form="form1" name="letrC" type="text" required></td>
<td> <input class='check' type="checkbox"required></td>
</tr>
</table>
</form>
</html>
The printed value is a formData, solving my main problem of getting information from the rows to a formdata. Now i can send it to a fetch api and we are good to go! If you have questions about it feel free to comment.

Updating my database with the changed elements in a table

I'm making an address book of a company's tech support contacts and the admin gets access to all addresses in a form of a table. In this table, he can add, delete and make changes to data in the same page.
I have set up the add and delete functions successfully, but I struggle a lot with the edit. I'm using node, express, mongodb and vanilla javascript.
I'm still a newbie in web developement and there is are words I may use wrong, so sorry in advance!
(Excuse my french, but most of the words mean the same in english.)
My HTML
<div>
<input id="edit" type="button" value="Editer" onclick="return edit()">
<input id="valider" type="hidden" value="Valider" onclick="return valider()">
</div>
<table id='myTable'>
<thead>
<tr class="header">
<th>Nom de l'entreprise</th>
<th>Téléphone 1</th>
<th>Téléphone 2</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<% companies.forEach(function(company){ %> //I loop through my db
<tr class="compName">
<td hidden id='_id' > <%= company._id %> </td>
<td> <input id="name" class="readonly" type="text" value=" <%= company.name %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone" class="readonly" type="text" value=" <%= company.phone %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone2" class="readonly" type="text" value=" <%= company.phone2 %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="mail" class="readonly" type="text" value=" <%= company.mail %>" readonly style="border: none" onblur="change(this)"> </td>
</tr>
<% }) %>
</tbody>
</table>
My Script
<script>
function edit() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'hidden'; //get the edit button and hide it
var valider = document.getElementById('valider').type = 'button'; //then unhide the validate button so I can use it
for (var i = 0; i < editComp.length; i++) { //remove the readonly for each td so I can edit it
editComp[i].removeAttribute('readonly');
editComp[i].setAttribute("style", "border: 1px solid red;");
};
}
function valider() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'button'; //unhide the edit button
var valider = document.getElementById('valider').type = 'hidden' //hide my validate button
for (var i = 0; i < editComp.length; i++) { //put back the readonly for each td so its uneditable
editComp[i].setAttribute('readonly', true);
editComp[i].setAttribute("style", "border: none;");
};
}
function change(element) { //when the input gets unfocused, I assume that's because changes happened
var setChanged = element.setAttribute("class", "readonly changed"); //I mark all changed element
/*I want to udapte my database with the changed elements
I was thing of getting the hidden company._id and the id of the changed element so I can update them specifically*/
}
</script>
So I was think of getting the col[0] of the changed row, which is the _id of my changed element, so I can target it for updating in my database, but I don't know how I should do it.
Thanks!

How to append an inline template element with modified (id) content to another element?

Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?
Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>
Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.

how to set unique name and id of HTML Table columns which are dynamically created using ajax

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() )
}
});
}

javascript window redirect doesn't fire up

This problem seems to be odd to me and I can't seem to fix it. I do have a simple HTML form; inside, I do have a textbox and a button as shown down here:
<form id="form1" method="get"> <!-- Note: No Action property -->
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" onclick="myJS(this);" />
</td>
</tr>
</table>
</div>
</form>
MyJS file is as:
<script type="text/javascript">
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.open(url);
//window.location = url; //Doesn't work
//window.location.href = url; //Doesn't work
//self.location = url; //Doesn't work
//top.location = url; //Doesn't work
}
</script>
As you can see, it doesn't redirect to the designated URL in the javascript. When I use the window.open then it works. Note that in the < form... > tag, I don't put the action property in it. I don't want to open a new browser, just redirect to the new url within the same browser.
Is there a way to redirect it?
Don't use the form tags. Or, set the "type" attribute of your button to be "button", not "submit". The form submits when you click the button, but you don't want that to happen. Either removing the form or changing the button should fix improper redirection. When you don't specify an action, I'm pretty sure the default is the current URL.
Ok, just an idea. As you haven't set the action parameter, the default behaviour of a submit button is to reload the same page. You alter that behaviour by handling its onclick. Maybe there is a conflict that can be resolved by having return false; at the end of the click handler, which prevents the default action for that event.
Here
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = which.txtAll.value;
var morestring = ""; //More data manipulation here.....
return CONSTANT_SITE_TARGET + allWords + morestring;
}
<form id="form1" method="get" onsubmit="this.action=myJs(this)">
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
to elaborate on a comment:
<script>
window.onload=function() {
document.getElementById("Submit").onclick=function() {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll".value;
var morestring = ""; //More data manipulation here.....
location = CONSTANT_SITE_TARGET + allWords + morestring;
}
}
</script>
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
Try one the options for redirection below. I commented out three of them so that the code stays valid, but you may play around with either and see if it suits your needs.
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.location.href= url;
//window.navigate(url);
//self.location(url);
//top.location(url);

Categories