Delete textarea text on submit in new tab? - javascript

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 :)

Related

How can data be submitted to server without triggering a page refresh?

I have two form elements; a SELECT drop down list which serves as an input for a javascript function, and a TEXTAREA which also is an input to the same javascript function. The textarea input needs to be submitted to PHP on the server more or less simultaneously with its use by the local javascript. Ideally, both the javascript function and the $_POST submission to the server would be triggered by the same button click, but I have not been able to get this to work because use of the textarea input by the javascript function prevents it being submitted to the server and vice versa (both these actions need the same data apparently causing interference. I have successfully worked around this problem by triggering the DOM submit() to the server with an onmouseout attribute on the input button.
The problem I now have is that the page refreshes wiping away the input values when the textarea input is submitted to the server. I don't want this to happen: I want the selection from the dropdown list to remain selected, and the text that was input to the textarea to remain in the textarea to ramain after submission. I have tried with the elements inside FORM tags and outside - page gets refreshed wiping away the values either way. There are many similar questions and suggested solutions posted on StackExchange, but after spending many hours trying many of them, I have yet to find one that works for me. Basically, they fall into to categories: ones that prevent the submit such as preventDefault and return false, and ones that don't prevent the refresh or don't work at all such as various javascript/jquery submit methods. To me, such submit methods beg the question of how does the server know anything about the method used to send the submit (other than whether it is GET or POST)? Doesn't the php code on the server receive the same $_POST array regardless of the method used to send it? How would it know the difference between an html form submit, a DOM submit or a javascript/jquery submit? It is not surprising that they all trigger the same page refresh in response.
It seems like there surely should be some simple way to retain the form values after submit because surely there are many times one would want to do this.
P.S. I am no fan of jquery, I found ajax to be much easier before jquery was created. That said, at this point I would appreciate anything that works. I have almost no familiarity with jquery so please, for any responses that use jquery, please give an example of how it would be implemented in my case (where it would be placed and how it would be triggered).
PreventDefault, return false, all manner of javascript and jquery submits, removing the FORM tags, sending the return to a hidden iframe
<select id="thisselection" class="sameline"><option selected>Select this</option></select>
<script>
function sendTextarea() {
document.getElementById("pform").submit();
}
</script>
<form action="" name="pform" id="pform" method="post">
<textarea id="text" class="sendbox" name="text" cols="45" rows="10">Hello world</textarea>
</form>
<input type="button" value="Send" id="pform" onclick="myFunction.speak($('#text').val(),$('#thisselection').val());" onmouseout= "sendTextarea();"
/>
Everything works OK but I have not found a way to send the textarea input to the server without triggering a page refresh.
I wish I could simply prevent the page refresh, but lacking a means to do so, it is possible to save and restore the form values after submit (as suggested by ADyson. There is something in html5 called localStorage or sessionStorage, and there are ready-made scripts that make it easy to use, including savy.js and formsaver.js There are several of them at https://www.jqueryscript.net/tags.php?/localStorage/ savy.js works for my purpose

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.

Text fields don't get updated using the browser back button

I have been looking for information about this but I don't get with the solution.
I have some text fields on a page which I get updated on blur making use of jQuery events.
There's no form to submit, the update took place in the background using jQuery $.post.
If a user updates those inputs, then clicks on a link to go to another section of the page and then comes back using the browser's back button, those inputs won't show the last values set by the user but the previous ones in case there were, or empty text inputs if there weren't.
Users are reporting this as a bug (even is more a browser behavior), and I wonder if there is any solution for this.
I have been taking a look at things like this or this, but they don't solve the problem I have. I have no forms, I have no submit and I don't want to reset the form.
I've noticed this problem doesn't take place in IE 9 and either in Firefox but it does on Chrome.
The user can navigate to different pages (more than 30) with more than 12 text fields in each and therefor I have discarded the idea of storing them on sessions.
Is there any way to solve it?
Thanks.
I do not know if my solution can solve you're problem , but:
what if you bind data to you're input? e.g you can set dinamically data on input
$('input').data( 'val' , $(this).val());
and then re-bind it through
$('input').val( $(this).data() ) ;
Do not follow exactly these lines of code , I'm trying to give you an idea of what I'm wondering. I hope that it can help you.
http://api.jquery.com/data/ doc for .data()

How to detect when browser places saved password?

I'm trying to detect when a browser places a saved username and password into the input fields. I've looked at this post , but I don't have the option to change this functionality, and the other solutions on don't work.
Basically, I have a disabled login button if the fields are empty on load. But when a browser fills in the input, it doesn't enable the button. I'm trying to find how to see if it changes.
I'm using jQuery and JS.
I've tried .change, on .ready, on .load, and all. It seems to happen after the .load event.
Does anyone know a solution to this? I would like to avoid using any sort of timeout.
I think there is no way to detect if the browser has some buil-in feature that pre-populates the fields.
You could solve the problem with the a timer that enable the button, if something is there.
Something like this:
setInterval(function (){
if($("#username").val()!=""){
$("#loginbutton").attr("enabled","enabled");
}
},1000)
The key thing is that the field will be populated without there having being any keypresses in the field.
So if you trap .keypress on the input field to know if a key is any pressed, then if you get to submitting the form and find there were no keypresses despite a value being there - then you can be somewhat sure that the browser pre-populated it.
If you want to know before submitting (soon after the page loads), you'd want to run a check on an interval that sees if the value has changed despite no key presses.
As #japrescott pointed out, you might want to check for .focus as well in case the user pastes a value in.
Haven't test this, but couldn't you simply compare the default values of each field to the values of each field after the page is loaded (or .2 seconds after the page is loaded if that's an issue)?
Give a shoot to Jquery .live() function
$('.element').live('load', function(){
enableLogin();
});

Ghost Submit Button Still in HTML Form Submission

I have a form that I'm validating with JavaScript before allowing the form to POST. The validations are done using the LiveValidation library, which I'm having defer doing the validations until the user attempts to submit the form. So, the Javascript is executing on the form's onsubmit event, returning false if the form is invalid to stop submission. The form also has multiple submit buttons to determine which action to take with the information on the server's side. The problem that I'm running into is that if the user clicks on one submit button, fails validation, and then successfully submits again, the first button clicked is also part of the POST, so the action taken on the server's side sometimes isn't the desired one. I thought that perhaps the problem was with the validation library, but now I'm starting to wonder if it isn't deeper. If a form's onsubmit returns false, does the set of POSTed variables get cleared or cached for the next submit?
Edit: OK, so this is an instance of the "I'm a dumbass" bug. I had added a hidden field with this name/value pair through JavaScript earlier, because of some funky business rules on the page. I just had to remove that, and it's all fine again.
Had to wait for some time to pass before it would let me answer my own question. Solution reproduced below:
OK, so this is an instance of the "I'm a dumbass" bug. I had added a hidden field with this name/value pair through JavaScript earlier, because of some funky business rules on the page. I just had to remove that, and it's all fine again.

Categories