my link chat : http://www.mzzzik.com/chat/
File js
window.onload = function() {
// only needed becouse of a bug in ie8 rc1, there is no BG-image without any div manipilation by js
Element.show('lay_pw');
Element.hide('lay_pw');
//-------------------------------------------
$("login").onsubmit = function(){
if (!Element.visible('lay_pw')) $('pw').value='';
$('submit_button').disabled = true;
var myAjaxObj= new Ajax.Request(
"./?CheckUserName",
{
onSuccess: function(ajaxResult) {
if (ajaxResult.responseText==1) location.href='./?Chat';
else{
$('submit_button').disabled = false;
if (ajaxResult.responseText=='pw' || ajaxResult.responseText=='pw+invisible') {
Element.show('lay_pw');
if (ajaxResult.responseText=='pw+invisible') Element.show('lay_invisible');
Element.hide('lay_gender');
$("pw").focus();
} else {
if (ajaxResult.responseText=='blacklist') location.href="./?AfterBlacklistInsertion";
else if(!ajaxResult.responseText.empty()) alert(ajaxResult.responseText);
else {
$('username').value='';
$('username').focus();
$('coloruser').value='';
$('coloruser').focus();
}
}
}
},
postBody: $("login").serialize()
}
);
return false;
}
}
On this Page
<form id="login" action="">
<input type="hidden" name="4f4940ef9f9874b3066833f786f06b2c" value="1327851439" />
<input type="text" name="username" id="username" value="" maxlength="100" />
<input type="submit" id="submit_button" name="go" value="enter" />
</form>
When try put
<form id="login" action="" target="_blank">
show link
http://www.mzzzik.com/vb/chat/?56f130145f599f85cb0ebefe5e=13288799&username=&pw=&gender=35&go=%D8%A7%D8%B6%D8%BA%D8%B7+%D9%87%D9%86%D8%A7+%D9%84%D9%84%D8%AF%D8%AE%D9%88%D9%84!
and This shows the message
Fatal error: Class '56f130145f599f85afe1d1cb0ebefe5e' not found in /home/abdooo/public_html/vb/chat/index.php on line 28
Be a link like this
http://www.mzzzik.com/chat/?Chat
How can be accessed directly without problems from within iframe
and can make Auto submit form after 5 seconds in chat
<script type="text/javascript">
window.onload=function(){
window.setTimeout('document.login.submit()', 500)
}
</script>
Use Version
ET - Chat v3.x
http://www.sedesign.de/de_produkte_chat-v3.html
Waiting for solutions
Thank you
Related
I have an admin panel where I have an option to add a user into database. I made a script so when you click the Add User link it will load the form where you can introduce the user infos. The thing is, I want to load in the same page the code that is run when the form is submited.
Here's the js function that loads the file:
$( ".add" ).on( "click", function() {
$(".add-user-content").load("add-user-form.php")
});
and here's the php form
<form id="formID" action="add-user-form.php" method="post">
<p>Add Blog Administrator:</p>
<input type="text" name="admin-user" value="" placeholder="username" id="username"><br>
<input type="password" name="admin-pass" value="" placeholder="password" id="password"><br>
<input type="email" name="admin-email" value="" placeholder="email" id="email"><br>
<input type="submit" name="add-user" value="Add User">
</form>
<?php
include '../config.php';
$tbl_name="blog_members"; // Table name
if(isset($_POST['add-user'])){
$adminuser = $_POST['admin-user'];
$adminpass = $_POST['admin-pass'];
$adminemail = $_POST['admin-email'];
$sql="INSERT INTO $tbl_name (username,password,email) VALUES('$adminuser','$adminpass','$adminemail')";
$result=mysqli_query($link,$sql);
if($result){
echo '<p class="user-added">User has been added successfully!</p>';
echo '<a class="view-users" href="view-users.php">View Users</a>';
}else {
echo "Error: ".$sql."<br>".mysqli_error($link);
}
}
?>
Maybe I was not that clear, I want this code
if($result){
echo '<p class="user-added">User has been added successfully!</p>';
echo '<a class="view-users" href="view-users.php">View Users</a>';
}else {
echo "Error: ".$sql."<br>".mysqli_error($link);
}
to be outputted in the same page where I loaded the form because right now it takes me to the add-user-form.php when I click the submit button.
Thanks for your help!
if you do this the code will be redirected on post to your page:
<form name="formID" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
you should add a validation so it doest show the form if you receive $_POST['add-user']
You have to submit your for via ajax.
Alternatively you don't need to load form html, just hide the form and on add user button click show the form.
Check this code. Hope that helps you :-
// Add User Button
<div class="color-quantity not-selected-inputs">
<button class="add_user">Add User</button>
</div>
// Append form here
<div class="add_user_form"></div>
// for posting response here
<div class="result"></div>
Script for processing form and appending user form
<script>
$(function(){
$( ".add_user" ).on( "click", function() {
$(".add_user_form").load("form.php")
});
$(document).on("submit","#formID", function(ev){
var data = $(this).serialize();
console.log(data);
$.post('handler.php',data,function(resposne){
$('.result').html(resposne);
});
ev.preventDefault();
});
});
</script>
form.php
<form id="formID" action="" method="post">
<p>Add Blog Administrator:</p>
<input type="text" name="admin-user" value="" placeholder="username" id="username"><br>
<input type="password" name="admin-pass" value="" placeholder="password" id="password"><br>
<input type="email" name="admin-email" value="" placeholder="email" id="email"><br>
<input type="submit" name="add-user" value="Add User">
</form>
handler.php
<?php
include '../config.php';
$tbl_name="blog_members"; // Table name
if(isset($_POST['add-user'])){
$adminuser = $_POST['admin-user'];
$adminpass = $_POST['admin-pass'];
$adminemail = $_POST['admin-email'];
$sql="INSERT INTO $tbl_name (username,password,email) VALUES('$adminuser','$adminpass','$adminemail')";
$result=mysqli_query($link,$sql);
if($result){
echo '<p class="user-added">User has been added successfully!</p>';
echo '<a class="view-users" href="view-users.php">View Users</a>';
}else {
echo "Error: ".$sql."<br>".mysqli_error($link);
}
die;
}
?>
What you are looking for is to submit the form using AJAX rather than HTML.
Using the answer Submit a form using jQuery by tvanfosson
I would replace your
<input type="submit" name="add-user" value="Add User">
with
<button id="add-user-submit">Add User</button>
and then register an onClick-handler with
$( "#add-user-submit" ).on( "click", function() {
$.ajax({
url: 'add-user-form.php',
type: 'post',
data: $('form#formID').serialize(),
success: function(data) {
$(".add-user-content").append(data);
}
});
});
to add the actual submit functionality.
My problem is that after clicking on submit button the page will go to php file any way my html code is like this
<form action="register.php" method="post">
<input type="text" name="name" id="name"><div id="adiv"></div>
<input type="submit" value="submit" id="button">
</form>
and my jquery code goes like this
$('#name').focusout(function(){
if($('#name').val().length==0){
$('#adiv').html("please enter name")
}
});
$('#button').click(function(){
if($('#name').val().length==0){
$('#adiv').html("please enter your name")
}
});
but after clicking submit button it redirects to php file and doesn't show any error and store blank data in the database.
Because your input type is submit you can either change the type to button or add event.preventDefault() to avoid automatic passing of form
use event.preventDefault()
$('#button').click(function(e) {
e.preventDefault();//this will stop form auto submit thus showing your error
if ($('#name').val().length == 0) {
$('#adiv').html("please enter your name")
}
});
Or
<input type="submit" value="submit" id="button">
change to
<input type="button" value="submit" id="button">//also prevent form auto submit thus will show the error
Well you need to stop the code to execute after error has been detected. For example you can simple use return false or return:
$('#name').focusout(function() {
if ($('#name').val().length == 0) {
$('#adiv').html("please enter name")
}
});
$('#button').click(function() {
if ($('#name').val().length == 0) {
$('#adiv').html("please enter your name")
return false;//add this
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="register.php" method="post">
<input type="text" name="name" id="name">
<div id="adiv"></div>
<input type="submit" value="submit" id="button">
</form>
I strongly recommend never to assign validation to a submit button click.
Instead assign the submit event handler of the form.
I also added trim and removed the content of the error from the code.
$(function() {
$('#name').focusout(function() {
var empty = $.trim($('#name').val()).length == 0;
$('#adiv').toggle(empty);
});
$('#form1').on("submit",function(e) {
$('#name').focusout();
if ($('#adiv').is(":visible")) {
e.preventDefault()
}
});
});
#adiv { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="register.php" method="post" id="form1">
<input type="text" name="name" id="name">
<div id="adiv">please enter name</div><br/>
<input type="submit" value="submit" id="button">
</form>
Please check this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="name" id="name">
<div id="adiv"></div>
<input type="button" value="submit" id="button">
</form>
<script>
$(document).ready(function(){
$('#button').on('click',function(){
if($('#name').val() == ''){
$('#adiv').text("Please enter name!!");
}else{
$('#adiv').text($('#name').val());
}
})
})
</script>
try this..:D
function validateFunction(){
if(document.getElementByID('name').value.length==0){
document.getElementByID('adiv').innerHTML = "please enter your name";
return false;
}
return true;
}
<input type="submit" value="submit" id="button" onclick="return validateFunction();" />
$('your-form').on('submit', function(e) {
e.preventDefault();
//your code bere
});
preventDefault stop the normal submit behaviour of your browser so that you can trigger any event you want
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I am having problem with this login form. It is not letting me login to next page. It shows me if email and password match but it just doesn't let me log in. Please have a look and tell me what is wrong with it or suggest me something that will work. Thank you
HTML CODE
<div id="loginForm">
<form id="formLogin" method="post" action="login.php" >
<input type="text" id="eMailTxt" placeholder="Email Address" />
<input type="password" id="passWordTxt" placeholder="password" />
<p></p>
<input type="submit" value="Login" id="submitBtn" class="Btn" />
</form>
</div>
jQuery AJAX CODE
$(document).ready(function(){
$("#formLogin").submit(function(){
$a = $("#eMailTxt").val();
$b = $("#passWordTxt").val();
$.post("loginCheck.php",{
email: $a,
pass: $b
},function(data){
if (data=="false")
{
$(".loginForm p").html("Password does not match").css({'color':'red'});
return false;
}
else
{
$(".loginForm p").html("Password match").css({'color':'green'});
$("#formLogin").submit(); //I've tried return true and this submit function but none worked.
}
});
return false;
//If I turn this true, it logs in everytime even if password doesn't match. And if it's false, it will return false everytime even if password is correct
});
});
PHP CODE
<?php
$q=$_POST["email"];
$s=$_POST["pass"];
$con=mysqli_connect("localhost","root","","SocialNetwork");
$check="SELECT PassWord FROM people WHERE EMAIL = '".$q."'";
$data=mysqli_query($con,$check);
$result=mysqli_fetch_array($data);
if ($s != $result[0])
{
echo "false";
}
else
{
echo "true";
}
?>
Try this different AJAX structure - it may work better for you.
Also, I changed your PHP code to just echo back what you sent (as a test, to verify that the PHP processor file is receiving what you expect).
From here, you should be able to add things back one at a time and make it all work.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formLogin").submit(function(){
$a = $("#eMailTxt").val();
$b = $("#passWordTxt").val();
//alert($a +' '+ $b);
$.ajax({
type:"POST",
url: "loginCheck.php",
data: 'email=' +$a+ '&pass=' +$b,
success: function(data) {
alert(data);
}
});
return false; //This line prevents form submit -- REMOVE when done testing
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="loginForm">
<form id="formLogin" method="post" action="login.php" >
<input type="text" id="eMailTxt" placeholder="Email Address" />
<input type="password" id="passWordTxt" placeholder="password" />
<p></p>
<input type="submit" value="Login" id="submitBtn" class="Btn" />
</form>
</div>
</body>
</html>
PHP CODE: loginCheck.php
<?php
$q=$_POST["email"];
$s=$_POST["pass"];
die('Received: ['.$q.'] and ['.$s.']'); //Remove this line when done first test
$con=mysqli_connect("localhost","root","","SocialNetwork");
$check="SELECT PassWord FROM people WHERE EMAIL = '".$q."'";
$data=mysqli_query($con,$check);
$result=mysqli_fetch_array($data);
if ($s != $result[0])
{
echo "false";
}
else
{
echo "true";
}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm not very good at jQuery. I have to show a form in the code below, but it seems jquery (or Javascript) keeps the code hidden.
The sample output is inhttp://210.48.94.218/~printabl/products/business-cards/. If you click the "CONTINUE" button in the page.
<?php
/**
* Template Name: Contact Page
*
* Description: Twenty Twelve loves the no-sidebar look as much as
* you do. Use this page template to remove the sidebar from any page.
*
* Tip: to remove the sidebar from all posts and pages simply remove
* any active widgets from the Main Sidebar area, and the sidebar will
* disappear everywhere.
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<script type="text/javascript">
var x1 = 5;
var x2 = 10;
var value = x1 * x2;
var list_value = 1;
var size, fold, back, front, qlnt, qlt, tprice;
</script>
<div id="jdModal">
<div id="jdModalContent" style="padding:10px;background:#fff;">
<form id="product_form" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data">
<input type="hidden" name="size" value="0" />
<input type="hidden" name="fold" value="0" />
<input type="hidden" name="back" value="0" />
<input type="hidden" name="front" value="0" />
<input type="hidden" name="qlnt" value="0" />
<input type="hidden" name="qlt" value="0" />
<input type="hidden" name="tprice" value="0" />
<input type="hidden" name="productName" value="Business Card" />
<h2>CONTACT US</h2>
<div><label>Business Name*</label><input type="text" name="businessName" value="" /></div>
<div><label>Your Name*</label><input type="text" name="yourName" value="" /></div>
<div><label>Email*</label><input type="text" name="yourEmail" value="" /></div>
<div><label>Phone*</label><input type="text" name="yourPhone" value="" /></div>
<div><label>Delivery Region*</label><input type="text" name="deliveryRegion" value="Christchurch" /></div>
<div><label>Employees</label><input type="text" name="employees" value="1-5 staff members in my business" /></div>
<div><label> </label><p class="note">If required please upload your files here (2 MB max).</p></div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_1" name="jd_upload_uri_1" /><input type="text" class="jd_upload_filename" name="jd_upload_file_1" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_1"value="Browse ..." />
</div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_2" name="jd_upload_uri_2" /><input type="text" class="jd_upload_filename" name="jd_upload_file_2" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_2" value="Browse ..." />
</div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_3" name="jd_upload_uri_3" /><input type="text" class="jd_upload_filename" name="jd_upload_file_3" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_3" value="Browse ..." />
</div>
<div><label>Message</label><textarea name="msg"></textarea></div>
<div><label>I'm also interested in</label><p><input type="checkbox" name="interests[]" value="Business Cards" /><span>Business Cards</span><input type="checkbox" name="interests[]" value="Flyer" /><span>Flyer</span></p></div>
<div style="margin-bottom:15px"><label> </label><p><input type="checkbox" name="interests[]" value="Booklets" /><span>Booklets</span><input type="checkbox" name="interests[]" value="Postcards" /><span>Postcards</span></p></div>
<div><label> </label><p class="note">To help us fight spam, please type the characters you see below.</p></div>
<div class="captcha_fix"><label> </label><p style="text-align:right"><input type="submit" value=" " name="productOrderForm" class="submit-product" /><input type="text" name="jd_captcha" class="jd_captcha" value="" maxlength="6" /><img src="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php?captcha" class="jd_captcha_img" /></p></div><div id="jd_msg_box"><p class="text"></p></div>
<div style="clear:both"></div>
</form>
</div>
</div>
<iframe name="formFrame" id="formFrame" src="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php?load"></iframe>
<div id="file-upload-elem">
<form id="upload_form_1" class="uploader-box uploader-box-1" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /></form>
<form id="upload_form_2" class="uploader-box uploader-box-2" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /></form>
<form id="upload_form_3" class="uploader-box uploader-box-3" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /></form>
</div>
<script type="text/javascript">
var fileUploadElem = jQuery("#file-upload-elem").html();
jQuery("#file-upload-elem").remove();
var insertUpload, jd_error, jd_success, upload_error, jd_show_msg, invalid_captcha;
var isCustomQuote = false;
jQuery(function() {
console.log("Test");
if(jQuery("#customs").length > 0 || jQuery("#frprice").length > 0) {
jQuery("body").append(fileUploadElem);
var calculate = function() {
if(jQuery("#frprice").length > 0) {
size = (jQuery("#foldet").val()).split(":");
fold = (jQuery("#fold").val()).split(":");
back = (jQuery("#black").val()).split(":");
front = (jQuery("#front").val()).split(":");
qlnt = jQuery("#qlnt").val();
qlt = jQuery("#qlt").val();
var str = parseInt(size[0])+parseInt(fold[0])+parseInt(back[0])+parseInt(front[0])+parseInt(qlnt)+parseInt(qlt);
tprice = parseInt(str);
jQuery("h3#price span").text(tprice);
}
};
var jd_timer;
var upload_on_progress = 0;
jd_error = function(errCode) {
clearTimeout(jd_timer);
if(errCode == 0) {
jd_show_msg("Please fill all required fields (*)");
}
if(errCode == 1) {
jd_show_msg("Invalid Email Address.");
}
if(errCode == 2) {
//jd_show_msg("Invalid Email Address.");
alert("Form sending failed. Please try again later");
}
if(errCode == 3) {
alert("Invalid Action. Please Contact Administrator.");
}
};
invalid_captcha = function(x) {
if(x == 0) {
alert("Please Enter Verification Code.");
} else {
alert("Invalid Verification Code. Try Again.");
jQuery(".jd_captcha_img").each(function() {
jQuery(this).attr('src', jQuery(this).attr('src')+'&x='+Math.random());
});
}
jQuery(".jd_captcha").val("");
};
jd_success = function() {
setTimeout(function() { window.location = document.URL+"?thank-you"; },2000);
};
upload_error = function(err,uid) {
upload_on_progress--;
jQuery("input[name=jd_upload_file_"+uid+"]").val("");
alert(err);
};
insertUpload = function(data,file) {
upload_on_progress--;
var tmpData = data.split(':');
if(tmpData.length == 3) {
var tmpCounter = 0;
jQuery("input[name=jd_upload_file_"+tmpData[2]+"]").val(file);
var updateInput = jQuery("#jd_upload_uri_"+tmpData[2]);
var updateData = tmpData[0] + ":" + tmpData[1];
updateInput.val(updateData);
} else {
alert("Uploading File Error. Please Try Again Later");
}
};
jd_show_msg = function(err) {
var myBox = jQuery("#jd_msg_box");
myBox.children(".text").text(err);
timer = setTimeout(function() { myBox.hide(); },3000);
myBox.show();
};
jQuery("select").change(calculate);
jQuery("#price").click(function(){
jQuery(this).hide();
});
jQuery(".jd_upload:eq(0), .jd_upload_filename:eq(0)").css("opacity",1);
jQuery(".file_input_hidden:eq(0)").show();
var jdModal = jQuery('#jdModal').html();
jQuery('#jdModal').remove();
var uploaderBox = jQuery(".uploader-box");
jQuery(".inp-file").click(function(e) {
if(upload_on_progress > 0) {
e.preventDefault();
alert("Prevented");
}
});
var cboxTopCache = 0;
var cboxLeftCache = 0;
var fixFileWin = function() {
var fixLeft = 585;
var cboxOffset = jQuery("#colorbox").offset();
cboxLeftCache = cboxOffset.left;
cboxTopCache = jQuery("#jd_upfile_1").offset().top;
jQuery(".uploader-box-1").css("top", (jQuery("#jd_upfile_1").offset().top) + "px");
jQuery(".uploader-box-2").css("top",(jQuery("#jd_upfile_2").offset().top) + "px");
jQuery(".uploader-box-3").css("top",(jQuery("#jd_upfile_3").offset().top) + "px");
uploaderBox.css("left",(cboxLeftCache+fixLeft) + "px");
};
jQuery(window).resize(function() {
var cboxOffset = jQuery("#colorbox").offset().left;
var cboxOffset2 = jQuery("#jd_upfile_1").offset().top;
if(cboxOffset != cboxLeftCache || cboxOffset2 != cboxTopCache) {
fixFileWin();
}
});
var formOnClick = function(e) {
e.preventDefault();
isCustomQuote = (jQuery(this).attr('id') == 'frprice')?false:true;
jQuery.colorbox({html:jdModal,opacity:0.8,overlayClose:false,transition:'none', onComplete: function() {
fixFileWin();
uploaderBox.show();
jQuery(".inp-file").change(function() {
var _this = jQuery(this);
if(_this.val() != "") {
if(upload_on_progress > 0) {
alert("Upload is still in progress. Please wait.");
} else {
jQuery("input[name=jd_"+_this.attr("id")+"]").val("Uploading File.. Please Wait..");
_this.parent().submit();
upload_on_progress++;
}
}
});
if(!isCustomQuote) {
jQuery("#product_form input[name=size]").val(size[1]);
jQuery("#product_form input[name=fold]").val(fold[1]);
jQuery("#product_form input[name=back]").val(back[1]);
jQuery("#product_form input[name=front]").val(front[1]);
jQuery("#product_form input[name=qlnt]").val(qlnt);
jQuery("#product_form input[name=qlt]").val(qlt);
jQuery("#product_form input[name=tprice]").val(tprice);
}
jQuery("#colorbox #product_form").submit(function(e) {
var tmp_progress = upload_on_progress;
if(tmp_progress > 0) {
e.preventDefault();
alert("Upload in progress. Please wait.");
}
});
}, onClosed: function() {
uploaderBox.hide();
}});
};
jQuery("#frprice").submit(formOnClick);
jQuery("#customs").click(formOnClick);
if(!isCustomQuote) {
calculate();
}
}
});
</script>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar('right'); ?>
<?php get_footer(); ?>
replace
jQuery("#file-upload-elem").remove();
With
jQuery("#file-upload-elem").hide();
jQuery.remove(), completely removes the selected element from the DOM
EDIT:
To show the element when you need it use
jQuery.show()
i.e jQuery("#file-upload-elem").show();
http://jsfiddle.net/MJwFj/2/
although it looks very rough when .remove() has been commented out the form loads
uploaderBox.hide();
The code above will hide the following, the above code is safe to remove if you don't want this to happen:
<form id="upload_form_1" class="uploader-box uploader-box-1" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /></form>
<form id="upload_form_2" class="uploader-box uploader-box-2" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /></form>
<form id="upload_form_3" class="uploader-box uploader-box-3" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /></form>
It's not clear exactly which element is being hidden but there is also a timer that triggers after 3 seconds to hide another element. Try removing the following also:
timer = setTimeout(function() { myBox.hide(); },3000);
The first, you may set the css role display to the element you wanted to as none
.form{
display:none;
}
then you just need to show the form with jQuery .show() function on event you wanted to, such button clicked or something else. For example :
$(document).ready(function(){
$('.classOfButton').on('click',function(){
$('.form').show();
);
})
Update
if you wanted to show the form within the page are loaded, you need to put the javascript in the end of page, or if you use jQuery you just need to use .ready() function and inside of it you show up the form with some delay if necessary.
$(document).ready(function(){
$('.form').show();
})
I'd like to submit a form thanks to AJAX and display the error messages contained in "form_treatment.php" (form verification) without the php redirection to "form_treatment.php" when I submit. What have I to write in the following lign ?
$.post("form_treatment.php",name, ???);
I have a basic form in form.php :
<form method="post" action="form_treatment.php" >
<input type="text" name="user_name" value="Your name..." />
<button type="submit" >OK</button>
</form>
This form is treat in form_treatment.php :
if ( empty($_POST['user_name']) ){
echo 'You have to enter your name.';
} else {
$already_existing = verify_existence( $_POST['user_name'] );
// verification in the DB, return true or false
if( $already_existing ){
echo 'Name already used.';
} else {
// Entering the name in the DB
}
}
You can try something like the following:
<form id="myForm" method="post" action="form_treatment.php" >
<span id="message"></span>
<input type="text" name="user_name" value="Your name..." />
<input type="submit" >OK</button>
</form>
And the javascript:
$('#myForm').submit(function() {
var myForm = $(this);
$.ajax({
type: 'POST',
url: 'form_treatment.php',
data: myForm.serialize(),
success: function (data) {
$('#message').html(data);
}
});
return false;
});
You can accomplish this by two ways
1st One in the same page
2nd one via AJAX
The first way can be done like this
<?php
if(isset($_POST['sub']) && $_POST['sub'] == 'true'):
if ( empty($_POST['user_name']) ){
echo 'You have to enter your name.';
} else {
$already_existing = verify_existence( $_POST['user_name'] );
// verification in the DB, return true or false
if( $already_existing ){
echo 'Name already used.';
} else {
// Entering the name in the DB
}
}
endif;
?>
<form method="post" action="<?php echo $PHP_SELF; ?>" >
<input type="text" name="user_name" value="Your name..." />
<input type="hidden" name="sub" value = "true" >
<button type="submit" >OK</button>
</form>
The 2nd way via ajax
can be done like this
<div id="errors"></div>
<form method="post" id="myFrm">
<input type="text" name="user_name" value="Your name..." id="name" />
<button type="submit" >OK</button>
</form>
<sctipt>
$("#myFrm").submit(function() {
var NameFromForm = $('#name').val();
$.post("form_treatment.php", { "user_name": NameFromForm },
function(data){
$("#errors").html(data);
});
event.preventDefault();
});
</script>
If you need any explanation leave a comment