Site searched on different sites but i don't find a solution for my form/html file. I'm really new in this and I really don't know why my code wont work, could some please review my code and can tell me what is wrong ? (this is for me the easiest way to learn it)
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" action="site" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" value="" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" value="">
<input name="authenticity_token" type="hidden" value="token_value">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
$.post( 'site/login', {
authenticity_token: $('#authenticity_token').val(),
username: $('#name').val(),
password: $('#name2').val()
},
function(responsePage,statusText,result)
{
console.log(responsePage);
}
);
});
</script>
</body>
</html>
Thanks for helping :)!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.selected{
background-color : green;
}
</style>
<script>
$(document).ready(function () {
$("#formoid").submit(function (event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
$.post('login_1.asp', {
authenticity_token: $('#authenticity_token').val(), username: $('#name').val(), password: $('#name2').val()
},
function (responsePage, statusText, result) {
alert("response from server---" + responsePage);
}
);
});
});
</script>
</head>
<body>
<form id="formoid" action="site" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" value="" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" value="">
<input name="authenticity_token" type="hidden" value="token_value">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
</body>
</html>
login_1.asp
<%
Response.Write request.Form("username") + "---------------" + request.Form("password")
%>
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>
Right now I am using java script to submit two forms with a common function, I want to do it with jQuery. How can I pass data in jQuery as simple as JavaScript. I cannot able to send/retrieve data while event call.
Present Code:
function SaveSample(flag,mode){
//Based on flag and mode i am performing some validations
//save sample
}
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','S')">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','D')">
</form>
Required Code:
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
You can set the data-* attributes on the button and them access them in the click handler using $(this).attr("<attribute name>").
$(document).ready(function() {
$(".sampleSave").on("click", function(e) {
console.log($(this).attr("data-flag"), $(this).attr("data-mode"));
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" data-flag="A" data-mode="B" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" data-flag="C" data-mode="D" class="sampleSave">
</form>
Another option is not to put the parameters on the form element, but instead have different callbacks for each form.
$(document).ready(function(){
$("#ff1 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','S');
});
$("#ff2 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','D');
});
});
You can use this code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
var formData = $(this);
$.ajax( {
type: "POST",
url: formData.attr( 'action' ),
data: formData.serialize(),
success: function( response ) {
console.log( response );
}
} );
e.preventDefault();
//perform validations
//save sample
});
});
</head>
<body>
<form id="ff1" name="ff1" method="post" action="yourfile.php">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post" action="yourfile1.php">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
</body>
</html>
I have this checkbox:
<div class="form-group">
<input type="checkbox" id="examination" class="form-control" name="exam" placeholder="Enter Title">
<label>Enable Exam</label>
</div>
And this is my disabled input:
<div class="form-group">
<label>Order</label>
<input id="myorder" name="myorder" disabled>
</div>
I try with this script to make the input enabled after checkbox checked, but it doesn't work:
$('#examination').change(function(){
$("#myorder").prop("disabled", !$(this).is(':checked'));
});
Any ideas?
Here, i think this will work:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#chtest').change(function(e){
var isChecked = $(e.target).is(':checked');
if (isChecked) {
$("#test").removeAttr("disabled");
} else {
$("#test").attr("disabled","disabled");
}
});
});
</script>
</head>
<body>
<form action="">
<input type="text" id="test" disabled="disabled"><br>
<input type="checkbox" id="chtest">
</form>
</body>
</html>
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 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.