after clicking submit button a white page appears - php

I have made form using HTML n CSS and also linked action to my PHP file index_handler.php just don't understand where is the mistake that a strange white screen appears when I press submit
<form action="index_handler.php" class="appointment-form ftco-animate" method="post" name="form">
<div class="d-md-flex">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Full Name ">
</div>
<div class="form-group ml-md-4">
<input type="text" class="form-control" name="m_name" placeholder="Mother's Name">
</div>
<div class="form-group ml-md-4">
<input type="email" class="form-control" name="email" placeholder="Email ID">
</div>
</div>
<div class="d-md-flex">
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="course" id="" class="form-control">
<option value="text" style="color:black" >Select Course</option>
<option value="text" style="color:black" >Regular Classroom Programme</option>
<option value="text" style="color:black" >Distance Learning Programme</option>
<option value="text" style="color:black" >Online Learning Programme</option>
<option value="text" style="color:black" >School Integrated Programme</option>
<option value="text" style="color:black" >Crash Course Programme</option>
<option value="text" style="color:black" >Summer Course Programme</option>
<option value="text" style="color:black" >Edu-Nexus Programme</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="board" id="" class="form-control">
<option value="text" style="color:black" > Board</option>
<option value="text" style="color:black" >CBSE</option>
<option value="text" style="color:black" >CHSE(STATE)</option>
<option value="text" style="color:black" >ICSE</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="class" id="" class="form-control">
<option value="text" style="color:black" > Class</option>
<option value="text" style="color:black" >VI</option>
<option value="text" style="color:black" >VII</option>
<option value="text" style="color:black" >VIII</option>
<option value="text" style="color:black" >IX</option>
<option value="text" style="color:black" >X</option>
<option value="text" style="color:black" >XI</option>
<option value="text" style="color:black" >XII</option>
<option value="text" style="color:black" >XIII</option>
<option value="text" style="color:black" >Others</option>
</select>
</div>
</div>
</div>
</div>
<div class="d-md-flex">
<div class="form-group">
<textarea name="address" id="" cols="30" rows="2" class="form-control" placeholder="Address"></textarea>
</div>
<div class="form-group ml-md-4">
<input type="tel" name="phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group ml-md-4">
<input type="submit" value="Request A Quote" class="btn btn-secondary py-3 px-4">
</div>
</div>
</form>
so here is my PHP file i.e, index_handler.php
<?php
if(isset($_POST['submit'])){
$name=$_POST['name'];
$email=$_POST['email'];
$m_name=$_POST['m_name'];
$course=$_POST['course'];
$board=$_POST['board'];
$class=$_POST['class'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$to='rajkishore.panda2000#gmail.com';
$subject='Form Submission';
$message="Name :".$name."\n"."Mother's Name :".$m_name."\n"."Course :".$course."\n"."Board :".$board."\n"."Class :".$class."\n"."Phone :".$phone."\n"."Address:"."\n\n".$address;
$headers="From: ".$email;
if(mail($to, $subject, $message, $headers)){
echo "<h1>Sent Successfully! Thank you"." ".$name.", We will contact you shortly!</h1>";
}
else{
echo "<h1>Something went wrong!</h1>";
}
}
?>

You need give submit button name, because your php is
isset($_POST['submit'])
to fix your problem, change your code
<input type="submit" value="Request A Quote" class="btn btn-secondary py-3 px-4">
to
<input type="submit" name="submit" value="Request A Quote" class="btn btn-secondary py-3 px-4">

Hey just Add name="submit" and that's it
change this code
<div class="form-group ml-md-4">
<input type="submit" value="Request A Quote" class="btn btn-secondary py-3 px-4">
</div>
To be
<div class="form-group ml-md-4">
<input type="submit" name="submit" value="Request A Quote" class="btn btn-secondary py-3 px-4">
</div>

Related

Form throws error when submitting in PHP to email [duplicate]

This question already has answers here:
Reference - What does this error mean in PHP?
(38 answers)
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 3 years ago.
My form throws an error in PHP when submitting form data via email. Not sure what I did wrong/am missing.
Form:
<div class="row">
<div class="col">
<form id="msform" action="submit.php" method="post" data-autosubmit>
<!-- Step 1 -->
<fieldset>
<h2 class="fs-title">Step 1</h2>
<h3 class="fs-subtitle">Tell us about your device.</h3>
<div class="form-group">
<label for="brand">Brand</label>
<select class="form-control" id="brand" name="brand" required>
<option value="" selected data-default>- Device Brand -</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
</select>
</div>
<div class="form-group">
<label for="model">Model</label>
<select class="form-control" id="model" name="model" required>
<option value="" selected data-default>- Device Model -</option>
<option value="iPhone 8">iPhone 8</option>
<option value="iPhone X">iPhone X</option>
<option value="Galaxy S8">Galaxy S8</option>
<option valaue="Galaxy S9">Galaxy S9</option>
<option value="Galaxy S10">Galaxy S10</option>
</select>
</div>
<div class="form-group">
<label for="variant">Storage</label>
<select class="form-control" id="variant" name="variant" required>
<option value="" selected data-default>- Storage Size -</option>
<option value="iPhone 8 - 64GB">iPhone 8 - 64GB</option>
<option value="iPhone 8 - 256GB">iPhone 8 - 256GB</option>
<option value="iPhone X - 64GB">iPhone X - 64GB</option>
<option value="iPhone X - 256GB">iPhone X - 256GB</option>
<option value="Galaxy S8 - 64GB">Galaxy S8 - 64GB</option>
<option valaue="Galaxy S9 - 64GB">Galaxy S9 - 64GB</option>
<option value="Galaxy S10 - 128GB">Galaxy S10 - 128GB</option>
</select>
</div>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<!--Step 1 End-->
<!--Step 2-->
<fieldset>
<h2 class="fs-title">Step 2</h2>
<h3 class="fs-subtitle">Now we need to know more about your device's condition.</h3>
<div class="form-group">
<label for="screen">How is your device's <b>screen</b>?</label>
<select class="image-picker form-control" id="screen" name="screen" required>
<option value="0" data-img-src="">Flawless, no scratches!</option>
<option value="1" data-img-src="">1-2 light scratches</option>
<option value="2" data-img-src="">3 or more scratches</option>
<option value="3" data-img-src="">Cracked or damaged</option>
</select>
</div>
<div class="form-group">
<label for="body">How is your device's <b>housing</b>?</label>
<select class="form-control" id="body" name="body" required>
<option value="0">Flawless, no scratches or bends!</option>
<option value="1">1-2 light scratches</option>
<option value="2">3 or more scratches</option>
<option value="3">Bent or severely damaged</option>
</select>
</div>
<div class="form-group">
<label for="power">Is your device able to <b>power on</b>?</label>
<select class="form-control" id="power" name="power" required>
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<!--Step 2 End-->
<!--Step 3-->
<fieldset>
<h2 class="fs-title">Step 3</h2>
<h3 class="fs-subtitle">Just a little more information needed, almost there!</h3>
<div class="form-group">
<label for="battery">Does your device have a faulty battery?</label>
<select class="form-control" id="battery" name="battery" required>
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<div class="form-group">
<label for="charge">Is your device able to <b>charge</b>?</label>
<select class="form-control" id="charge" name="charge" required>
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<div class="form-group">
<label for="calls">Is your device able to <b>make and receive calls</b>?</label>
<select class="form-control" id="calls" name="calls">
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<div class="form-group">
<label for="fcamera">Does your <b>front camera work</b>?</label>
<select class="form-control" id="fcamera" name="fcamera">
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<div class="form-group">
<label for="rcamera">Does your <b>rear camera work</b>?</label>
<select class="form-control" id="rcamera" name="rcamera">
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<div class="form-group">
<label for="water">Is your device <b>water damaged</b>?</label>
<select class="form-control" id="water" name="water">
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<div class="form-group">
<label for="wifi">Is your device able to connect using WiFi?</label>
<select class="form-control" id="wifi" name="wifi">
<option value="0">Yes</option>
<option value="1">No</option>
</select>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" onclick="getFinalPrice();" />
</fieldset>
<!--End Step 3-->
<!--Final-->
<fieldset>
<h2 class="fs-title">Value</h2>
<h3 class="fs-subtitle">Here's how much we can offer for your device.</h3>
<h2 id="finalValue"></h2>
<hr>
<h3 class="fs-subtitle">If you're happy with our offer, please fill in your contact details below and we'll arrange for free a pickup of your device.</h3>
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control" placeholder="Full Name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="example#example.com" name="email" required>
</div>
<div class="form-group">
<label for="number">Phone Number</label>
<input type="number" class="form-control" placeholder="91234567" name="number" required>
<small id="numberHelp" class="form-text text-muted">We'll never share your email and phone number with anyone else.</small>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<!--Final End-->
</form>
</div>
</div>
<!-- /.MultiStep Form -->
</body>
</html>
PHP Script:
<?php
$name = $_POST['name'];
$number = $_POST['number'];
$email = $_POST['email'];
$brand = $_POST['brand'];
$model = $_POST['model'];
$variant = $_POST['variant'];
$screen = $_POST['screen'];
$body = $_POST['body'];
$power = $_POST['power'];
$battery = $_POST['battery'];
$charge = $_POST['charge'];
$calls = $_POST['calls'];
$fcamera = $_POST['fcamera'];
$rcamera = $_POST['rcamera'];
$water = $_POST['water'];
$wifi = $_POST['wifi'];
$formcontent = "From: $name \n Contact: $number \n Device Brand: $brand \n Device Model: $model \n Device Variant: $variant \n How is your device's screen? $screen \n How is your device's housing? $body \n Is your device able to power on? $power \n Does your device have a fault battery? $battery \n Is your device able to charge? $charge \n Does your front camera work? $fcamera \n Does your rear camera work? $rcamera \n Is your device water damaged? $water \n Is your device able to connect using WiFi? $wifi";
$recipient = "example#example.com";
$subject = "Buyback Request";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank you! We'll be in contact soon. You'll now be redirected back to our main webpage.";
/* Redirect browser */
header("Location: https://example.com");
/* Make sure that code below does not get executed when we redirect. */
exit;
?>
I gave the input options all a name value so that PHP knows where to find the data. Not sure if this is the correct way of doing it.
Currently, the form always throws an error on submission.
All help is appreciated, thank you!

Submit same forms with two buttons and send thank you mail only on the second submit button

I am having the issue on submitting the same form with two submit buttons. I am submitting the form for the first time with ajax submission and on the second time I want to submit the whole form but when I send the form the thank you mail hits two times . I want to send the thank you mail only on the second submit button and not on the first button. I have the button type ="button" ,
Here is my form code:-
<form name="basicform" id="basicform" method="post" action="<?php bloginfo("template_directory"); ?>/forms/callback/callback_process.php">
<input type="hidden" value="<?php echo $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" name="source" id="source" />
<input type="hidden" value="submited" name="basicform"/>
<input type="hidden" name="form_name" id="form_name" value="Header Contact Form" class="basicformname" >
<div id="sf1" class="frm">
<fieldset>
<!--<legend>Take a step for a Good health.</legend>-->
<div class="wor-alert"><p class="text-center fill-fields">Please Fill All This Fields*</p></div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon"><i class="travcure-icon travcure-user"></i></span>
<input type="text" placeholder="Name" id="uname" name="uname" class="form-control" autocomplete="off">
<span class="nameerr" id="unameerr"><?php echo #$_SESSION['unameerr'] ? $_SESSION['unameerr']:''; unset($_SESSION['unameerr']); ?></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon"><i class="travcure-icon travcure-envelope"></i></span>
<input type="text" placeholder="Email" id="uemail" name="uemail" class="form-control" autocomplete="on">
<span class="emailerr" id="uemailerr"><?php echo #$_SESSION['uemailerr'] ? $_SESSION['uemailerr']:''; unset($_SESSION['uemailer']); ?></span>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Phone Number" id="uphone" name="uphone" class="uphone form-control" autocomplete="off">
<span class="phoneerr" id="uphoneerr"><?php echo #$_SESSION['uphoneerr'] ? $_SESSION['uphoneerr']:''; unset($_SESSION['uphoneerr']); ?></span>
<input type="hidden" class="uphonefull" name="uphonefull">
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon"><i class="travcure-icon travcure-user-md"></i></span>
<span class="plain-select">
<select name="utreatments" data-style="btn-primary" id="utreatments" class="form-control selectpicker">
<option value="">Select Treatment</option>
<option value="Alternative Treatment">Alternative Treatment</option>
<option value="2">Treatment Two</option>
<option value="3">Treatment Three</option>
<option value="4">Treatment Four</option>
<option value="5">Treatment Five</option>
</select>
</span>
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class=" text-center">
<button class="btn open1" type="button" id="head-frm-btn">Next <span class="fa fa-arrow-right"></span></button>
</div>
</fieldset>
</div>
<div id="sf2" class="frm" style="display: none;">
<fieldset>
<!--<legend>What treatment are you looking for?</legend>-->
<div class="form-group">
<span class="plain-select">
<select name="ucity" id="ucity" class="form-control">
<option value="">Select City</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
<option value="Banglore">Banglore</option>
<option value="Nagpur">Nagpur</option>
<option value="Goa">Goa</option>
</select>
</span>
</div>
<div class="form-group">
<span class="plain-select">
<select name="uhospital" id="uhospital" class="form-control">
<option value="">Select Hospital</option>
<option value="Hospital One">Hospital One</option>
<option value="Hospital Two">Hospital Two</option>
<option value="Hospital Three">Hospital Three</option>
<option value="Hospital Four">Hospital Four</option>
<option value="Hospital Five">Hospital Five</option>
</select>
</span>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class=" text-center">
<button class="btn back2" type="button"><span class="fa fa-arrow-left"></span> Back</button>
<button class="btn open2" type="button" id="head-frm-btn-two">Next <span class="fa fa-arrow-right"></span></button>
</div>
</fieldset>
</div>
<div id="sf3" class="frm" style="display: none;">
<fieldset>
<!--<legend>Almost done</legend>-->
<div class="waittext">
<p>Our customer care executive will get in contact with you soon. Please bear with us.</p>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class=" text-center">
<button class="btn back3" type="button"><span class="fa fa-arrow-left"></span> Back</button>
<input class="btn open3" value="Submit" type="submit" name="head_form_submit">
</div>
</fieldset>
</div>
</form>
I submit this form using ajax for the first submit button and then on the second button I send the whole information but I want to send the thank you mail on the second button and not on the ajax submission of the button. I want to get th email of both the forms but i want to send the thank you mail only on the second submit button.
you can use two submit buttons
<button type="submit" name="submit">Submit form</button>
<button type="submit" name="submit_and_send_email">Submit and Send Email</button>
in php you can access the post like this
<?php
if(isset($_POST['submit']))
{
//submit only
}
if(isset($_POST['submit_and_send_email']))
{
//submit and send email
}
?>

Unable / disable select field on checkbox field with several forms - Jquery

I have several form having the same fields: A checkbox (bootstrap switch) and a select
I want that when I pick the checkbox, the select switch to enable / disable
Thing is when I do it, only the first form is working :(
Here is my HTML
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
<div class="row">
<div class="col-md-2">
<label>
<input id="isTeam7" name="isTeam" type="hidden" value="0">
<input class="switch" data-on-text="Si" data-off-text="No" id="isTeam7" name="isTeam" type="checkbox" value="1">
</label>
</div>
<div class="col-md-5">
<select class="form-control" disabled="disabled" id="teamSize" name="teamSize"><option value="0">2</option><option value="1">3</option><option value="2" selected="selected">4</option><option value="3">5</option><option value="4">6</option><option value="5">7</option><option value="6">8</option><option value="7">9</option><option value="8">10</option><option value="9">11</option><option value="10">12</option><option value="11">13</option><option value="12">14</option><option value="13">15</option></select>
</div>
</div>
<div align="right">
<button type="submit" class="btn btn-success save_category" id="save7"><i></i>Guardar
</button>
</div>
</form>
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
<div class="row">
<div class="col-md-2">
<label>
<input id="isTeam8" name="isTeam" type="hidden" value="0">
<input class="switch" data-on-text="Si" data-off-text="No" id="isTeam8" name="isTeam" type="checkbox" value="1">
</label>
</div>
<div class="col-md-5">
<select class="form-control" disabled="disabled" id="teamSize" name="teamSize"><option value="0">2</option><option value="1">3</option><option value="2" selected="selected">4</option><option value="3">5</option><option value="4">6</option><option value="5">7</option><option value="6">8</option><option value="7">9</option><option value="8">10</option><option value="9">11</option><option value="10">12</option><option value="11">13</option><option value="12">14</option><option value="13">15</option></select>
</div>
</div>
<div align="right">
<button type="submit" class="btn btn-success save_category" id="save8"><i></i>Guardar
</button>
</div>
</form>
Here is my Jquery
$('input[name="isTeam"]').on('switchChange.bootstrapSwitch', function (event, state) {
var isChecked = $(this).is(':checked');
$('.teamSize').prop('disabled', !isChecked);
});
How can I do so that it work for all the forms in my page???
Check this snippet.
$(function() {
$('input[name="isTeam"]').on('switchChange.bootstrapSwitch', function(event, state) {
var isChecked = $(this).is(':checked');
$(this).closest('form').find('[name="teamSize"]').prop('disabled', !isChecked);
});
$("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();
});
<link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
<div class="row">
<div class="col-md-2">
<label>
<input id="isTeam7" name="isTeam" type="hidden" value="0">
<input class="switch" data-on-text="Si" data-off-text="No" id="isTeam7" name="isTeam" type="checkbox" value="1">
</label>
</div>
<div class="col-md-5">
<select class="form-control" disabled="disabled" id="teamSize" name="teamSize">
<option value="0">2</option>
<option value="1">3</option>
<option value="2" selected="selected">4</option>
<option value="3">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="10">12</option>
<option value="11">13</option>
<option value="12">14</option>
<option value="13">15</option>
</select>
</div>
</div>
<div align="right">
<button type="submit" class="btn btn-success save_category" id="save7"><i></i>Guardar
</button>
</div>
</form>
<form method="POST" action="http://laravel.dev/tournaments/1/categories/6/settings/9" accept-charset="UTF-8">
<div class="row">
<div class="col-md-2">
<label>
<input id="isTeam8" name="isTeam" type="hidden" value="0">
<input class="switch" data-on-text="Si" data-off-text="No" id="isTeam8" name="isTeam" type="checkbox" value="1">
</label>
</div>
<div class="col-md-5">
<select class="form-control" disabled="disabled" id="teamSize" name="teamSize">
<option value="0">2</option>
<option value="1">3</option>
<option value="2" selected="selected">4</option>
<option value="3">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="10">12</option>
<option value="11">13</option>
<option value="12">14</option>
<option value="13">15</option>
</select>
</div>
</div>
<div align="right">
<button type="submit" class="btn btn-success save_category" id="save8"><i></i>Guardar
</button>
</div>
</form>
Your input element with id="teamSize" doesn't have a class called teamSize, thus your jQuery (which is looking for a class, not an id) has nothing to target.

insertion failed in database

<?php
include('include/connection.php');
session_start();
$_SESSION['verify_remote_agent']=$_SERVER['HTTP_USER_AGENT'];
$r=session_id();
if(isset($next)) {
$city=$_POST['city'];
$from_city=$_POST['from_city'];
$to_city=$_POST['to_city'];
$query="INSERT INTO user_details values('$r','$city',$from_city,'$to_city')";
mysql_query($query);
}
?>
<div class="container">
<form action="index2.php" method="POST">
<div class="form-group city col-sm-4">
<select class="form-control" name="city">
<option value="choose">Choose City</option>
<option value="option[1]">Delhi/NCR</option>
<option value="others">Other</option>
</select>
</div>
<div class="form-group from_city col-sm-4">
<input type="text" class="form-control" name="from_city" placeholder="From Area">
</div>
<div class="form-group to_city col-sm-4">
<input type="text" class="form-control" name="to_city" placeholder="To Area">
</div>
<p class="text-right">
<input class="btn btn-primary" type="submit" value="Next Step" name="next">
</p>
</form>
</div>
Try this:
$query="INSERT INTO user_details values('".$r."','".$city."','".$from_city."','".$to_city."')";
mysql_query($query);

Checked Checkbox Not Working?

I have an HTML form that posts to a PHP script. Everything is working except the checkbox. When it is checked, the value is not being posted.
HTML:
<input name="test" id="checkbox-02" type="checkbox" value="1" />
PHP:
if(!isset($_POST['test'])) {
$eventRepeat="No";
}
if(isset($_POST['test'])) {
$eventRepeat="Yes";
}
When this code runs, $eventRepeat always comes out as "No." I tried using the command "print_r($_POST)" and all inputs are posted except the checkbox, even when it is checked.
Any ideas what could cause this? I do have jQuery running so when it is checked two divs appear. Could that somehow be interfering? Here's the jQuery:
$(document).ready(function () {
$('#checkbox-02').change(function () {
if (!this.checked)
// ^
$('#repeatUntilDIV').fadeIn('slow');
$('#repeatFrequencyDIV').fadeIn('slow');
});
});
For reference, here is the full code:
<form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="" method="post">
<div class="form-group">
<label for="inputEventTitle" class="col-lg-2 control-label">Event Title</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEventTitle" name="inputEventTitle" placeholder="Event Title" required>
</div>
</div>
<div class="form-group">
<label for="inputEventDescription" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEventTitle" name="inputEventDescription" placeholder="Event Description" required>
</div>
</div>
<div class="form-group">
<label for="inputEventStartTime" class="col-lg-2 control-label">Start Time</label>
<div class="col-lg-10">
<select name="inputEventStartTime" class="form-control" id="dp1" required>
<option label="Start Time">
<option value="12:00AM">12:00AM</option>
<option value="12:15AM">12:15AM</option>
<option value="12:30AM">12:30AM</option>
<option value="12:45AM">12:45AM</option>
<option value="1:00AM">1:00AM</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEventEndTime" class="col-lg-2 control-label">End Time</label>
<div class="col-lg-10">
<select name="inputEventEndTime" class="form-control" id="dp1" required>
<option label="End Time">
<option value="1:00AM">1:00AM</option>
<option value="1:15AM">1:15AM</option>
<option value="1:30AM">1:30AM</option>
<option value="1:45AM">1:45AM</option>
<option value="2:00AM">2:00AM</option>
</select> </div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-6">
<input id="dp1" name="inputEventDate" type="text" size="16" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="inputEventDate" class="col-lg-2 control-label">Repeat?</label>
<div class="col-lg-10 checkboxes">
<label class="label_check" for="checkbox-02"> </label>
<input name="test" id="checkbox-02" type="checkbox" value="1" /> Yes, I want to repeat this event.
</div>
</div>
<div class="form-group" id="repeatUntilDIV" style="display:none;">
<label for="inputEventEndDate" class="col-lg-2 control-label">Repeat Until</label>
<div class="col-lg-10">
<input name="inputEventEndDate" id="eventEndDate" type="text" placeholder="End Date" class="form-control">
</div>
</div>
<div class="form-group" id="repeatFrequencyDIV" style="display:none;">
<label for="inputEventFrequency" class="col-lg-2 control-label">Repeat Every</label>
<div class="col-lg-10">
<select name="inputEventFrequency" class="form-control" id="dp1">
<option label="Repeat Every">
<option value="1">Repeat Every Day</option>
<option value="2">Repeat Every Other Day</option>
<option value="7">Repeat Every Week</option>
<option value="14">Repeat Every Other Week</option>
<option value="30">Repeat Every Month</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<input type="submit" name="addPrimaryEvent" class="btn btn-success" value="Submit" />
</form>
I get this from var_dump($_POST):
array(8) {
["inputEventTitle"]=>
string(5) "Title"
["inputEventDescription"]=>
string(11) "Description"
["inputEventStartTime"]=>
string(6) "2:00AM"
["inputEventEndTime"]=>
string(6) "3:00AM"
["inputEventDate"]=>
string(10) "05-26-2014"
["inputEventEndDate"]=>
string(10) "05-29-2014"
["inputEventFrequency"]=>
string(1) "1"
["addPrimaryEvent"]=>
string(6) "Submit"
}
Very unclear why this would not work. But I noticed inconsistencies & imbalance in the HTML tags as well as an empty action="" which is not HTML5 valid. For more details, see this great answer over here.
So I have set it to #. You might want to actually change that to the full filename or path to the PHP script such as action="form.php". Or you could leave it out altogether like this:
<form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="#" method="post">
But I prefer to be explicit & recommend the action="form.php" way of handling things. Here is your cleaned up HTML form:
<form class="cmxform form-horizontal tasi-form" id="commentForm" role="form" action="#" method="post">
<div class="form-group">
<label for="inputEventTitle" class="col-lg-2 control-label">Event Title</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEventTitle" name="inputEventTitle" placeholder="Event Title" required="" />
</div>
</div>
<div class="form-group">
<label for="inputEventDescription" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEventTitle" name="inputEventDescription" placeholder="Event Description" required="" />
</div>
</div>
<div class="form-group">
<label for="inputEventStartTime" class="col-lg-2 control-label">Start Time</label>
<div class="col-lg-10">
<select name="inputEventStartTime" class="form-control" id="dp1" required="">
<option value="12:00AM">
12:00AM
</option>
<option value="12:15AM">
12:15AM
</option>
<option value="12:30AM">
12:30AM
</option>
<option value="12:45AM">
12:45AM
</option>
<option value="1:00AM">
1:00AM
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEventEndTime" class="col-lg-2 control-label">End Time</label>
<div class="col-lg-10">
<select name="inputEventEndTime" class="form-control" id="dp1" required="">
<option value="1:00AM">
1:00AM
</option>
<option value="1:15AM">
1:15AM
</option>
<option value="1:30AM">
1:30AM
</option>
<option value="1:45AM">
1:45AM
</option>
<option value="2:00AM">
2:00AM
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-6">
<input id="dp1" name="inputEventDate" type="text" size="16" class="form-control" required="" />
</div>
</div>
<div class="form-group">
<label for="inputEventDate" class="col-lg-2 control-label">Repeat?</label>
<div class="col-lg-10 checkboxes">
<input name="test" id="checkbox-02" type="checkbox" value="1" /> Yes, I want to repeat this event.
</div>
</div>
<div class="form-group" id="repeatUntilDIV" style="display:none;">
<label for="inputEventEndDate" class="col-lg-2 control-label">Repeat Until</label>
<div class="col-lg-10">
<input name="inputEventEndDate" id="eventEndDate" type="text" placeholder="End Date" class="form-control" />
</div>
</div>
<div class="form-group" id="repeatFrequencyDIV" style="display:none;">
<label for="inputEventFrequency" class="col-lg-2 control-label">Repeat Every</label>
<div class="col-lg-10">
<select name="inputEventFrequency" class="form-control" id="dp1">
<option value="1">
Repeat Every Day
</option>
<option value="2">
Repeat Every Other Day
</option>
<option value="7">
Repeat Every Week
</option>
<option value="14">
Repeat Every Other Week
</option>
<option value="30">
Repeat Every Month
</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> <input type="submit" name="addPrimaryEvent" class="btn btn-success" value="Submit" />
</div>
</form>

Categories