Ralf17 Ralf17 - 6 months ago 14
Javascript Question

Cancel a form to be submitted, do not change the data of the entity

I have a div

<div id="updateChoice%s" class="text-center"></div>


which shows a the following upon a "updateText" button is clicked

function updateText(urlsafe) {
document.getElementById("updateChoice"+urlsafe).innerHTML +=
'<br><br><form id="dynForm" action="/updateText" method="post" >' +
'<textarea name="newContent" rows="5" cols="80"></textarea>' +
'<input type="hidden" name="update" value=' + urlsafe + '>' + '<br><br>' +
'<input class="choice" type="submit" value="Submit"></input> <button class="choice" onclick="cancelUpdate('+ urlsafe +')">Cancel</button>' +
'</form>';
}


I want to cancel the updating of the text but it doesn't work unless "newContent" is empty, here is /updateText file and cancelUpdate(urlsafe)

/updateText:

class UpdateText(webapp2.RequestHandler):
def post(self):
greeting_key = ndb.Key(urlsafe=self.request.get('update'))
event = greeting_key.get();
if(self.request.get('newContent') != ''):
event.content = self.request.get('newContent');
event.put();
self.redirect('/events');


cancelUpdate(urlsafe):

function cancelUpdate(urlsafe) {
document.getElementByName("newContent").innerHTML="";
document.getElementById("dynForm").submit();
}


any ideas?

Answer

The /updateText handler remains on not updating the text if upon submission it is empty, so I did not change anything:

class UpdateText(webapp2.RequestHandler):
     def post(self):
         greeting_key = ndb.Key(urlsafe=self.request.get('update'))
         event = greeting_key.get();
         if(self.request.get('newContent') != ''):
           event.content = self.request.get('newContent');
           event.put();
         self.redirect('/events');

In the cancelUpdate(urlsafe) function, I have then again used this aproach:

function cancelUpdate(urlsafe) {
       document.getElementById("updateChoice"+urlsafe).innerHTML = "";
}

Add \' to the parameter urlsafe as I pass it and not ". So here is correct javascript function call to div#updateChoice%s is:

function updateText(urlsafe) {
    document.getElementById("updateChoice"+urlsafe).innerHTML =
    '<br><br><form id="dynForm" action="/updateText" method="post" >' +
   '<textarea name="newContent" rows="5" cols="80"></textarea>' + 
   '<input type="hidden" name="update" value=' + urlsafe + '>' +   '<br><br>' + 
   '<input class="choice" type="submit" value="Submit"></input><button type="button" class="choice" onClick="cancelUpdate(\''+ urlsafe +'\')">Cancel</button>' +
   '</form>';
}
Comments