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.
Related
I would like to take the information stored in the form from my date input and send it to a variable in JavaScript.
<body>
<form action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit"
</div>
</form>
<script src="lab3.js"></script>
</body>
var bDay = document.getElementById("birthday").value
console.log(bDay)
You'll want to do something like this:
//Wait for page to finish loading
window.addEventListener("load",function(){
//Run function when you submit form
document.getElementById("form").addEventListener("submit",function(e){
//Stop the form from submitting:
e.preventDefault();
//Get your input value
var bDay = document.getElementById("birthday").value;
//Log it to your console
console.log(bDay)
});
});
<!DOCTYPE html>
<html>
<body>
<!-- Add an id to your form-->
<form id='form' action="" method="get" class="countdown">
<div class="countdown">
<label for="birthday">Enter your birthday: </label>
<input type="date" name="birthday" id="birthday" required>
</div>
<div class="countdown">
<input type="submit" value="Submit">
</div>
</form>
<!-- <script src="lab3.js"></script> -->
</body>
</html>
I've added the snippet inside the tag:
<script src='https://www.google.com/recaptcha/api.js?render=EXAMPLE123456789-_987654321'></script>
After that, I added this javascript callback inside each form on the site: (grecaptcha above the submit button).
<form accept-charset="UTF-8" target="_blank" action="https://website.infusionsoft.com/app/form/process/1234567890" class="infusion-form" id="inf_form_1234567890" method="POST">
<input name="inf_form_xid" type="hidden" value="1234567890" />
<input name="inf_form_name" type="hidden" value="First Last.com&#a;Web Form submitted&#a;HOME PAGE&#a;First / Last" />
<input name="infusionsoft_version" type="hidden" value="1.00.00.1" />
<div>
<div>
<p class ="white">Register Now</p>
</div>
</div>
<div>
<div> </div>
</div>
<div class="user-fields">
<div class="infusion-field">
<label for="inf_field_FirstName_home">First Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" required />
</div>
<div class="infusion-field">
<label for="inf_field_Email_home">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" required />
</div>
</div>
<div>
<div> </div>
</div>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('EXAMPLE123456789-_987654321', {action: 'homepage'})
.then(function(token) {
// Verify the token on the server.
});
});
</script>
<div class="infusion-submit">
<button class="infusion-btn" type="submit">Submit!</button>
</div>
</form>
<script type="text/javascript" src="https://website.infusionsoft.com/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://website.infusionsoft.com/app/timezone/timezoneInputJs?xid=12345678900987654321"></script>
Is this the correct way?
I have the current code below, which is working. The problem is this code will be in a form and i can't have nested forms. How do i change the code, so this works with a div parent element instead of a form?
<form>
<script type="text/javascript">
function inmet(form){
form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches:
<input class="box1" type="text" name="inch" />
</div>
<div class="singsubmit">
<input onclick="inmet(this.form)" type="button" value="GO" />
</div>
<div class="singcalcanswer">Equals in Millimetres:<br />
<input class="calcbox2" type="text" readonly="readonly" name="in2met" />
</div>
</div>
</form>
One option would be to use Element.getElementsByClassName() or a similar method to get the input field you want:
<div id="form-root">
<script type="text/javascript">
function inmet(calcRoot){
calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2);
}
// example: inmet(document.getElementById('form-root'))
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div>
<div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div>
<div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div>
</div>
</div>
Not the cleanest solution, but it should do the job:
<div>
<script>
function inmet() {
document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br/>Inches to Millimetres</div>
<div class="singcalcquestion">
<label for="inch">Enter the Inches:</label>
<input class="box1" type="text" name="inch" id="inch"/>
</div>
<div class="singsubmit">
<input onclick="inmet()" type="button" value="GO"/>
</div>
<div class="singcalcanswer">
<label for="in2met">Equals in Millimetres:</label>
<input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/>
</div>
</div>
</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 have a popup login form. I want the form to submit, then close that popup window. How can I accomplish this? The window is currently set to close before the return for the function happens. Where does window.close() go in this case? Thank you for any help.
Form:
<form name="catseczoneform30738" onSubmit="return checkWholeForm30738(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12695&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item">
<label for="SZUsername">Username</label>
<br />
<input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
</div>
<div class="item">
<label for="SZPassword">Password</label>
<br />
<input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
</div>
<div class="item">
<input type="checkbox" name="RememberMe" id="RememberMe" />
<label for="RememberMe">Remember Me</label>
</div>
<div class="item">
<input class="cat_button" type="submit" value="Log in" />
Lost password?</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm30738(theForm){var why = "";
if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");
if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");
if (why != ""){alert(why);
return false;
}
theForm.submit();
window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
window.close();
return false;
}
//]]>
</script>
</form>
If possible the window.close() should be included as part of the server response to your submit event. If you include the window.close() as part of the submit on the form, it will cause your form to close before the submit has actually happened.