Form Submit Without Page Refreshing- jQuery/PHP - javascript
I'm really new to this site and new to web design. Lately, I'd been trying so hard to design a web page for days/weeks and I ended up stuck at "Contact Form".
I used Bootstrap to write a form that pop up from a modal window. Plus, I also linked a remote contact form so I can just link it up for different pages.
However I've got not much knowledge of php and jquery to validate and submit my form on the fly at that modal page without refreshing the page. I am stuck her for days going a week. Here is my code please help.
I linked remote contact form from homepage like this :
Subscribe! <b class=".glyphicon-triangle-bottom:before">▼</b>
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="form/contactForm.php" data-target="#contactmodal" role="button"><i id="ddicons" class="fa fa-envelope-square"></i> Newsletter</a></li>
And the linked contactForm.php goes like this :
UPDATED CHECK BELOW
and the mailform.php is like this:
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "myemail#email.com";
$email_subject = "Newsletter Subscription";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['country']) ||
!isset($_POST['gender']) ||
!isset($_POST['terms'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['name']; // required
$inputEmail = $_POST['email']; // required
$country = $_POST['country']; // required
$gender = $_POST['gender']; // not required
$terms = $_POST['terms']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
if(strlen($inputCountry) < 1) {
$error_message .= 'Please select your country.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
if(strlen($inputGender) < 1) {
$error_message .= 'Please select your gender.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Country: ".clean_string($inputCountry)."\n";
$email_message .= "Gender: ".clean_string($inputGender)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
#mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
Problem:
I've got no idea what going on now. The homepage modal does load the remote form but the submit button isn't working and when it does, it refreshes. I do wish all the input in the form are required.
So far I have this as my contact form. Country: Gender : Agree: and Submit: are not working well.. :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Ajax Contact Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_btn").click(function() {
var proceed = true;
//simple validation at client's end
//loop through each field and we simply change border color to red for invalid fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});
if(proceed) //everything looks good! proceed...
{
//get input field values data to be sent to server
post_data = {
'user_name' : $('input[name=name]').val(),
'user_email' : $('input[name=email]').val(),
};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//reset values in all input fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").val('');
$("#contact_form #contact_body").slideUp(); //hide form after success
}
$("#contact_form #contact_results").hide().html(output).slideDown();
}, 'json');
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() {
$(this).css('border-color','');
$("#result").slideUp();
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- MAIL MODAL -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Join Nexeu Mailing List!</h4>
</div>
<div class="modal-body">
<!--- Form --->
<form action="mailform.php" class="form-horizontal" id="contact_form" method="post" name="modalform" role="form"/>
<fieldset>
<div class="form-style" id="contact_form">
<div class="form-style-heading">Please Contact Us</div>
<div id="contact_results"></div>
<div id="contact_body">
<!-- Name input-->
<div class="form-group">
<label class="control-label col-md-4" for="name"><span>Name <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input id="name" name="name" type="text" maxlength="180" required="true" placeholder="Your Name" required>
</div>
</div>
<!-- e-mail input-->
<div class="form-group">
<label class="control-label col-md-4" for="email"><span>Email <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input type="email" class="form-control" id="inputEmail" required="true" placeholder="Email" required>
</div>
</div>
<!-- Country Select -->
<div id="choosecountry" class="form-group">
<label class="control-label col-md-4" for="subject"><span>Country <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<select id="country" name="subject" class="form-control" title="Select Country..." required>
<option value="">Select Country...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo, Republic of the">Congo, Republic of the</option>
<option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kosovo">Kosovo</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar (Burma)">Myanmar (Burma)</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St. Kitts and Nevis">St. Kitts and Nevis</option>
<option value="St. Lucia">St. Lucia</option>
<option value="St. Vincent and The Grenadines">St. Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="UK (United Kingdom)">UK (United Kingdom)</option>
<option value="USA (United States of America)">USA (United States of America)</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City (Holy See)">Vatican City (Holy See)</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<!-- Gender Select -->
<div class="form-group">
<label class="col-xs-4 control-label" for="gender">Gender </label>
<div class="col-xs-6">
<div class="btn-group" id="genderbtn" name="gender" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="male" required>Male</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female"required>Female</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="other"required>Other</label>
</div>
</div>
</div>
<!--- Agreement Button --->
<div class="form-group">
<div class="col-xs-6 col-xs-offset-4">
<div class="checkbox">
<label>
<input id="terms" type="checkbox" for="agree" name="agree" value="agree" data-error="Before you wreck yourself" required>
Agree with the terms and conditions </label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-xs-4 control-label" for="submit"></label>
<div class="col-md-6">
<button id="submit_btn" type="submit" value="Submit" class="submit btn btn-custom">Submit!</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<!--- /Form --->
</div><!-- end modal-body -->
<div class="modal-footer"></div>
<!-- end modal-footer -->
<!-- end mailmodal -->
<!-- /MAIL MODAL -->
</body>
</html>
You need use ajax, here a example: http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form
You may use bellow code for form submit without refresh.
$(document).ready(function(){
$("#login-form-submit").click(function(){
var username = $("#login-form-username").val();
var password = $("#login-form-password").val();
if(username == ""){
alert("Please Enter Email.");
$("#login-form-username").focus();
return false;
}
if(password == "")
{
alert("Please Enter Password.");
$("#login-form-password").focus();
return false;
}
var form = document.getElementById('login-form');
formdata2 = new FormData(form);
$.ajax({
url : "controller/ajax/check_login.php",
cache : false,
contentType : false,
processData : false,
data : formdata2,
type : 'post',
success : function(data) {
if (data == 1) {
alert('success');
}else {
alert('Invalid Authentication.');
}
}
});
return false;
});
});
Related
jQuery datepicker hide options on IOS not working
I am using a jquery datepicker. I made a script in which some time-ranges are being hidden when the day is a monday (day 1). On android and windows everything is working fine, but on Safari on IOS it is not working.
$('.extra-tijdstip').hide();
$('.ochtend-tijdstip').show();
$('#locatie').change(function(){
$('.extra-tijdstip').hide();
if ($(this).val() == 'Schiedam') {
$('.travel-date-group .today').datepicker()
.on('changeDate', function(){
var datum = $(this).datepicker('getDate');
var day = datum.getDay();
if (day == 4) {
$('.extra-tijdstip').show();
$('.ochtend-tijdstip').show();
}
else if (day == 1) {
$('.ochtend-tijdstip').hide();
}
else {
$('.extra-tijdstip').hide();
$('.ochtend-tijdstip').show();
}
});
}
});
My HTML code:
<!-- Velden voor een afspraak -->
<div class="col_full nnvo travel-date-group today">
<label for="locatie">Locatie <small>*</small></label>
<select id="locatie" name="locatie" class="sm-form-control" style="height: 40px;">
<option value="">-- Kies een locatie --</option>
<option value="Schiedam">Schiedam</option>
<option value="Vlaardingen">Vlaardingen</option>
<option value="Berkel en Rodenrijs">Berkel en Rodenrijs</option>
</select>
</div>
<div class="clear"></div>
<div class="col_half travel-date-group nnvo">
<label for="datum">Datum <small>*</small></label>
<input type="text" id="datum" name="datum" class="sm-form-control tleft disabled-week today" placeholder="DD-MM-JJJJ" autocomplete="off">
</div>
<div class="col_half col_last nnvo">
<label for="tijdstip">Tijdstip <small>*</small></label>
<select id="tijdstip" name="tijdstip" class="sm-form-control" style="height: 40px;">
<option value="">-- Kies een tijd --</option>
<option value="09:30" class="ochtend-tijdstip">09:30</option>
<option value="10:00" class="ochtend-tijdstip">10:00</option>
<option value="10:30" class="ochtend-tijdstip">10:30</option>
<option value="11:00" class="ochtend-tijdstip">11:00</option>
<option value="11:30" class="ochtend-tijdstip">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00" class="extra-tijdstip">18:00</option>
<option value="18:30" class="extra-tijdstip">18:30</option>
<option value="19:00" class="extra-tijdstip">19:00</option>
<option value="19:30" class="extra-tijdstip">19:30</option>
<option value="20:00" class="extra-tijdstip">20:00</option>
<option value="20:30" class="extra-tijdstip">20:30</option>
</select>
</div>
Does anyone know what is causing IOS to not work for this?
Thank you,
Mike
stripe connect bank account verification on selection of country
hello i am working with stripe connect and i want create interface where user select its country and according to his country system should ask the account verification information below is the code of my country select box <div class="form-group m-form__group row"> <label for="country" class="col-lg-2 col-xs-12 col-form-label"> Country <span class="required">*</span> </label> <div class="col-lg-7 col-xs-12"> <select name="account-country" class="form-control account input-lg" id="account-country" data-stripe="country"> <option value="US">United States</option> <option value="GB">United Kingdom</option> <option value="AU">Australia</option> <option value="AT">Austria</option> <option value="BE">Belgium</option> <option value="BR">Brazil</option> <option value="CA">Canada</option> <option value="DK">Denmark</option> <option value="FI">Finland</option> <option value="FR">France</option> <option value="DE">Germany</option> <option value="HK">Hong Kong</option> <option value="IE">Ireland</option> <option value="IT">Italy</option> <option value="JP">Japan</option> <option value="LU">Luxembourg</option> <option value="MX">Mexico</option> <option value="NZ">New Zealand</option> <option value="NL">Netherlands</option> <option value="NO">Norway</option> <option value="PT">Portugal</option> <option value="SG">Singapore</option> <option value="ES">Spain</option> <option value="SE">Sweden</option> <option value="CH">Switzerland</option> </select> </div> </div> can i have any jquery plugin or stripe.js for this or i need to make it custom please help me about this
Filter data $this->db->like or $this->db->or_like not working with kecamatan dropdown menu
I was stuck in my feature for my web application, I have 4 menu filters for filtering data, fungsi_bangunan, jenis_bangunan is perfectly working, and desa/kelurahan is good to because I'm using javascript in json for populated that data when I select kecamatan and then select desa/kelurahan is working to, but when I use kecamatan filter data does not showing, the query builder I think is correctly but I cannot find the something wrong about this my problem, so maybe you guys can help me, what the solution, I use php and codeigniter framework for my project,
here the model code:
public function filter_data($filter) {
$this->db->like('jenis_kegiatan',$filter);
$this->db->or_like('fungsi_bangunan',$filter);
$this->db->or_like('kecamatan',$filter);
$this->db->or_like('desa_kel',$filter);
$query = $this->db->get('permo_pdrt');
return $query->result();
}
and controller :
public function filterkeyword() {
$filter = $this->input->post('filter');
$data['results'] = $this->model->filter_data($filter);
$this->load->view('result_view',$data);
}
and this view filter :
<div class="row">
<form action="<?php echo base_url();?>pdrtcrud/filterkeyword" method="post">
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_kecamatan" name="filter">
<option selected="selected" disabled="disabled" value="">Pilih Kecamatan</option>
<option value="Babakan Madang">Babakan Madang</option>
<option value="Bojonggede">Bojonggede</option>
<option value="Caringin">Caringin</option>
<option value="Cariu">Cariu</option>
<option value="Ciampea">Ciampea</option>
<option value="Ciawi">Ciawi</option>
<option value="Cibinong">Cibinong</option>
<option value="Cibungbulang">Cibungbulang</option>
<option value="Cigombong">Cigombong</option>
<option value="Cigudeg">Cigudeg</option>
<option value="Cijeruk">Cijeruk</option>
<option value="Cileungsi">Cileungsi</option>
<option value="Ciomas">Ciomas</option>
<option value="Cisarua">Cisarua</option>
<option value="Ciseeng">Ciseeng</option>
<option value="Citereup">Citereup</option>
<option value="Dramaga">Dramaga</option>
<option value="Gunung Putri">Gunung Putri</option>
<option value="Gunung Sindur">Gunung Sindur</option>
<option value="Jasinga">Jasinga</option>
<option value="Jonggol">Jonggol</option>
<option value="Kemang">Kemang</option>
<option value="Klapanunggal">Klapanunggal</option>
<option value="Leuwiliang">Leuwiliang</option>
<option value="Leuwisadeng">Leuwisadeng</option>
<option value="Megamendung">Megamendung</option>
<option value="Nanggung">Nanggung</option>
<option value="Pamijahan">Pamijahan</option>
<option value="Parung">Parung</option>
<option value="Parung Panjang">Parung Panjang</option>
<option value="Ranca Bungur">Ranca Bungur</option>
<option value="Rumpin">Rumpin</option>
<option value="Sukajaya">Sukajaya</option>
<option value="Sukamakmur">Sukamakmur</option>
<option value="Sukaraja">Sukaraja</option>
<option value="Tajur halang">Tajur halang</option>
<option value="Tamansari">Tamansari</option>
<option value="Tanjungsari">Tanjungsari</option>
<option value="Tenjo">Tenjo</option>
<option value="Tenjolaya">Tenjolaya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_desa_kel" name="filter">
<option>Pilih Desa/Kelurahan</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Jenis Kegiatan</option>
<option value="Rumah Tinggal">Rumah Tinggal</option>
<option value="Apartemen">Apartemen</option>
<option value="Hotel">Hotel</option>
<option value="Kantor Swasta">Kantor Swasta</option>
<option value="Kantor Pemerintah">Kantor Pemerintah</option>
<option value="Gedung Badan Usaha Pemerintah">Gedung Badan Usaha Pemerintah</option>
<option value="Rumah Kantor">Rumah Kantor</option>
<option value="Bank">Bank</option>
<option value="Toko">Toko</option>
<option value="Rumah Toko">Rumah Toko</option>
<option value="Rumah Makan">Rumah Makan</option>
<option value="Restoran">Restoran</option>
<option value="Warung">Warung</option>
<option value="Kios">Kios</option>
<option value="Pasar Tradisional">Pasar Tradisional</option>
<option value="Minimarket">Minimarket</option>
<option value="SuperMarket">SuperMarket</option>
<option value="Fasilitas Rekreasi">Fasilitas Rekreasi</option>
<option value="SPBU">SPBU</option>
<option value="SPBG">SPBG</option>
<option value="Bengkel">Bengkel</option>
<option value="Showroom">Showroom</option>
<option value="Pool Kendaraan">Pool Kendaraan</option>
<option value="Gedung Parkir">Gedung Parkir</option>
<option value="Gudang">Gudang</option>
<option value="Instalasi Pengolahan">Instalasi Pengolahan</option>
<option value="Instalasi Jaringan Listrik">Instalasi Jaringan Listrik</option>
<option value="Instalasi Telekomunikasi">Instalasi Telekomunikasi</option>
<option value="Instalasi Jaringan Gas">Instalasi Jaringan Gas</option>
<option value="Sarana Pendidikan">Sarana Pendidikan</option>
<option value="Sarana Ibadah">Sarana Ibadah</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Rumah Sakit">Rumah Sakit</option>
<option value="Klinik">Klinik</option>
<option value="Balai Pengobatan Lainnya">Balai Pengobatan Lainnya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Fungsi Bangunan</option>
<option value="Hunian">Hunian</option>
<option value="Usaha">Usaha</option>
<option value="Keagmaan">Keagamaan</option>
<option value="Sosial Budaya">Sosial Budaya</option>
<option value="Campuran">Campuran</option>
</select>
</div>
<div class="col-md-1">
<input class="btn btn-success" type="submit" name="btnsubmit" value="filter">
</div>
</form>
Echoing HTML select value not giving same value set
I have this html select value that I used with AngularJS in building. Anytime I print the value selected from html in php, I keep getting a different thing. Eg. I selected Computer from the select group and the value="computer", when I echo in php, I get something like this:
? string: computer ?
I can't figure what the problem is.
HTML code below
<div class="form-group" form-group-sm>
<label>Faculty/School:</label>
<select name="faculty" class="form-control" ng-model="tfaculty">
<option value="Engineering">Faculty of Engineering</option>
<option value="Medicine">Faculty of Medicine</option>
<option value="Agriculture">Faculty of Agriculture</option>
<option value="Bioscience">Faculty of Bioscience</option>
<option value="Physical Science">Faculty of Physical Science</option>
<option value="Law">Faculty of Law</option>
<option value="Mgt Tech">Faculty of Management Sci./Tech.</option>
<option value="Soc. Science">Faculty of Social Science</option>
<option value="Health Sci.">Faculty of Health Sci. and Tech.</option>
<option value="Envt Tech">Faculty of Environmental Sci./Tech.</option>
<option value="Education">Faculty of Education</option>
<option value="Arts">Faculty of Arts</option>
</select>
</div>
<!--this section shows to choose department-->
<div class="form-group" form-group-sm>
<span ng-show="tfaculty == 'Engineering'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Elect Elect Eng">Electrical and Electronics</option>
<option value="Computer Eng">Computer Engineering</option>
<option value="Chemical Eng">Chemical Engineering</option>
<option value="Civil Eng">Civil Engineering</option>
<option value="Petroleum Eng">Petroleum Engineering</option>
<option value="Mechanical Eng">Mechanical Engineering</option>
<option value="Polymer Eng">Polymer and Textile</option>
<option value="Met Mat Eng">Material and Metallurgical</option>
<option value="Agric and Bio">Agric and BioResources</option>
<option value="Mechatronics Eng">Mechatronics Engineering</option>
</select>
</span>
<span ng-show="tfaculty == 'Medicine'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Surgery">Surgery</option>
<option value="Anaesthesiology">Anaesthesiology</option>
<option value="Chemical Pathology">Chemical Pathology</option>
<option value="Haematology">Haematology</option>
<option value="Histopathology">Histopathology</option>
<option value="Medicine">Medicine</option>
<option value="pthamology">Opthamology</option>
<option value="Paediatrics">Paediatrics</option>
<option value="Radiology">Radiology</option>
<option value="Medical Microbiology">Medical Microbiology</option>
<option value="Anatomy">Anatomy</option>
<option value="Physiology">Physiology</option>
</select>
</span>
<span ng-show="tfaculty == 'Agriculture'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Agric Economics">Agric Economics and Extension</option>
<option value="Crop Science">Crop Science and Horticulture</option>
<option value="Animal Science">Animal Science</option>
<option value="Forestry">Forestry and Widelife</option>
<option value="Fisheries">Fisheries and Aquaculture</option>
<option value="Food Science">Food Science and Technology</option>
<option value="Soil Science">Soil Science and Land Resources</option>
</select>
</span>
Php code below:
if (isset($_POST['search'])) { //narrowing d search by department
$department = $_POST['department'];
echo $department;}
my registration form captcha failed to stop when wrong captcha submitted
it is php register.php page
<?php require_once 'config.php'; ?>
<?php
if(!empty($_POST)){
try {
$user_obj = new Cl_User();
$data = $user_obj->registration( $_POST );
if($data)$success = USER_REGISTRATION_SUCCESS;
} catch (Exception $e) {
$error = $e->getMessage();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Registration Form</title>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<?php require_once 'templates/header_content.php';?><br/>
<?php require_once 'templates/left_content.php';?>
<div class="col-sm-6 center-content" >
<div class="login-form">
<?php require_once 'templates/message.php';?>
<div class="form-header">
<i class="fa fa-user"> Register</i>
</div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-register" role="form" id="register-form">
<div>
<input name="name" id="name" type="text" class="form-control" placeholder="User name">
<span class="help-block"></span>
</div>
<div>
<input name="email" id="email" type="email" class="form-control" placeholder="Email address" >
<span class="help-block"></span>
</div>
<div>
<input name="password" id="password" type="password" class="form-control" placeholder="Password">
<span class="help-block"></span>
</div>
<div>
<input name="confirm_password" id="confirm_password" type="password" class="form-control" placeholder="Confirm Password">
<span class="help-block"></span>
</div>
<div>
<select class="form-control">
<option value="Select">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<span class="help-block"></span>
</div>
<div>
<td id="imgparent">
<div id="imgdiv">
<img id="img" src="captcha.php">
</div>
<img id="reload" src="images/reload.png">
<input id="captcha1" name="captcha" type="text" class="form-control" placeholder="Enter captcha">
</td>
</tr>
<span class="help-block"></span>
</div>
<button class="btn btn-block bt-login" id="button" type="submit">Sign Up</button>
<h4 class="text-center login-txt-center">Alternatively, you can log in using:</h4>
<a class="btn btn-default facebook_rnd" href="login.php?type=facebook"> <i class="fa fa-facebook modal-icons-rnd"></i> </a>
<a class="btn btn-default google_rnd" href="login.php?type=google"> <i class="fa fa-google-plus modal-icons-rnd"></i> </a>
</form>
<div class="form-footer">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-lock"></i>
Forgot password?
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<i class="fa fa-check"></i>
Sign In
</div>
</div>
</div>
</div>
</div>
<?php require_once 'templates/right_content.php';?>
</div>
<!-- /container -->
<script src="js/script.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/register.js"></script>
</body>
</html>
and my register.js with out captcha
$(document).ready(function(){
$("#register-form").validate({
submitHandler : function(e) {
$(form).submit();
},
rules : {
name : {
required : true
},
email : {
required : true,
email: true,
remote: {
url: "check-email.php",
type: "post",
data: {
email: function() {
return $( "#email" ).val();
}
}
}
},
password : {
required : true
},
confirm_password : {
required : true,
equalTo: "#password"
}
},
messages : {
name : {
required : "Please enter name"
},
email : {
required : "Please enter email",
remote : "Email already exists"
},
password : {
required : "Please enter password"
},
confirm_password : {
required : "Please enter confirm password",
equalTo: "Password and confirm password doesn't match"
}
},
errorPlacement : function(error, element) {
$(element).closest('div').find('.help-block').html(error.html());
},
highlight : function(element) {
$(element).closest('div').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('div').removeClass('has-error').addClass('has-success');
$(element).closest('div').find('.help-block').html('');
}
});
});
only captcha js file script.js
// JavaScript Document
$(document).ready(function() {
// Change CAPTCHA on each click or on refreshing page.
$("#reload").click(function() {
$("#img").remove();
$('<img id="img" src="captcha.php" />').appendTo("#imgdiv");
});
// Validation Function
$('#button').click(function() {
var captcha = $("#captcha1").val();
if ( captcha == '') {
} else {
// Validating CAPTCHA with user input text.
var dataString = 'captcha=' + captcha;
$.ajax({
type: "POST",
url: "verify.php",
data: dataString,
success: function(html) {
alert(html);
if(html='Wrong TEXT Entered'){
preventDefault();}else{
}
}
});
}
});
});
and fanally varify.php for captcha
<?php
//CAPTCHA Matching code
session_start();
if ($_SESSION["code"] == $_POST["captcha"]) {
echo "Form Submitted successfully....!";
} else {
die("Wrong TEXT Entered");
}
?>
here all filed validations are done fine with out captcha , when i entered wrong capcha also it submitting form
why ??
help me
You need not to use ajax for verifying captcha.because session value would not get on verify.php.You have to check captcha value on submitting form.