We Keep Coding

How to close popup window after clicking on submit button without page reload?

I have a Script to open one popup with form(for comparing the input field value with one fixed code) on page load & after clicking on the submit button need to close popup without page reload. Here is my code.
"Html form code"
<form method="post" onsubmit="return checkCode(this);">
<div class="form-group">
<input type="text" required class="form-control" placeholder="Name" name="name">
</div>
<input type="submit" name="save" class="btn btn-primary">
</form>
"Script Code"
"popup script"
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
"comparing function code"
<script type="text/javascript" language="JavaScript">
function checkCode(theForm) {
if (theForm.name.value != 'SS-2018') {
alert('Code not matched!');
return false;
} else {
return true;
}
}
</script>
Please check this & help me to get it working correctly. Everything is working correctly I just want on click submit page don't reload simply close the popup window & keep on the same page.
Thanks & Regards
Cue

I'm assuming the HTML that you have there is inside of your popup or overlay. It's a bit hard to tell.
If you want to submit the form without reloading or changing the page, you'll have to use some form of AJAX. Since it looks like you are using jQuery, you can use their ajax() function.
To get the data of the form itself, you can use their serialize() function to scoop the data up into a POJO (plain old JavaScript object).
You would do this on whatever makes sense to call submit. You could probably do it instead of your return true in your checkCode() function (and always return false).
It'd be something like this:
<script type="text/javascript" language="JavaScript">
function checkCode(theForm) {
if (theForm.name.value != 'SS-2018') {
alert('Code not matched!');
} else {
$.ajax('http://example.com/post/location', { method: 'post', data: $(theForm).serialize() })
.then(response => { /* do something with response */ })
.catch(err => { /* handle error */ });
}
return false;
}
</script>

Comparing html text inputs and redirecting to another page using Javascript

I am brand new to Javascript and am just using it to make a simple website for fun. I have tried searching the web but am still stuck, so if you could help me or redirect me towards other help, that would be great.
I am trying to use Javascript to send a user to another html page in my site if their input matches my criteria. So I wanted to use an if/else statement to do this: if the text input equals ODQHVHMJKD, it would send them to page3.html. However when I try this on the browser, nothing happens--it just takes me to an identical page with ?codebox1=f&button1=Submit at the end of the address.
Here is my script section:
<script type="text/javascript">
function testResults (form) {
if (form.codebox1.value == ODQHVHMJKD) {
window.location.pathname = 'page3.html';
}
else {
window.alert("Try again!");
}
};
</script>
Here are my form elements:
<form name="form1" method="GET">
<input name="codebox1" type="text" />
<input name="button1" type="submit" value="Submit" onClick="testResults(this.form)"/>
</form>
Can you help me so that I can get this to work? It's more than likely I've done everything completely wrong--any help is appreciated!

Try this,
function testResults (form) {
if (form.codebox1.value == "ODQHVHMJKD") {
window.location = 'page3.html';
}
else {
window.alert("Try again!");
}
return false;
};

You need to prevent the default action of the form. In the submit event, call e.preventDefault(); or return false In addition, you need quotation marks around ODQHVHMJKD
Js Fiddle: http://jsfiddle.net/prankol57/Ht45t/

Maybe this can help you.
<form name="form" onsubmit="Results()">
<input type="text" name="fname" id="val">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function Results() {
var val = document.getElementById('val').value;
if (val == "ODQHVHMJKD") {
window.location = 'page3.html';
} else {
window.alert("Try again!");
}
};
</script>

Avoid page submission on button click if condition false in javascript

I am checking the textbox value in javascript. and saving to database. where as my save is of submit type. I want if textbox value is greater than 100 then it should alert. and after alert , page should not submit.

Firstly, bind the click event of that button to a function. Secondly, use event.prevent default to stop that button from submitting the form. Thirdly, validate the value you want. If validated, use form id to submit the form. Something like this:
$("#ButtonId").on("click", function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
if ($("#InputBoxID").val() < 100) {
$("#FormId").submit();
}
else {
alert("your message");
}
});
Above code is in jQuery, so do not forget to add the reference to jQuery.

I think you're looking for something like:
<form id="myForm" onsubmit="return validateForm();">
<input type="text" id="textfield"/>
<button type="submit">submit</button>
</form>
<script>
function validateForm(){
var value=parseInt(document.getElementById('textfield').value);
if(value>100){
alert('value is no good. larger then 100');
return false;
}
}
</script>
If you can show me your code I'd be happy to help you implementing such a feature.

Here you have an example of how to do it. I used a limit of 10 characters to make the test easier: Try if yourself
HTML:
<input type="text" id="myTextBox" onkeyup="checkValue(this)" maxlength="10"></input>
<input id="sendButton" type="submit" value="SEND"></inpu
JAVASCRIPT:
function checkValue(textbox) {
if (textbox.value.length > 10) {
alert("TEXT TOO LONG");
document.getElementById("sendButton").disabled = true;
}
else
document.getElementById("sendButton").disabled = false;
}

jquery, alert when trying to submit empty field in form

I'm sure I must have missed something really obvious, but can't for the life of me see what it is.
I have the below javascript, that (in theory) looks at the form when I click submit, and tells me if I have left the 'RefNo' field blank (in the final form there will be various fields to check, so I have used class='required' to identify them all). But so far, when I click submit, nothing happens (except the form is submitted with the missing data).
I've tried various options that I have found on the internet, and this seemed the most promising.
If anyone can see what I have done wrong it would be really appreciated.
<html>
<head>
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function submitForm()
{
$("#Form1").submit(function()
{
$('.required input').each(function()
{
if ($(this).val() == '')
{
$(this).addClass('highlight');
}
}
);
if ($('.required input').hasClass('highlight'))
{
alert("Please fill in a Ref Number and try again");
return false;
}
}
);
}
</script>
</head>
<body>
<form method="POST" action="test9.php" name="Form1" ID="Form1">
<input TYPE="text" ID="RefNo" NAME="RefNo" VALUE="" size="25px" class="required"></input>
</br>
<p>
<input type="submit" Name="submit" id="submitButton" value="Report History" onClick='submitForm()'></input>
</p>
</form>
</body>

Your selectors should be $('input.required'), not $('.required input').

First, I think you should use Jquery validation plugin.
Ohterwise, this code should work :
-add a onsubmit="return submitForm()" in your Form tag
<form method="POST" action="test9.php" name="Form1" ID="Form1" onsubmit="return submitForm();">
-get rid of the onclick on the submit button
-and here is the submitForm function :
function submitForm() {
var valid = true;
$('input[class="required"]').each(function() {
if ($(this).val() === '') {
alert("One field is empty and try again");
valid = false;
}
});
return valid;
}
But I really recommend jquery.validate.js

Your selector appears to be a bit off:
It should be $('.required')
The way you have it tries to select an input nested inside a Required class.

Instead of doing it on form submit, remove the submit input type from the button and just have it be a regular button.
With that in mind, your javascript should be:
<script>
$('#submitButton').click(function () {
$('input.required').each(function() {
if ($(this).val() == '') {
$(this).addClass('highlight');
}
});
if ($('.highlight').length > 0) {
alert("Please fill in a Ref Number and try again");
return false;
}
else {
$('#Form1').submit();
}
});
</script>
Otherwise, the way that you're doing it, you would have to cancel the event until you run your check for missing data, and then submit the form anyway. This way keeps you from having to cancel the action, as older IE browsers do that differently than the other browsers, and even newer versions of IE. So it makes your code more readable.

The selector should be either $('input.required') or $('#RefNo').
$('#RefNo') is more faster since it uses native getElementById method.

Jquery set an event function on a form

I have a form thats displayed in a modal box now I want to be able to use the same modal box for 2 different pages where they do slightly different things. Is there a way I can set an event or something for the forms submit button to set which javascript function it calls.
I want to do this from within javascript without changing my form code.
Whats the best way to do this?
Can I set a function to a variable and have it called by my button code?
ie:
var buttonFunction;
//Set the button function on load
function MyButtonFuntion() {
buttonFunction();
}

you could do it like this:
var buttonFunction;
if(someCondition){
buttonFunction = function(){
alert("some action");
};
}else{
buttonFunction = function(){
alert("other action");
};
}
function MyButtonFuntion() {
buttonFunction();
}

You may declare a variable with the function name to be called on submit. The following code is an example. Declaring the function to call in a variable functionToCall inside the form will always work here.
<script type="text/javascript">
function callMyFunction(formName) {
var formObj = eval("document." + formName);
if(formObj != null) {
var functionToCall = eval(formObj.functionToCall.value);
if(functionToCall) {
functionToCall();
}
}
}
</script>
<form method="post" name="form1">
<input type="hidden" name="functionToCall" value="form1Function"/>
<input type="button" onclick="callMyFunction('form1')"/>
</form>