I would like to say when I submit empty form that do not disappear from container div till I fill

Hello sir,

I have wrote form validation code in javascript, it is working fine on register.php

In index.php I loaded register.php in a div through ajax. When I am trying to submit empty form then form validation code does not work. And register.php disappear from container div.

I would like to say when I submit empty form that do not disappear from container div till I fill a value and click on submit button.
My program code is written bellow. If anybody help me then I will be great full of him/her.

Register.php

<?php
$page=$_SERVER['SCRIPT_NAME'];
if(isset($_POST['username']) && !empty($_POST['username'])){
echo 'OK';
}
?>

<script type="text/javascript">

function check(){
if(document.getElementById('username').value == ""){
document.getElementById('username').style.borderColor="red";
return false;
}
}

</script>
<form action="<?php echo $page;?>" method="POST" onsubmit="return check();">
Your name: <input type="text" id="username" name="username" />
<input type="submit" />
</form>

Index.php

<script type="text/javascript">
function load(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
else{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlHttp.onreadystatechange= function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById('container').innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open('GET','register.php' ,true);
xmlHttp.send(); }
</script>

<a href="#" onclick="load();" >register</a>
<br />
<div id="container"></div>


<style>
#container{
width: 350px;
padding: 40px;
background-color: beige;
}
</style>

 

Perhaps it won't disappear if you tell script what to do when username is empty?
In your register.php, see below:

$page=$_SERVER['SCRIPT_NAME'];
if(isset($_POST['username']) && !empty($_POST['username'])){
    echo 'OK';
}
else{
    //what to do if username is empty?
}

PHP:

 

if username is empty then form should not submit.

 

Try validate your register.php to w3c validation service?

 

Can I just ask why in the world you're complicating stuff like this?

Create ONE file with the form. Send the content of that form to a php-processing file. That processing has to check to see if the form is empty, and if it is, return an error to the user, because the user can turn off javascript.

To improve on that, you can do a lot of things to avoid submitting the form with javascript - you can disable the submit-button until there is actual content in the username-input, you can check the input for allowed values before you allow submitting the form (via ajax) and so forth and so on.

But the monstrosity you have there is over-complicated and no good.

 

'Monstrosity' - Are you serious? Lol

 

Very.

Instead of having a simple contact-form (or whatever form, really) either posting to itself, or a processing PHPfile, he is loading the form into a page via xmlHTTPrequest (why??) and trying to make it work properly. It's overly complicated, and completely useless.

Create the file with the form, create the processing file, and turn off javascript. If everything is done correctly, the form will post to the processing file, and depending on what result you get, it will redirect either back to the file with the form, another page, or just show errors (preferably back at the form so you can correct them) and so on.

If you turn javascript on again, you could have a function posting the content of the form via ajax to the processing file, fetching the return values, and displaying errors / redirecting / doing whatever is wanted based on the reply from the processing file.

All very simple, very easily made, it gracefully degrade (works without both JS and CSS) and it makes the whole page better / nicer if the JS and CSS is there.

 

What OP tries to implement is not impossible, but some things may become redundant.

 

When it's needlessly and pointlessly overcomplicating the simplest of things (a contact form) with scripttardery? Damned straight skippy!

The unwritten rule of JavaScript comes into play here in spades: If you can't make a working page without JavaScript FIRST, you likely have zero business adding scripting to it!

Good scripting should enhance a working page, not supplant or worse, be the only means of providing functionality... and ANYTHING you waste time with scripttardery checking client side STILL has to be checked again server-side, so why the **** bother with checking it client side? Much less with scripting when modern browsers have a perfectly good "required" attribute. Legacy browsers fall back on the server validation, Oh WELL!

I'd do a rewrite, but given what was shown it's incomprehensible gibberish and NOT how I'd even try to approach building something like that.

 

how to return xmlHttp.responseText() ?

 

Hey Saji the order of your files is kind of confusing. I am not sure which one is calling which.
From what I can understand you want the following

form in the main Index.php ---> submit --> Javascript function to check form for empty fields
--> 1) If empty script outputs some message error ( No HTTP request or PHP should be needed here, maybe a javascript message window?), just stop here

--> 2)) if not empty (checked by the javascript function) --> this calls the function with httprequest
--> The httprequest in a div of its own sends the info to the register.php
which does something else DATA SUBMITTED here.

Now the issue here is that do you want everything to be on one page thats why the http request?
Because having a form there is kind of confusing, because it has not been called yet
I would rather you have two divs, one for the form and one for the http request to display the register.php in. And a javascript command to make the div of the form disappear since register.php becomes the focus here .

Does that sound like a better idea? Now of course this needs javascript enabled.