I have a problem, I created a captcha and I implemented a button to change the current one and it works very well in Google Chrome but it doesn't work in Firefox (V. 57.0 32 bit)
Here's the code:
<head>
<title>Captcha</title>
</head>
<style>
//Style
</style>
<script>
function refresh(){
document.getElementById("risp").value = "";
document.CaptchaImg.src="captcha.php";
}
</script>
<body style="background-image: url('pattern_17.png');">
<center>
<div id="div_captcha">
<h1 style="Font-Family:Impact">CAPTCHA</h1>
<h3 style="Font-Family:Impact">Sei un robot?</h3><br />
<form method="post" id="form" name="form">
<div style="background-image: url('pattern_17.png');">
<div style="float:left;padding-left:10%;">
<img src="captcha.php" id="CaptchaImg" name="CaptchaImg"/><br /><br />
</div>
<div style="float:right;padding-right:10%;">
<input class="myButton" type="button" value="Nuovo captcha" onclick="refresh();" /><br /><br />
<input class="myButton" type="reset" value="Reset"/><br /><br /><br />
<input type="text" name="risp" id="risp" value="" required maxlength="5" />
<input class="myButton" type="submit" value="invia" name="invia" style="width:80px"/>
</div>
</div>
</form>
</div>
</center>
</body>
Thanks in advance!
You don't need a name for the img, just the id.
The name attribute has been deprecated for the img element !
Try
document.getElementById("risp").value = "";
document.getElementById("CaptchaImg").src = "captcha.php";
Related
Please help me, I have tried a lot of search but useless.
<div class="articleWraper">
<div id="demo2">
<?php
$sSql='SELECT * FROM tbl_images';
$result=mysql_query($sSql);
?>
<ul id="slider3">
<?php while($row=mysql_fetch_assoc($result)){?>
<li class="panel1">
<div class="caption-bottom"><?php echo $row['line1_desc'];?><br/><?php echo $row['line2_desc'];?></div>
<img src="../propertyImages/<?php echo $row['image'] ?>" /><br />
</li>
<?php }?>
</ul>
</div>
<div class="mpCaptionRow">
<input id="createLink" class="createLink" type="submit" name="submit" value="Yes, I'm Interested" />
</div>
</div>
The above code is for a button and a manual slider. The slider contains pictures and a panel for picture description which are getting from database. I want when the user clicks on button and jQuery dialog appears then some part of description containing slider panel will be show in the jQuery dialog. My jQuery dialog code is as follows:
<head>
<link href="Content/main.css" rel="stylesheet" type="text/css" />
<link href="Content/blitzer/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/page.css" />
<link rel="stylesheet" href="Content/anythingslider.css" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.js"></script>
<script src="Scripts/jquery.anythingslider.fx.js"></script>
<script src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jqxmaskedinput.js"></script>
<script type="text/javascript" src="Scripts/jquery.timepicker.js"></script>
<script>
$(document).ready(function(){
$("#createLink").click(function (event) {
event.preventDefault();
$("#mpDialog").dialog(
{
title: "I want to be a future homeowner",
width: 520,
modal: true,
position: {
at: "top",
my: "bottom",
of: "#createLink"
}
}
);
});
$("#mpDialog").hide();
});
</script>
</head>
<body>
<div class="dialogSec" id="mpDialog">
<form id="createProductForm" name="myForm" action="futureHomeowner.php" method="post" enctype="multipart/form-data">
<div id="productDetails">
<div id="basicInfo">
<p style="text-align: center">Hey Mike and Juan<br />
I am interested in learning more about the property at:
<br />
**I want the panel description here**
<br />
and specifically how your program works to allow me to become a homeowner.</p>
<div class="fieldControl">
<label style="margin-right: 25px">First Name </label>
<input id="fname" type="text" class="textBox" name="fname" style="width: 350px" />
<div id="fname_error"></div>
</div>
<div class="fieldControl">
<label style="margin-right: 25px">Last Name </label>
<input id="lname" type="text" class="textBox" name="lname" style="width: 350px" />
<div id="lname_error"></div>
</div>
<div class="fieldControl">
<label>Email Address </label>
<input id="email" type="text" name="email" class="textBox" style="width: 350px" />
<div id="email_error"></div>
</div>
<div class="fieldControl">
<label>Phone No. </label>
<input id="phoneNo" type="text" name="phoneNo" class="textBox" style="width: 350px" />
</div>
<div class="fieldControl">
<p>Please answer the questions below and we will be in touch.</p>
<p style="text-align: left;"><b>What is the best time to call you to discuss?</b></p>
From <input id="timeformat1" name="timeFrom" type="text" class="textBox" style="width: 205px" placeholder="Time from" /> To <input id="timeformat2" placeholder="Time to" name="timeTo" type="text" class="textBox" style="width: 205px" />
<p style="text-align: left;"><b>Also, do you have any other comments?</b></p>
<textarea name="comments" style="width: 489px" class="textBox" placeholder="Write your comments..."></textarea>
</div>
</div>
<div class="clearSection"></div>
</div>
<div class="buttonsRow">
<input type="submit" value="Submit" class="button1" />
</div>
</form>
</div>
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Certificate Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
#main .my-form form .text-box .add-box strong {
font-size: 36px;
}
-->
</style>
</head>
<body>
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" /></p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a>
</p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 250 < n ) {
alert('Maximum Amount of Students');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Student <span class="box-number">' + n + '</span></label> <input type="text" name="students[]" value="" id="box' + n + '" /> Remove</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
When I hit submit, the php only gets the first value of the array
$students = ($_POST["students"]);
this is my php for that form, I don't know why it is only returning the first value of the array, this is my first time using forms with JavaScript so it might just be a simple error, I'm not sure
This is your problem:
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
You are closing your form prematurely because of the closing </div> and then opening a new form.
Your html is invalid and the browser tries to make sense of it, causing your students[] elements to be outside of your form so they never get posted.
The results may vary per browser (tested in Firefox), but validating your html should solve your problem.
Ok, I found the error. I have this working. You are not adding the new elements inside of your form. I rearranged the HTML as the following.
<form name="class" action="generate.php" method="post">
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" />
</p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a> </p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</div>
</div>
</form>
Just to clarify, I moved the opening tag of the form outside of your "main" div, and then I closed the form after the "main" div's closing tag. No other changes.
I am stuck with the function which have to do if input has class 'inerror' then div next to it should appear, but when I am running the function it is displaying all the div. Is there is solution for it without using each function. here is my code
<head>
<script type="text/javascript">
$(function(){
if($('input').hasClass('inerror')){
$('input', this).next().show();
}
})
</script>
<style>
.inerror{border:solid 1px #F00}
.error{ display:none}
</style>
</head>
<body>
<input type="button" value="submit" />
<div class="error">error</div> <br />
<input type="button" value="submit" />
<div class="error">error</div> <br />
<input type="button" class="inerror" value="submit"/>
<div class="error">error</div> <br />
<input type="button" value="submit"/>
<div class="error">error</div> <br />
</body>
$('input', this).next().show()
This matches the next sibling of all <input> elements, regardless of the check before it.
Try this instead:
$("input.inerror").next().show();
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.
Whats wrong with my code . The title is not displayed within the div banAdT :
<form action="" method="post" enctype="multipart/form-data">
<p>
Banner Ad Name :<br />
<input type="text" name="bannerAdName" id="bannerAdName" />
</p>
<p>
Your web page :<br />
<input type="text" name="bannerAdWeb" id="bannerAdWeb" />
</p>
<p>
Ad image :<br />
<input type="file" name="bannerAdImage" id="bannerAdImage"/>
</p>
<p>
Title :<br />
<input type="text" name="bannerAdTitle" id="bannerAdTitle" />
</p>
<p>
Description :<br />
<textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea>
</p>
<div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div>
<input type="hidden" value="POST" />
</form>
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="contactArea">
<div id="banAdT">
<script>document.write(document.getElementById("bannerAdTitle").value);</script> <!-- Displays nothing -->
</div>
<img src="" id="preview" width="120" height="120" />
</div>
</div>
That's because when the script runs, the element bannerAdTitle won't have a value. I'm not exactly sure what you're trying to do, but you probably want to attach a change event listener to the bannerAdTitle input, and write the value from there:
document.getElementById("bannerAdTitle").onchange = function() {
document.getElementById("banAdT").innerHTML = this.value;
}
That will write the value of bannerAdTitle in the banAdT element every time the change event is fired.
document.write is executed as the page loads, but at that point you haven't given bannerAdTitle a value - the INPUT is empty.