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
Related
I am using javascript for validating a form in django template, but it's not working,
the DOM events are not fetching the values. even if i give valid input
to form the console says empty string
HTML snippet
<form onsubmit="return validate_hotel()" action="confirm_hotel/{{hotel_name}}" method="post">
{% csrf_token %}
<div id="left">
<label>Check in date</label>
<input id="checkin" type="date" autocomplete="off" name="checkin" > <br><br>
<label>Number of guests</label><br>
<select autocomplete="off" name="guests" id="guests">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<label>Username</label>
<input id="HotelUsername" type="text" name="username" autocomplete="off">
</div>
<div id="right">
<label>Check out date</label>
<input id="checkout" type="date" autocomplete="off" name="checkout"> <br><br>
<label>Number of rooms</label><br>
<select autocomplete="off">
<option value="1">1</option>
<option value="2">2</option><br>
</select><br><br>
<label> password</label>
<input id="password" type="password" autocomplete="off" name="password" >
</div>
<br><label id="hotel_error_message"> {{error_message}} </label><br>
<button type="submit">Confirm booking</button>
</form>
here is the javascript function i am using to validate things.
i am using document.getElementById() method to fetch the input values.
function validate_hotel()
{
var hotel_username = document.getElementById("HotelUsername").value;
var checkin = document.getElementById("checkin").value;
var checkout = document.getElementById("checkout").value;
var hotel_password = document.getElementById("password").value;
var date_regx = /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-9]|3[01])$/
var username_regx = /^[a-zA-Z0-9_$.#]+$/
var password_regx = /^(?=.*\d).{4,12}$/
var valid = true;
console.log(hotel_username, checkin, checkout, hotel_password);
if (! username_regx.test(hotel_username))
{
valid = false;
}
if (! password_regx.test(hotel_password))
{
valid = false;
}
if (! date_regx.test(checkin))
{
valid = false;
}
if (! date_regx.test(checkout))
{
valid = false;
}
if (!valid)
{
document.getElementById("hotel_error_message").innerHTML = "Invalid inputs";
}
return valid;
};
Javascript code is executed by the browser (client side) and It is not related to backend (django etc ...). Your code has no problem and works correctly.
To check javascript code I'm using Firefox debugger. It is possible to create break points in your javascript code and watch the variables to check if they get value or not.
In Firefox browser, open debugger.
Find the file that contains javascript code
create some break points on some lines
execute your code (submit the form)
and then by hovering the mouse on your variables check if they get value or
not. you can also add some watch to check variables.
when your code is stopped at break points, checking the value of variables is also
available in console.
Anyway, the code works correctly check if you have some elements with same name or something like this.
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>
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.
I am using the validate plugin in order to send some ajax. I am having the problem that I cannot serialise select option and checkbox.
My end result is to have a string looking like dashName=aaa&dashSurname=bbb&dashArea=Blue...
With the code below I can just get the input text values; How can I validate and get the values from other elements?
here the fiddle
$('#updateMemberForm').validate();
$(document).on('click', '#saveMemberBtn', function() {
if ($('#updateMemberForm').valid()) {
var serialize = $("#updateMemberForm").serialize();
$("#test").text(serialize);
console.log(serialize);
}
return false;
});
HTML:
<form method="post" id="updateMemberForm">
<input class="" type="text" name="dashName" placeholder="Name" />
<input class="" type="text" name="dashSurname" placeholder="Surname" />
<br>
<select onchange="" name="dashArea">
<option value="" selected disabled>AREA</option>
<option value="Red">RED</option>
<option value="Blue">BLUE</option>
<option value="Green">GREEN</option>
</select>
<br>
<input class="" type="text" name="dashAddress" placeholder="Address" />
<input type="checkbox" id="checkbox1" name="dash_enable">
<br>
<input type="submit" class="" id="saveMemberBtn" value="SAVE" />
</form>
Since your SAVE button is a type="submit", you would not need a click handler to capture it and test validity. The submithandler built into the plugin is already doing this for you.
$('#updateMemberForm').validate({
submitHandler: function(form) { // only fires when valid
var serialize = $("#updateMemberForm").serialize();
$("#test").text(serialize);
console.log(serialize);
// AJAX goes here
return false;
}
});
DEMO: https://jsfiddle.net/rsfonzL7/
As already mentioned in the comments, when a checkbox is not checked, nothing is sent in the query string, and this is handled on the server side. This has nothing to do with jQuery Validate or .serialize()... this is just how form data is constructed and sent, no matter the method.
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){