Calling javascript on onsubmit to post users input - javascript

I'm having a really difficult time with this onsubmit. Every time I try to call my function, I get nothing. As soon as I hit 'submit', my form empties and nothing happens. It should be calling a new page to display the information that the user has entered.
I have gone through question after question on stackoverflow and can't find my answer. I'm just learning Javascript and this is probably going to be a very easy question for you all, but since I can't find anything on here that's novice level, I'm stuck referring to you guys for my 'simple' answer. I'm not sure how to submit this question without a huge block of code... so... I apologize for the lengthy code. I did only use one example from the form.
<script>
function ScheduledEvent(evtDate){
evt.evtDate = evtDate;
evt.PrintEvent = PrintEvent
}
function PrintEvent(){
document.write("<p> You have scheduled an event on " + evt.evtDate);
}
function Validate(){
with (document.evtForm){
events = new ScheduledEvent(evtDate.value);
}
with (events){
evt.PrintEvent();
}
return true;
}
</script>
<form name="evtForm" onsubmit="Validate()">
If you need to see more code I'll be happy to oblige. All of the form names and variables match. I cannot figure this out and would love your help.

Well your doing it wrong then. There are a lot of reasons behind this -
Your Validate() method is returning true, which means it will not stop the form submit. So the form will be submitted and the same page will reload. Which explains why it is getting reset. It's happening locally so you are not being able to see the page refresh.
You are calling PrintEvent() before the form is submitted. Thus document.write is actually writing the value in the document but after writing, the page is posted back and reloaded. So you cannot see the updated information.
You are using document.write, which only write on current page, so it will not take you to a different page. And remember, every time a page loads, so does the javascript, which means your javascript objects and states are lost and it is re-initialised.
When javascript writes with document.write it will not clear previously rendered items, that includes HTMLs, the form and whatever you have on that page already rendered. It will just append the line at the bottom of the body tag. To test, return false from validate and you will be able to see the item written.
If you are willing to use a new page, then you have to save the value to somewhere, either on the server or using client local storage or cookie. Try googling about how to do that.

Related

Stop form from submitting without javascript

The problem is quite simple to understand but quite hard to execute. I am currently facing some clients that turn off their browser Javascript by default and this screw up my website a bit. Since my website send ajax requests on form submit, stop the form submit using Javascript, turning JS off means the form will be sent through and that's unexpectedly.
What I am trying to ask and achieve is whether it is possible to just using html purely to stop a form from submitting?
I think the best answer is; to have the original form action point to an error page, asking the user to turn on javascript.
Then let your javascript code fill in the form action parameter, once the ajax state is complete.
Alternatively or additionally, you could use a <noscript> tag as suggested in the comments, to generate a message on the original page.
I think you can simply change your submit button tag to an input and style it to look like a button and remove the type="submit" that's all. with out ajax it will not respond.

Manually invoke the jquery validation to show input errors

I got a form in which I'm using unobtrusive jquery validation and I just wanted to save myself the trouble of creating custom client side validation attributes for checking input file size and captcha since I'm not reusing them anywhere else.
The problem is if I do the onclick="return formValidation();" all will be fine but the captcha and file size error appear before the jquery validation since the form is not posted and is actually prevented from being posted as the function returns false. But I want all errors to be shown at the same time. So I do
function formValidation(){
$validator.showError() // put here on purpose to test if it is blocking
return checkCaptcha() && checkFileSize() == true;
}
I see that nothing can be executed after the '$validator.showError()". Since I'm not a JQuery and JavaScript enthusiast I gotta admit that I just find the $validator.showError() in an accepted answer in StackOverFlow so I'm unsure if it is actually correct. Looking for the solution.

Getting field values from another form to perform validation on the web in lotus notes

I have a radio button field on a lotus notes form (say main form). If it is selected as "Yes", a link gets unhidden. On click of this link, another form opens up. If in the radio button, "Yes" is selected in the main form, the contents in the second form must be filled. So I need to write a validation if the radio button field is "yes" and the field inside the second form is not filled, then it should show a popup asking to fill the field in the second form. How do I get the value of the field in the second form on the main form for me to perform the validation?
You literally cannot do what you've described you want to do. The second (pop-up) form and its content no longer exist in the client (browser) context when you want to do validation on the first form's data. There are three possible ways to tackle the problem but only two of them are actually practical.
Let's dispense with the impractical method first. That would have the pop-up form write something back to its parent/opener, either as a JavaScript variable or as DOM content (a field outside of the Domino form or hidden element or some such) or, perhaps as a cookie value. Setting up the opener relationship reliably can be a problem cross-browser, but it is doable. The problem is that no matter how you do this, you have no guarantee that the value will be there when you need it (or expect it) except when the parent form is initially filled out. If the document is ever edited, you have no way of knowing whether or not the user has filled in the data on the pop-up. Anything you may have written to JS variables or the DOM during the initial session with the form only exist during the initial session. Cookies aren't permanent; they can be cleared by the user even if you try to give them eternal life via the expires value. No matter how you do it, you'd be telling anybody who has previously filled out the data you want that they need to fill it out again.
The second method would be to make a call back to the server to see if the pop-up form has been submitted and turned into a Notes document. That doesn't scale at all; even if everything is happening on a single server, there's no way to guarantee that the document you are looking for will have been written and indexed by the time you need it, and there is a time factor involved. If the user has already seen the validation nagging once, does what you tell them to do, and then gets the nag again, you're not making any friends.
The third method is to do everything you need to do on one form. (You can use CSS to do the pop-up if you're married to the pop-up idea.) And, you know, it really doesn't matter at all whether or not you would prefer to do it another way, it's the only way that will be reliable and make happy users. Yes, it will mean a little bit of extra work on your part. You're a developer - that's what you do for a living. You can even keep the structure of the existing application intact; WQO and WQS agents mean that you can glue documents together before sending them to your user, and pull them apart again before you save them. This is the only method that is guaranteed to be fast enough and reliable enough to be usable on the web.

Delete textarea text on submit in new tab?

So I'm working on a chat system and even though I know it works in a pretty lame way - submitting messages in a new window () - I'm interested if there's any way to reset the textarea's content after sending the message.
Now, the problem is, I've even actually found ways to do so via JavaScript (editing the textarea's value), but I don't know how to "launch" the javascript after submitting the form.
Obviously, I can just use onSubmit(), but that delete's the value BEFORE sending the data. So it works, but sends an empty text.
Any ideas?
Thanks!
A common solution is to copy the values of your <form> into an object which you can then convert to JSON. That way, you have a copy of the values which doesn't change when you reset the fields of the form. jQuery will make this very simple. See also: serializing and submitting a form with jQuery POST and php
The second solution is to submit the form and as the last thing, add a timeout which resets the form. But there will be a small gap and a user might be able to type while your handler is clearing the form.
Okay, so I've used a JavaScript timer to run the clearing function 300 ms after clicking the submit button. Works. Thanks all :)

Dynamically Refreshed Pages produced by Python

I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!
I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".
I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.
Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.

Categories