I have the following code displaying input fields in a form. I want to have the submit button active only once all fields are filled. I cant seem to figure out where I've gone wrong. I have omitted some text inputs here for space.
Form:
<?php
if(#$_GET['q']==4 && !(#$_GET['step']) ) {
echo '
<div class="row">
<span class="title1" style="margin-left:40%;font-size:30px;"><b>Enter Quiz Details</b></span><br /><br />
<div class="col-md-3"></div><div class="col-md-6"> <form class="form-horizontal title1" name="form" action="update.php?q=addquiz" method="POST">
<fieldset>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12">
<label for="name">Enter Title</label>
<input id="name" name="name" class="form-control input-md" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input type="submit" style="margin-left:45%" class="btn btn-primary" value="Submit" class="btn btn-primary" id="submit" disabled="disabled"/>
</div>
</div>
</fieldset>
</form>
</div>';
}
?>
<script>
(function() {
$('form input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#submit').attr('disabled', 'disabled'); //Leave as disabled if any of the fields are empty
} else {
$('#submit').removeAttr('disabled');//Remove the disabled attribute once all fields are filled
}
});
});
</script>
The code is exactly as it appears here. If I've missed something, kindly point me in a direction. Thank you.
You are using the attribute as disabled="disabled" buts its an attribute having no value you should use it like this <input type="submit" style="margin-left:45%" class="btn btn-primary" value="Submit" class="btn btn-primary" id="submit" disabled/>
Here I have created a working JSFiddle for you check it and do correction https://jsfiddle.net/g1cra5f8/
Related
So, I have multiple forms on a page and I am trying to submit them conditionally using the same button, for some reason, I cannot trigger the submit button. Below is my code.
$("#save_contact").on("click", function () {
var contact_type = $("#contact_type").val();
console.log(contact_type);
if (contact_type == 2) {
console.log("here");
$('#supplier_form').submit();
} else if (contact_type == 3) {
} else if (contact_type == 4) {
} else if (contact_type == 5) {
} else if (contact_type == 1) {
}
});
This is my form, at the moment I have only created 1 form.
<div id="supplier_div" class="form_to_save">
<form id="supplier_form" name="supplier_form" action="{{route('save_reception_contacts')}}">
<hr>
<h4>Supplier</h4>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Company</label>
<input type="text" name="company" id="company" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Notes</label>
<textarea name="notes" id="notes"></textarea>
</div>
</div>
</div>
<input type="hidden" name="contact_type_hidden">
<input type="hidden" name="user_type_hidden">
</form>
</div>
<div class="col-md-6">
<button type="button">Back</button>
<button type="button" class="save" id="save_contact">Save</button>
</div>
You have unclosed <hr> at
<form id="supplier_form" name="supplier_form" action="{{route('save_reception_contacts')}}">
<hr>
and an unclosed <div class="row">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="row">
otherwise I can't see anything wrong with submitting the form, you haven't provided relevant HTML that i could create the snippet.
You are creating a new variable and assigning the value of "contact_type" element. But I can not find this element in the HTML.
I have modified your code:
<div id="supplier_div" class="form_to_save">
<form id="supplier_form" name="supplier_form" action="{{route('save_reception_contacts')}}">
<hr></hr>
<h4>Supplier</h4>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Company</label>
<input type="text" name="company" id="company" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>contact_type</label>
<input type="text" name="contact_type" id="contact_type" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Notes</label>
<textarea name="notes" id="notes"></textarea>
</div>
</div>
</div>
</div>
<input type="hidden" name="contact_type_hidden">
<input type="hidden" name="user_type_hidden">
</form>
</div>
<div class="col-md-6">
<button type="button">Back</button>
<button type="button" class="save" id="save_contact">Save</button>
</div>
Note that there is now a new input "contact_type".
And here is the script, where you will need to uncomment in order to send the form.
$("#save_contact").on("click", function() {
var contact_type = $("#contact_type").val();
if (contact_type == 2) {
console.log("2");
//$('#supplier_form').submit();
} else if (contact_type == 3) {
console.log("3");
//$('#supplier_form').submit();
} else if (contact_type == 4) {
console.log("4");
//$('#supplier_form').submit();
} else if (contact_type == 5) {
console.log("5");
//$('#supplier_form').submit();
} else if (contact_type == 1) {
console.log("1");
//$('#supplier_form').submit();
}
});
I am assuming you want to send the same and only form, not differents one, as it seems to understand from the initial question.
I can't figure out why this doesnt get the value of the textarea. I've been to loads of stackoverflow posts and I can't figure out what's wrong. I've tried getting values from textfields, from dropdown lists etc and they all work I just can't get the textarea to work. I've using _GET instead, still didnt work.
This is the message I get if I don't use the isset function: Notice: Undefined index: descri.
Here's the HTML:
<form role="form" action="saveform.php" method="post" name="eventform">
<div class="form-group">
<label for="descri">Description</label>
<textarea name="descri" form="eventform" style="resize:none"></textarea>
</div>
<button type="submit" class="btn btn-default" id="addform">add</button>
</form>
PHP:
<?php
if(isset($_POST['descri']))
{
echo htmlspecialchars($_POST['descri']);
} else {
echo "DOESNTWORK";
}
?>
Just remove form attribute from textarea:
<textarea name="descri" form="eventform" style="resize:none"></textarea>
Remove form attribute from textarea that is located inside the form:
<form role="form" action="saveform.php" method="post" name="eventform">
<div class="form-group">
<label for="descri">Description</label>
<textarea name="descri" style="resize:none"></textarea>
</div>
<button type="submit" class="btn btn-default" id="addform">add</button>
</form>
You have to use it only when your textarea is outside the form (remember form should have id not just name:
<form role="form" action="saveform.php" method="post" id="eventform">
<div class="form-group">
<label for="descri">Description</label>
</div>
<button type="submit" class="btn btn-default" id="addform">add</button>
</form>
<textarea name="descri" form="eventform" style="resize:none"></textarea>
Remove form="eventform" attribute from your <textarea> element. You do not need to set it as your <form> will post your data.
<form role="form" action="saveform.php" method="post" name="eventform">
<div class="form-group">
<label for="descri">Description</label>
<textarea name="descri" style="resize:none"></textarea>
</div>
<button type="submit" class="btn btn-default" id="addform">add</button>
</form>
I have the following form that needs to feed into the database but I would like it to be validated before it can be saved into the database :
<form name="add_walkin_patient_form" class="add_walkin_patient_form" id="add_walkin_patient_form" autocomplete="off" >
<div class="form-line">
<div class="control-group">
<label class="control-label">
Patient Name
</label>
<div class="controls">
<input type="text" name="patientname" id="patientname" required="" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">
Patient Phone Number
</label>
<div class="controls">
<input type="text" name="patient_phone" id="patient_phone" required="" value=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">
Department
</label>
<div class="controls">
<select name="department" required="" class="department" id="department">
<option value="">Please select : </option>
<option value="Pharmacy">Pharmacy</option>
<option value="Laboratory">Laboratory</option>
<option value="Nurse">Nurse</option>
</select>
</div>
</div>
</div>
<button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right">
Add Walk In Patient
</button>
</form>
And the submit is done by a jquery script using the following script :
<script type="text/javascript">
$(document).ready(function () {
//delegated submit handlers for the forms inside the table
$('#add_walkin_patient_button').on('click', function (e) {
e.preventDefault();
//read the form data ans submit it to someurl
$.post('<?php echo base_url() ?>index.php/reception/add_walkin', $('#add_walkin_patient_form').serialize(), function () {
//success do something
// $.notify("New Patient Added Succesfully", "success",{ position:"left" });
$(".add_walkin_patient_form").notify(
"New Walkin Patient Added Successfully",
"success",
{position: "center"}
);
setInterval(function () {
var url = "<?php echo base_url() ?>index.php/reception/";
$(location).attr('href', url);
}, 3000);
}).fail(function () {
//error do something
$(".add_walkin_patient_form").notify(
"There was an error please try again later or contact the system support desk for assistance",
"error",
{position: "center"}
);
})
})
});
</script>
How can I put form validation to check if input is empty before submitting it into the script?
I am using javascript to do the validations.
Following is the form code:
<form action="upload.php" method="post" onSubmit="return validateForm()">
<input type="text" id="username">
<input type="text" password="password">
<input type="submit" value='Login' name='login'>
</form>
To perform validation write a javascript function:
<script>
function checkform(){
var uname= document.getElementById("username").value.trim().toUpperCase();
if(uname=== '' || uname=== null) {
alert("Username is blank");
document.getElementById("username").backgroundColor = "#ff6666";
return false;
}else document.getElementById("username").backgroundColor = "white";
var pass= document.getElementById("password").value.trim().toUpperCase();
if(pass=== '' || pass=== null) {
alert("Password is blank");
document.getElementById("password").backgroundColor = "#ff6666";
return false;
}else document.getElementById("password").backgroundColor = "white";
return true;
}
</script>
You are using,
<button name="add_walkin_patient_button" type="submit" id="add_walkin_patient_button" class="btn add_walkin_patient_button btn-info pull-right">
Add Walk In Patient
</button>
Here, submit button is used for submitting a form and will never trigger click event. Because, submit will be triggered first thus causing the click event skip.
$('#add_walkin_patient_button').on('click', function (e) {
This would have worked if you have used normal button instead of submit button
<input type="button">Submit</button>
Now to the problem. There are two solution for it ,
If you use click event, then you should manually trigger submit on correct validation case,
<input type="button" id="add_walkin_patient_button">Submit</button>
//JS :
$("#add_walkin_patient_button").click(function() {
if(valid){
$("#form-id").submit();
}
Another option is to use submit event;which is triggered just after you click submit button. Here you need to either allow form submit or halt it based on your validation criteria,
$("#form-id").submit(function(){
if(invalid){
//Suppress form submit
return false;
}else{
return true;
}
});
P.S
And i would recommend you to use jQuery Validate as suggested by #sherin-mathew
make a javascript validation method (say, validateForm(), with bool return type). add [onsubmit="return validateForm()"] attribute to your form and you are done.
You need to prevent default action.
$('#add_walkin_patient_form').on('submit', function(e) {
e.preventDefault();
//Validate form and submit
});
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<style>
#first{
display: none;
}
</style>
<div class="container"><br>
<div class="col-lg-6 m-auto d-block">
<form action="" method="" onsubmit="return validation()" class="bg-light">
<div class="form-group">
<label for="">Title</label>
<span class="text-danger">*</span>
<!-- <input class="form-control" type="text" > -->
<select name="title" id="title" class="form-control" >
<option value=""class="form-control" >Select</option>
<option value="Mr" class="form-control">Mr</option>
<option value="Mrs" class="form-control">Mrs</option>
</select>
<span id="tit" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstName">FirstName</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="First name" id="firstName" >
<span id="first" class="text-danger font-weight-bold"> </span>
</div>
<div class="col">
<label for="lastName">LastName</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Last name" id="lastName">
<span id="last" class="text-danger font-weight-bold"> </span>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Your Email</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Email" id="email">
<span id="fillemail" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label for="contact">Your Contact</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Contact Number" id="contact">
<span id="con" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label for="password">Your Password</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Password" id="password">
<span id="pass" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label for="conPassword">Confirm Password</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" placeholder="Password" id="conPassword">
<span id="conPass" class="text-danger font-weight-bold"> </span>
</div>
<div class="checkbox">
<label><input type="checkbox"> I accept Terms and Conditions</label>
</div>
<div class="checkbox">
<label><input type="checkbox"> I agree to recieve Email Terms and Conditions</label>
</div>
<div class="checkbox">
<label><input type="checkbox"> I agree to recieve SMS Terms and Conditions</label>
</div>
<input type="submit" name="submit" value="SignUp" id="signUp" class="btn btn-success" autocomplete="off">
</form><br><br>
</div>
</div>
<script type="text/javascript">
function validation(){
var title = document.getElementById('title').value;
var firstName = document.getElementById('firstName').value;
var email=document.getElementById('email').value;
var contact=document.getElementById('contact').value;
var password=document.getElementById('password').value;
var conPassword=document.getElementById('conPassword').value;
var signBut=document.getElementById('signUp');
console.log(firstName);
if(title == ""){
document.getElementById("tit").innerHTML =" Please select the title feild first field";
return false;
}
// if(firstName == "" & firstName.length<=3){
// document.getElementById("first").innerHTML =" Please Enter First Name";
// return false;
// document.getElementById("signUp").addEventListener("click", function(event){
// event.preventDefault()
// });
// }
signBut.addEventListener('click',function(e){
if(firstName=="" & firstName<3)
{
document.getElementById("first").innerHTML="Please Enter proper Name";
e.preventDefault();
}
},false);
if(lastName == ""){
document.getElementById("last").innerHTML =" Please Enter Last Name";
return false;
}
else if(email ==""){
document.getElementById("fillemail").innerHTML="Please Enter Email";
}
else if(contact ==""){
document.getElementById("con").innerHTML="Please Enter Your Contact";
}
else if(password ==""){
document.getElementById("pass").innerHTML="Please Enter Your Password";
}
else if(conPassword ==""){
document.getElementById("conPass").innerHTML="Please Confirm Password";
}
}
</script>
</body>
</html>
I think you should use type button
and then eventClick function of jquery
There may be a better way to do this, but I'm trying to create a button group where the left and right buttons are increment/decrement, and the middle button is a disabled button representing the value.
The field properly increments/decrements, but the value isn't getting passed to php.
I do like how the button group looks:
HTML
<form method="POST" action="send_email.php">
<div class="row"">
<div class="col-sm-4 col-xs-4">
<h5><b>Attendees</b></h5>
</div>
<div class="col-sm-8 col-xs-8">
<div class="btn-group">
<input type="button" class="btn btn-default" name="decrease" value="-" onclick="decreaseBtnOnclick('attendees')"/>
<input type="button" class="btn btn-primary" name="attendees" value="0" id="chairs" disabled/>
<input type="button" class="btn btn-default" name="increase" value="+" onclick="increaseBtnOnclick('attendees')"/>
</div>
</div>
</div>
<div class="text-right">
<input type="hidden" name="email" value="contact">
<a href="./index.php">
<button type="submit" class="btn-main">Finish!</button>
</a>
</div>
</form>
Javascript (works fine to change the value in the middle button)
<script>
function increaseBtnOnclick(item) {
document.getElementById(item).value = Number(document.getElementById(item).value) + 1;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
document.getElementById(item).value = Number(document.getElementById(item).value) - 1;
}
}
PHP (works fine for other types of inputs, e.g., text)
<?php
if(isset($_POST['email'])) {
$attendees = $_POST['attendees']; // required
echo "Attendees: ".$attendees;
}
?>
Try adding a hidden input then add the value of your disabled button to it with JS.
JS
function increaseBtnOnclick(item) {
var newValue = Number(document.getElementById(item).value) + 1;
document.getElementById(item).value = newValue;
document.getElementById("hidden_input").value = newValue;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
var newValue = Number(document.getElementById(item).value) - 1;
document.getElementById(item).value = newValue;
document.getElementById("hidden_input").value = newValue;
}
}
HTML:
<form method="POST" action="send_email.php">
<div class="row"">
<div class="col-sm-4 col-xs-4">
<h5><b>Attendees</b></h5>
</div>
<div class="col-sm-8 col-xs-8">
<div class="btn-group">
<input type="button" class="btn btn-default" name="decrease" value="-" onclick="decreaseBtnOnclick('attendees')"/>
<input type="button" class="btn btn-primary" name="attendees" value="0" id="chairs" disabled/>
<input type="button" class="btn btn-default" name="increase" value="+" onclick="increaseBtnOnclick('attendees')"/>
<input type="hidden" name="hiddenvalue" id="hidden_input" value="0">
</div>
</div>
</div>
<div class="text-right">
<input type="hidden" name="email" value="contact">
<a href="./index.php">
<button type="submit" class="btn-main">Finish!</button>
</a>
</div>
</form>
PHP:
<?php
if(isset($_POST['email'])) {
$attendees = $_POST['hiddenvalue']; // required
echo "Attendees: ".$attendees;
}
?>
You could switch to a regular input field with button addons.
Disabled input fields do not get posted, however you can set it to readonly.
Please have a look at this thread,
Disabled form inputs do not appear in the request
You could use a hidden input field:
<input type="hidden" id="h_attendees" name="h_attendees" value="0"/>
In your increaseBtnOnclick and decreaseBtnOnclick you could set the value of the hidden field.
function increaseBtnOnclick(item) {
document.getElementById(item).value = Number(document.getElementById(item).value) + 1;
document.getElementById("h_attendees").value = document.getElementById(item).value;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
document.getElementById(item).value = Number(document.getElementById(item).value) - 1;
document.getElementById("h_attendees").value = document.getElementById(item).value;
}
}
And access it in PHP
$_POST['h_attendees'];
My test PHP submission code:
<?php
if($_POST['create']) { echo $_POST['name']; }
?>
My HTML form code:
<form class="form-horizontal" id="ConsultantSignUp" method="post" action="#">
<div class="control-group">
<label class="control-label" for="inputForename">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="name" name="name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01"></label>
<div class="controls">
<button type="submit" class="btn btn-success" rel="create" title="create" id="create" name="create">Create My Account</button>
</div>
</div>
</form>
My error is that it doesn't even print out the name after submission. I've checked the PHP Error log and it says:
PHP Notice: Undefined index: create in /Users/**/sites/signup.php on line 2
Line 2 being 'if($_POST['create']) { echo $_POST['name']; }'.
I'm aware of the isset() method to remove the Undefined Index notice, how ever, I just want to test my form!
This is my total code...This working perfectly for me in Chrome, Explorer and Firefox. Just check it
<?php
if(isset($_POST['create']))
{
echo $_POST['name'];
}
else
{
?>
<form class="form-horizontal" id="ConsultantSignUp" method="post" action="#">
<div class="control-group">
<label class="control-label" for="inputForename">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="name" name="name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01"></label>
<div class="controls">
<button type="submit" class="btn btn-success" rel="create" title="create" id="create" name="create">Create My Account</button>
</div>
</div>
<?php
}
?>
Your <button ... name="create"> doesn't have a value so it will submit an empty string and $_POST['create'] will evaluate as false.
Give it a value.
the 'undefined index' NOTICE will go away when you use isset() function.
this often occurs when an unchecked checkbox is also posted.
the error is only there because no 'value' is passed on the submit button and the the submit button is POSTED empty.
replace submit button with,
<button value='submitbtn' type="submit" class="btn btn-success" rel="create" title="create" id="create" name="create">Create My Account</button>
PS ONLY (value='submitbtn') is added to your original button