Passing form data from one webpage to another - javascript

I was trying to send form data from one webpage to another using this:
Passing data from one web page to another
I am pasting the javascript code of the function i created:
function store(){
window.localStorage.setItem("name",document.getElementById("name").value);
window.localStorage.setItem("email",document.getElementById("email").value);
window.localStorage.setItem("tele",document.getElementById("tele").value);
window.localStorage.setItem("gender",document.getElementById("gender").value);
window.localStorage.setItem("comment",document.getElementById("comments").value);
window.location.href = "contact.html";
}
But the Problem is that the window.location.href is not working and the webpage is not redirected.
I have seen the console for errors but there aren't any.
Can anyone tell Where is the fault?
EDIT 1:
Validate function:
function validate(){
var comment = document.getElementById("comments").value;
var gender = document.getElementById("gender").value;
var len = comment.length;
if (len > 100)
{
alert("Reduce the length of the comment less than 100 characters");
}
else if (gender == "Select Gender")
{
alert("Please Select a gender");
}
else {
store();
}
}
Form's html:
<form class="form-horizontal" role="form">
Submit Button:
<input type="submit" id="submit" value="Submit" onclick="validate()">

Have a look at this plunker:
https://plnkr.co/edit/P4XqhYciFxZeYlRbWXtd?p=preview
<form class="form-horizontal" role="form">
<textarea rows="4" cols="50" id="comments" placeholder="Enter comments"></textarea>
<br />
<select id="gender">
<option value="Select Gender">Select Gender</option>
<option value="male">male</option>
<option value="female">female</option>
</select>
<br />
<button type="button" id="submit" onclick="validate()">Go</button>
</form>
I have updated the plunker. The page is redirecting and you can see that the values are saved in the local storage. It works fine.
Perhaps you had a problem because of your input submit, I used a button instead.

Related

HTML - Input DataList - Check Value is in the List

I want to check if the Value enter in the input is in the datalist.
If not i inform that the value is not in the list, I write something but the submit is done anyway, i miss something ?
Edit: I edit to have a trial form. If i enter productD the submit can't not be done becuase is not in the list defined.
<tbody>
<div class="fichetechniquediv">
<form action="{% url 'createdfichetechnique' %}" method='post' onclick="return myCheckFunction(this)">
<h1>Create the technical Sheet</h1>
<br><br>
<div class="divlot">
<label for="lot">Enter your Lot:</label>
<input type="text" id="lot" name="lot" required minlength="7" oninput="this.value = this.value.toUpperCase()">
</div>
<br><br>
<div class="divproduct">
<label for="productlist">Enter or Select Product:</label>
<input type="text" name="Product" id="productlist" list="productslist" label="'Enter or Select your Product:">
<datalist id="productslist">
<option value="productA">productA</option>
<option value="productB">productB</option>
<option value="productC">productC</option>
</datalist>
</div>
<br><br>
<input class="buttonsave" type="submit" value="Create" name="submit">
</form>
</div>
</tbody>
<script>
function myCheckFunction(form) {
var list = document.getElementsById("productslist");// get the values that are currently under the datalist tag in option tags
var val = document.getElementsByName("Product");// get the user input
if( list.include(val)){ // compare the options with the user input
submit(form)}// if one is equal with the user input submit the form with the method submit();
else{
return false// else don't submit the form, the user will have to change his input
}
}
</script>
Example productD
const list = document.querySelector("#productslist")
const btn = document.querySelector(".buttonsave")
console.log(list.options.length)
if(list.options.length <= 0 ){
btn.disabled = true
}else {
btn.disabled = false
}
Check if is any products. If the script can't see any products disable the button to send. I hope I helped
You cannot use include for DOM elements like you do.
Also you have duplicate IDs
Instead do this:
const list = document.querySelectorAll("productslist option")
document.getElementById("myForm").addEventListener("submit", function(e) {
const val = document.getElementById("productlistInput").value
const found = [...list].find(opt => opt.value===val)
if (!found) {
alert("Please choose an existing value");
e.preventDefault();
}
})
<form id="myForm" action="..." method='post'>
<h1>Create the technical Sheet</h1>
<br><br>
<div class="divlot">
<label for="lot">Enter your Lot:</label>
<input type="text" id="lot" name="lot" required minlength="7" oninput="this.value = this.value.toUpperCase()">
</div>
<br><br>
<div class="divproduct">
<label for="productlist">Enter or Select Product:</label>
<input type="text" name="Product" id="productlistInput" list="productslist" label="'Enter or Select your Product:">
<datalist id="productslist">
<option value="prod1">Product 1</option>
<option value="prod2">Product 2</option>
</datalist>
</div>
<br><br>
<input class="buttonsave" type="submit" value="Create" name="submit">
</form>
There are two things going wrong in this:
document.getElementsById("productslist"); is incorrect. The function is getElementById(...)
document.getElementById("productslist"); will get you an HTML nodes, not the values.
One of the ways to get the values is:
const values = [];
Array
.from(document.getElementById("productslist").options)
.forEach((option) => {
values.push(option.value);
}
Now that you have the values in the values array, you can look it up to check if the value is already present.

Second time button click is not getting new form fields value

I have been trying to validate my form fields and showing alert if any of this fields are empty. But after that if user enters the value in that field and than when they click submit button again it keeps showing the error alert even if there are no fields empty anymore.
I have tried following code and found that it works perfectly fine for the first time that is - if there are any empty fields, it will show the error alert. But after that if user enters the value in that field and then again click submit, it's not updating the entered value in jquery and keep showing null value and that is why it's keep showing error alert. I am not able to find any error. Any help would be appreciated. I have tried following code:
<form id="desc-form" action="addRecords.php" method="POST" enctype="multipart/form-data">
<div class="question-input">
<textarea required placeholder="Write description here..." name="desc" id="desc" rows="5" cols="50"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'desc' );
</script>
<select id="select-gender" name="gender">
// have few options
</select>
<input type="radio" name="subscribe" value="1"> Yes
<input type="radio" name="subscribe" value="2"> No
<a id="submit-btn" class="btn btn-submit">Submit</a>
</div>
</form>
<script type="text/javascript>
$(".btn-submit").click(function() {
var desc = CKEDITOR.instances['desc'].getData();
if (desc === "" || $.trim($("#select-gender").val()) === "" || $.trim($('input[name=subscribe]:checked').val()) != 1) {
alert("Please enter all mandatory details!");
} else {
$("#desc-form").submit();
}
});
</script>
So this code is working when there is empty field, but once any value is entered in all the empty field and when the button is clicked again, it still shows the error alert. I know I am missing minor thing, but not getting it. Any help is appreciated. TIA
$(document).on("click",".btn-submit", function() {
var text = $(document).find('#desc');
var radio = $(document).find('input[name="subscribe"]');
var gender = $(document).find('#select-gender option:selected')
if(text.val() == "" || radio.is(':checked') == false || gender.val() == 'Select') {
alert('Please enter all mandatory details!')
}else{
alert('submit data')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form id="desc-form" action="addRecords.php" method="POST" enctype="multipart/form-data">
<div class="question-input">
<textarea required placeholder="Write description here..." name="desc" id="desc" rows="5" cols="50"></textarea>
<select id="select-gender" name="gender">
<option hidden>Select</option>
<option value="1">MALE</option>
<option value="2">FEmale</option>
</select>
<input type="radio" name="subscribe" value="1"> Yes
<input type="radio" name="subscribe" value="2"> No
<a id="submit-btn" class="btn btn-submit">Submit</a>
</div>
</form>

Jquery Dialogue isn't working

I'm creating a custom alert by using jquery dialogue and currently on click submit (with id=submit) it checks to see if the value of id choose_client = "" and if so, prompt dialogue box and not process form.
What its doing instead is processing the form instead AND not even showing the dialogue. Any ideas why? Here is my code:
$('#submit').click(function(){
if($('#choose_client').val() == ''){
$("<div title='Invoice Error'>Please Choose A Client</div>").dialog();
event.preventDefault();
}
});
html:
<form method="post" action="new_invoice.php">
Client: <select id="choose_client" name="client">
<option name="client_none" value="">Choose A Client</option>
</select>
<input type="submit" id="submit" name="submit" value="Submit" class="step" disabled>
</form><br />
In order for event.preventDefault(); to work, you need to pass event as an argument:
$('#submit').click(function(event){

Javascript form validation not working in IE

I have a very small form and a javascript to validate it. The only field it checks is the email address to see if it's valid.
When I use the form in Chrome, the script works as intended (submits form, unless email is invalid)
When I load the page in IE9, the form won't submit, regardless of whether the email field is completed or not.
Looking at the debug console in IE, the error I have is:
"The value of the property 'submitData' is null or undefined, not a Function object"
My form looks like this:
<form id="contactform" action="http://localhost/test/wp-content/themes/mytheme/enquiry/enquiry-handler.php" enctype="multipart/form-data" method="POST" onsubmit="return validateForm()">
<label for="email">Shipping From?</label>
<select name="from" class="quoteboxSelect">
<option value="0">Please Choose</option>
<option value="51\">United Kingdom<option value="52\">France<option value="53\">Germany<option value="54\">Afghanistan</select><br/ >
<label for="to">Shipping To?</label>
<select name="to">
<option value="0">Please Choose</option>
<option value="51\">United Kingdom<option value="52\">France<option value="53\">Germany<option value="54\">Afghanistan</select><br/ >
<label for="what">Shipping What?</label>
<select name="what">
<option value="0">Please Choose</option>
<option value="26\">Excess Baggage<option value="27\">International Removal<option value="28\">Car Shipping<option value="29\">Freight</select><br/ >
<label for="email">Email:</label><br/>
<input name="email" size="20" /><br/>
<button class="" onClick="submitData();" value="Send request">Get Quote</button>
</form>
and my javascript looks like this:
<script>
function validateForm()
{
var x=document.forms["contactform"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid email address!");
return false;
}
return true;
}
</script>
Can anyone suggest how I can fix this?
Thanks :)
It appears form was changed from using a javascript function bound to the submit button, to using your validation method bound to the submit handler for the form itself.
Try changing:
<button class="" onClick="submitData();" value="Send request">Get Quote</button>
To
<button type="submit" value="Send request">Get Quote</button>
So, your problem is your <input name="email"id="email"size="20" /> should have an id= attribute.
How I found the issue:
I created a jsfiddle to test this: http://jsfiddle.net/4Zz4y/
Ran it in IE with browser mode set to IE9 (F12)
then I saw the error SCRIPT5009: 'submitData' is undefined in the F12 console.
I then found this question: Property 'submit' of object #<HTMLFormElement> is not a function

Disable submit button and display message

id like to be able to disable the submit button when the form is submitted, also id like to add a message like ("this may take a while") when the form is submitted.
<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this);">
<p>Select credit card:
<select tabindex="11" id="CardType">
<option value="AmEx">American Express</option>
<option value="CarteBlanche">Carte Blanche</option>
</select>
</p>
<p>Enter number:
<input type="text" id="CardNumber" maxlength="24" size="24" value="1234" />
<input type="submit" id="submitbutton" />
</p>
</form>
Modify your Validate() function to include disabling the submit button and showing the message:
function Validate(f) {
var isValid = true;
// do validation stuff
if (isValid) {
f.submitbutton.disabled = true;
document.getElementById("submitMessage").style.display = "block";
}
return isValid;
}
http://jsfiddle.net/gilly3/EjkSV/
Add a simple span or something to your HTML:
<span id="waitMessage" style="display: none;">This may take a while....</span>
Then on the click event, show that span and disable the button:
In pure javascript:
document.getElementById('submitbutton').addEventListener("click", function()
{
document.getElementById('submitbutton').disabled = true;
document.getElementById('waitMessage').style.display = 'visible';
}, false);
In jQuery:
$('#submitButton').click(function()
{
this.disabled = true;
$('#waitMessage').show();
});
First, if you're doing a traditional postback adding a message isn't much use - the browser's going to post and reload the page anyways. (unless of course the postback is so long the browser just spins forever...) but anyways... If you don't mind using jquery,
<input type="submit" id="submitbutton"/>
<span style="display:none">This may take a while...</span>
$("#submitbutton").click(function () {
$(this).next().show();
$(this).attr("disabled","disabled");
});
It is not advisable to disable a submit button onclick since that could stop the submission.
I suggest instead something like this
function Validate(theForm) {
if (.....) {
.
.
.
return false; // stop submission
}
// here we are happy
document.getElementById("submitbutton").style.display="none";
document.getElementById("pleaseWait").style.display="";
return true;
}
<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this)">
<p>Select credit card:
<select tabindex="11" id="CardType">
<option value="AmEx">American Express</option>
<option value="CarteBlanche">Carte Blanche</option>
</select>
</p>
<p>Enter number:
<input type="text" id="CardNumber" maxlength="24" size="24" value="1234" />
<input type="submit" id="submitbutton" />
<span id="pleaseWait" style="display:none">Please wait...</span>
</p>
</form>

Categories