IE, Edge replaces storage text with 'null' - javascript

So I have this little contact form on my site, and it's suppose to input some text into an empty p tag telling the client that's it's been submitted. It works fine, it does what it should, but in IE/Edge it ignores everything and inputs the word null into the p tags.
You'll have to forgive me, I'm still new to javascript, but I couldn't find anything anywhere to address this bug. Any help would be greatly appreciated.
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
<script>
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
</script>

Your issue is that when the innerHTML of the "thanks" element is set, the string in localStorage is unset.
Then when the form is submitted, the localStorage item is set, but the "thanks" element's innerHTML isn't set (it was set to undefined before).
In order to make sure the "thanks" element is updated when the form is submitted, you need to include the lines that set it in the function that fires when the form is submitted.
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}

On form submit you are calling setReturn function , but when this snippet document.getElementById("thanks").innerHTML = localStorage.getItem("thanks"); is parsed localStorage does not have this key. So you have to first set this local storage before use it's value as innerHTML like in the previous answer.
Also it is odd that you are using localStorge and even you are clearing it, when this thing can be acheived by this snippet
HTML
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
JS
function setReturn(){
event.preventDefault()
document.getElementById("thanks").innerHTML = "Your request was sent successfully!";
}
NOTE: I used event.preventDefault just for demo but in real application you dont need to use it as it will prevent default behaviour or the submit button.
Here is a WORKING COPY
Also you can use an IIF to set up this localStorage.This function will be executed as soon as it parsed and will set up the key thanks to it.
(function(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}())
Then onsubmit you can use your function without making any change
function setReturn(){
event.preventDefault();
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
WORKING COPY WITH IIF
Hope this is helpful

Related

how to submit a text input to somewhere that i can collect submissions

I'm really stuck on this I'm not sure how I would code text being sent or where i could send it to
<div class="comment-box">
<h2> submit quiz </h2>
<form action="#">
<input type="text" name="full_name" placeholder="Full Name...">
<input type="email" name="email" placeholder="Email Address...">
<button type="submit">submit comment</button>
</form>
any help or ideas on how i can do this would be great
Assuming you want to receive this information via email and need a quick and easy solution (however not reccomended), you can use this form tag
<form action=”mailto:contact#yourdomain.com” method=”POST” enctype=”text/plain” name=”EmailForm”>
Ensure you change the email in the form action="" tag.
You can also look into using a more advanced method through PHP.

How can my user hit enter or click a button to submit and be redirected?

So I have this html form:
<form>
<input type="text" placeholder="Equation" id="equation_input" onsubmit="return button_click()"/>
<input class = "search_button" type="submit" id="search" onclick="button_click()" value="Search"/>
</form>
And I need to take the value the user entered in the equation input, add it to the beginning of a url, and then redirect the user to that newly formed url.
I tried this in my script tags:
function button_click() {
var url = `https://exampleurl.com?q=${document.getElementById('equation_input').value}`;
window.location.replace(url);
}
I've tried a couple things, but I'm not sure what's causing the problem so I don't know exactly what to try.
No need for any js to do this. It can be done by default form submit by naming the input and setting action and method attributes of the form.
Note that an <input> has no submit event, only a <form> does
<form method="GET" action="https://exampleurl.com">
<input type="text" placeholder="Equation" id="equation_input" name="q" required/>
<input class="search_button" type="submit" id="search" value="Search" />
</form>

Replace html5 bubble messages with message under fields

I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?
<script type="text/javascript">
$(document).ready(function() {
$('#emailform').submit(function(event) {
event.preventDefault();
$.ajax({
backedn validation
}
});
});
});
</script>
<body>
<form id="emailform" class="laform" method="post" action="*.php">
<label>Email*: </label>
<input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">
<label class="col-md-12 labelcom">MSG</label>
<textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>
<button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>
</form>
</body>
Overriding the HTML required message is not possible. More Information.
Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.
Edit: After doing more research I found another SO post that contained more insightful information.
Apparently, it is possible. But you will have to use Javascript.
This code changes the message of the validation box the HTML required provides. You should probably look up browser support.
document.getElementById("input").setCustomValidity("Message");

HTML5 email validation avoiding js call

I have the following code:
<form>
<input type="email" id="login_email" required>
<input type="submit" value="Sign in" ng-click="signIn()">
</form>
The problem with above code is that signIn() method gets called even if there is an email validation error from HTML5 side. In general how to ensure that signIn() method gets called only when all the input validation of the form are successful?
Use $pristine to find out if the form is empty, and $invalid to find out if the form is populated but has invalid values (maybe an incorrect email, for example).
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
So now your submit button will be disabled (not clickable) until your form is valid.
EDIT
In order to validate only with HTML5 validation, add a name attribute to your form and you can access the validity of it during submission:
<form name="myForm">...</form>
$scope.signIn = function(){
if ($scope.myForm.$valid){
// do sign in logic here
}
}
Maybe even inline the logic on your submit button (if it works):
<input type="submit" value="Sign in" ng-click="myForm.$valid && signIn()">
So signIn would only be called if the first part was true.
EDIT 2
Based on the information found on the AngularJS docs here, can you try the following as well?:
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="signIn()">Save</button>
</form>
$scope.signIn = function () {
if ($scope.myForm.email.$error.required) {
// ...
}
};
We are now following the $scope.myForm.email.$error.required syntax approach.
Try logging $scope.myForm or $scope.myForm.email and see what you get as you modify the value.

Form Submit taking to a new page

I have a simple form. On submit (the submit action is a google docs form submission), it takes to a new page with focus on that page. I want to keep the focus on the current page.
What are my options?
This is the code (also present here )
<html><body>
<form action="https://docs.google.com/a/rangde.org/spreadsheet/formResponse?formkey=dFlSZkt0TzZTWHJyblBiQlNrcmZvZGc6MQ" method="POST" id="ss-form" target="_blank" onsubmit="submitted=true;">
<br>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="Your Name">
<br>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" placeholder="E-mail Address">
<br>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" placeholder="Pledge Amount">
<br>
<input type="submit" name="submit" value="Submit"></form>
</body>
</html>
Depending on what you're trying to do with the resulting form, (and if you're not comfortable relying js do all the lifting) you could also create a hidden iframe on the page, give it a name, and set the form target to the name of the iframe. This is only if you have no interest in having the user ever see the google page itself.
Try AjaxForm, as found at http://jquery.malsup.com/form/, if you're using jQuery
A form's action parameter will always take you to that page.
Here is an example:
POST without Form Method (PHP)

Categories

Resources