I am using bootstrap for building a new website and I have a registration form inside a modal! Here is the code of my modal/registration form:
<!-- BEGIN # MODAL REGISTRATION -->
<div class="modal fade" id="registration-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<div class="icon-wrapper"> <i class="fa fa-anchor fa-4x"></i> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div class="icon-wrapper"> <i class="fa fa-close"></i> </div>
</button><br>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Registration Form -->
<form method="post" action="register.php" id="registration-form" class="form-horizontal">
<div class="col-sm-12">
<p>Willkommen zur Registrierung</p><br>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Schule:</label>
<div class="col-sm-10">
<select class="form-control" name="schule" id="schule" data-conditional="schule">
<option value="no_selected" checked>Bitte auswählen</option>
<option value="AHS Waldschule 1">AHS Waldschule 1</option>
<option value="AHS Waldschule 2">AHS Waldschule 2</option>
<option value="AHS Waldschule 3">AHS Waldschule 3</option>
</select>
</div>
</div>
<div class="form-group">
<div class="hide conditional-logic" data-condition="schule" data-match="AHS Waldschule 1">
<div class="form-group">
<label for="inputKlasse" class="col-sm-2 control-label">Klasse:</label>
<div class="col-sm-10">
<select class="form-control" name="klasse">
<option>1A</option>
<option>1B</option>
<option>1C</option>
<option>1D</option>
<option>2A</option>
<option>2B</option>
<option>2C</option>
<option>2D</option>
</select>
</div>
</div>
</div>
<div class="hide conditional-logic" data-condition="schule" data-match="AHS Waldschule 2">
<div class="form-group">
<label for="inputKlasse" class="col-sm-2 control-label">Klasse:</label>
<div class="col-sm-10">
<select class="form-control" name="klasse">
<option>3A</option>
<option>3B</option>
<option>3C</option>
<option>3D</option>
<option>4A</option>
<option>4B</option>
<option>4C</option>
<option>4D</option>
</select>
</div>
</div>
</div>
<div class="hide conditional-logic" data-condition="schule" data-match="AHS Waldschule 3">
<div class="form-group">
<label for="inputKlasse" class="col-sm-2 control-label">Klasse:</label>
<div class="col-sm-10">
<select class="form-control" name="klasse">
<option>5A</option>
<option>5B</option>
<option>5C</option>
<option>5D</option>
<option>6A</option>
<option>6B</option>
<option>6C</option>
<option>6D</option>
</select>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Anrede:</label>
<div class="col-sm-10">
<select class="form-control" name="anrede">
<option>Herr</option>
<option>Frau</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputVorname" class="col-sm-2 control-label">Vorname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="vorname" placeholder="Ihr Vorname">
</div>
</div>
<div class="form-group">
<label for="inputNachname" class="col-sm-2 control-label">Nachname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nachname" placeholder="Ihr Nachname">
</div>
</div>
<div class="form-group">
<label for="inputStrasse" class="col-sm-2 control-label">Strasse:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="strasse" placeholder="Ihre Adresse">
</div>
</div>
<div class="form-group">
<label for="inputPLZ" class="col-sm-2 control-label">PLZ:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="plz" placeholder="Ihre Postleitzahl">
</div>
</div>
<div class="form-group">
<label for="inputOrt" class="col-sm-2 control-label">Ort:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ort" placeholder="Ihr Wohnort">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Ihre E-Mail Adresse">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" name="telefon" placeholder="Ihre Telefonnummer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<p>Text Text Text
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" name="submit" class="btn btn-warning btn-lg btn-block" value="Registrieren" />
</div>
</div>
</form>
<!-- End # Registration Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL REGISTRATION -->
I made form action="register.php" and my register.php looks like this:
<?php
include 'inc/database.php';
// Check if form is submitted
if (isset ($_POST['submit'])) {
$schule = mysqli_real_escape_string ($mysqli, $_POST['schule']);
$klasse = mysqli_real_escape_string ($mysqli, $_POST['klasse']);
$anrede = mysqli_real_escape_string ($mysqli, $_POST['anrede']);
$vorname = mysqli_real_escape_string ($mysqli, $_POST['vorname']);
$nachname = mysqli_real_escape_string ($mysqli, $_POST['nachname']);
$strasse = mysqli_real_escape_string ($mysqli, $_POST['strasse']);
$plz = mysqli_real_escape_string ($mysqli, $_POST['plz']);
$ort = mysqli_real_escape_string ($mysqli, $_POST['ort']);
$email = mysqli_real_escape_string ($mysqli, $_POST['email']);
$telefon = mysqli_real_escape_string ($mysqli, $_POST['telefon']);
// Set Timezone
date_default_timezone_set('Austria/Vienna');
$time = date('h:i:s a', time());
// Validate Input
if (!isset ($schule) || $schule == '' || !isset($klasse) || $klasse == '' || !isset($anrede) || $anrede == '' || !isset($vorname) || $vorname == '' || !isset($nachname) || $nachname == '' || !isset($strasse) || $strasse == '' || !isset($plz) || $plz == '' || !isset($ort) || $ort == '' || !isset($email) || $email == '' || !isset($telefon) || $telefon == '') {
$error = "Es müssen alle Felder ausgefüllt werden!";
header("Location: index.php?error=".urlencode($error));
exit();
} else {
$query = "INSERT INTO user (schule, klasse, anrede, firstname_parent, lastname_parent, street_parent, plz_parent, city_parent, email, phonenumber_parent, time)
VALUES ('$schule','$klasse', '$anrede', '$vorname', '$nachname', '$strasse', '$plz', '$ort', '$email', '$telefon','$time')";
if(!mysqli_query($mysqli, $query)) {
die ('Error!' .mysqli_error($mysqli));
} else {
header("Location: admin.php");
exit();
}
}
}
My problem is that absolutley nothing happens when I click on the "Register" button. Does anyone know what I am doing wrong? I looked for more than 3 hours now but I am unable to find the problem :(!
I hope that someone can help me.
Thanks in advance!
Chris
In the form group section just before the submit button section you haven't closed your 'p' tag. I think this may be stopping the submit button from working?
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<p>Text Text Text
</div>
</div>
Related
I have a jquery code like this:
let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
$('#' + item ).val($options[item] );
});
I want to fill all input value in the id from the $keys with data in the $options. but it doesn't work. but if I do it manually like this it works:
$("#title").val($options.title);
$("#type").val($options.type);
$("#location").val($options.location);
I'm sure that the problem is in the this code: $('#' + item ) i try so many things but seem it doesn't work. so is it any way i can fix this?
Here's my HTML:
<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
<input type="hidden" id="csrf" name="csrf_token">
<input type="hidden" name="id" id="id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Add Widget
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="title">
Widget Title *
</label>
<div class="col-lg-8">
<input id="title" name="title" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="type">
Type *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="type" name="type">
<option value="">Select Widget Type</option>
<option value="popular-post">Popular Post</option>
<option value="recent-post">Recent Post</option>
<option value="featured-post">Featured Post</option>
<option value="post-tabs">Post Tabs</option>
<option value="post-carousel">Post Carousel</option>
<option value="tags">Tags</option>
<option value="archive">Archive</option>
<option value="calender">Calendar</option>
<option value="blockquote">Blockquote</option>
<option value="mini-gallery">Mini Gallery</option>
<option value="list">List</option>
<option value="search">Search</option>
<option value="testimonials">Testimonial Carousel</option>
<option value="social-media">Social Media</option>
<option value="contact-us">Contact Us</option>
<option value="flickr">Flickr Feed</option>
<option value="instagram-feed">Instagram Feed</option>
<option value="recent-tweets">Recent Tweets</option>
<option value="video">Video</option>
</select>
</div>
</div>
<div id="post_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="post_number">
Number of Post
</label>
<div class="col-lg-8">
<input id="post_number" name="post_number" class="form-control" autofocus>
</div>
</div>
<div id="testimonial_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="testimonial_number">
Number of Testimonial
</label>
<div class="col-lg-8">
<input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
</div>
</div>
<div id="galleries_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="image_number">
Number of Image
</label>
<div class="col-lg-8">
<input id="image_number" name="image_number" class="form-control" autofocus>
</div>
</div>
<div id="video_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="video_url">
Video URL
</label>
<div class="col-lg-8">
<input id="video_url" name="video_url" class="form-control" autofocus>
</div>
</div>
<div id="blockquote_div">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_author">
Author
</label>
<div class="col-lg-8">
<input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_content">
Quote
</label>
<div class="col-lg-8">
<input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="location">
Location *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="location" name="location">
<option value="">Select Position</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="submit_button" type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</form>
</div>
</div>
and here's my full edit script:
$(document).on('click', 'a.edit', function (event) {
event.preventDefault();
let $id = $(this).closest('tr').data('id');
let url = "/admin/widgets/" + $id + "/edit";
$.post(url,{ id: $id, csrf_token: $csrf }).done(function (data) {
console.log(data.options);
let $options = JSON.parse(data.options);
var post = ["popular-post", "recent-post", "featured-post", "post-tabs","post-carousel"];
if (post.includes($options.type)){
post_div.show();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'testimonials'){
post_div.hide();
testimonial_div.show();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'mini-gallery'){
post_div.hide();
testimonial_div.hide();
galleries_div.show();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'video'){
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.show();
blockquote_div.hide();
}else if($options.type === 'blockquote'){
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.show();
}else{
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}
page_modal.modal("show");
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
console.log($('#' + item));
$('form [name="' + item +'"]').val($options[item] );
});
validator.resetForm();
$(".modal-title").text("Edit Widget");
page_modal.find("form")[0].reset();
$("#id").val(data.id);
$("#csrf").val($csrf);
submit_button.html("Update Widget");
});
});
Here's the screnshot that provided by console.log('item : ' + item); and console.log('$options[item] =' + $options[item] );
Just access them in jQuery using the name attribute of the form fields.
Assuming each option keyname is the same as the form field name of course.
By using brackets [] and then the attribute name and optionally an attribute value you can target specific elements with specific values.
For more reading choose: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+function() {
let data = {
options : '{"title":"Posts Tab","type":"post-tabs","post_number":"2","location":"right"}'
};
let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
$('form [name="' + item +'"]').val($options[item] );
})
}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
<input type="hidden" id="csrf" name="csrf_token">
<input type="hidden" name="id" id="id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Add Widget
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="title">
Widget Title *
</label>
<div class="col-lg-8">
<input id="title" name="title" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="type">
Type *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="type" name="type">
<option value="">Select Widget Type</option>
<option value="popular-post">Popular Post</option>
<option value="recent-post">Recent Post</option>
<option value="featured-post">Featured Post</option>
<option value="post-tabs">Post Tabs</option>
<option value="post-carousel">Post Carousel</option>
<option value="tags">Tags</option>
<option value="archive">Archive</option>
<option value="calender">Calendar</option>
<option value="blockquote">Blockquote</option>
<option value="mini-gallery">Mini Gallery</option>
<option value="list">List</option>
<option value="search">Search</option>
<option value="testimonials">Testimonial Carousel</option>
<option value="social-media">Social Media</option>
<option value="contact-us">Contact Us</option>
<option value="flickr">Flickr Feed</option>
<option value="instagram-feed">Instagram Feed</option>
<option value="recent-tweets">Recent Tweets</option>
<option value="video">Video</option>
</select>
</div>
</div>
<div id="post_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="post_number">
Number of Post
</label>
<div class="col-lg-8">
<input id="post_number" name="post_number" class="form-control" autofocus>
</div>
</div>
<div id="testimonial_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="testimonial_number">
Number of Testimonial
</label>
<div class="col-lg-8">
<input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
</div>
</div>
<div id="galleries_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="image_number">
Number of Image
</label>
<div class="col-lg-8">
<input id="image_number" name="image_number" class="form-control" autofocus>
</div>
</div>
<div id="video_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="video_url">
Video URL
</label>
<div class="col-lg-8">
<input id="video_url" name="video_url" class="form-control" autofocus>
</div>
</div>
<div id="blockquote_div">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_author">
Author
</label>
<div class="col-lg-8">
<input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_content">
Quote
</label>
<div class="col-lg-8">
<input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="location">
Location *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="location" name="location">
<option value="">Select Position</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="submit_button" type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</form>
</div>
</div>
I'm writing an app that allows my wife to add her recipes to a database i have set up. I have a form set up with both text and a file input for an image. It works fine and she can upload text and image to the database. Now, I'm trying to add a feature so that she can edit it. It's the same exact form only the data goes to a different PHP file for processing. When she clicks the "Edit" button it populates all the text inputs with the data pulled from the server and she can edit. She can also add a new photo if she wishes. Despite the fact that it's the same form, it will not upload the image. The text uploads fine, but the $_POST['recipeImage'] is always empty when I look at the object being sent to the server (recipeImage: "");
I am baffled and cannot see why this isn't working. Here is the code:
HTML FORM (IMAGE UPLOAD IS A BOTTOM):
<div id="editRecipeModal">
<div class="col-md-8">
<div class="card">
<form action="../PHP/modify_recipe.php" method="POST" role="form" class="form-horizontal" enctype="multipart/form-data" id="editRecipeForm" name="editRecipeForm">
<input class="form-control" type="hidden" value="" id="creatorIdEdit" name="creatorId">
<input class="form-control" type="hidden" value="" id="recipeIdEdit" name="recipeId" value="">
<div class="card-header card-header-text" data-background-color="purple">
<h4 class="card-title"><i class="far fa-edit"></i> Edit Recipe</h4>
</div>
<div class="card-content"
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Name</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" name="name" maxlength="150" id="editRecipeName" required>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Prep Time</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="prepTime" id="editPrepTime" required>
<span class="help-block">Numbers Only. In minutes... ie: 120 Minutes</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Servings</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="servings" id="editServings" required>
<span class="help-block">Numbers Only...</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Calories</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="calories" id="editCalories" required>
<span class="help-block">Numbers Only</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Brief Description</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="description" id="editBriefDescription" rows="5" required></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<label class="col-sm-2 label-on-left">Ingredients</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="ingredients" id="editPasteIngredientsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Steps</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="directions" id="editPasteStepsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Search Tags</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" id="editTags" name="tags" required>
</div>
</div>
</div><br> <br> <br> <br>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" data-style="btn btn-primary btn-round" title="vegOrVegan" data-size="7" id="vegOrVeganEditSelect">
<option disabled selected>Dietary Restrictions</option>
<option value="" name="">None</option>
<option value="T" name="T">Vegetarian</option>
<option value="VG" name="VG">Vegan</option>
</select>
<input type="hidden" id="vegOrVeganEdit" name="vegOrVegan">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="suggestedPairingEditSelect" data-style="btn btn-primary btn-round" title="Suggested Pairing" data-size="7">
<option disabled selected>Suggested Pairing</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="RW" name="RW">Red Wine</option>
</select>
<input type="hidden" id="suggestedPairingEdit" name="suggestedPairing" value="">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="" data-style="btn btn-primary btn-round" title="Some Other Attributes" data-size="7">
<option disabled selected>Some Other Attributes</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="WW" name="WW">Red Wine</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;">
</div>
</div>
<div class="row" style="width: 80%; margin: 0 auto;">
<div class="col-sm-4"></div>
<div class="col-sm-4" style="text-align: center;">
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail">
<img src="../assets/img/placeholder.jpg" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"></div>
<div>
<span class="btn btn-rose btn-round btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="recipeImage" id="recipeImageEdit" />
</span>
<i class="fa fa-times"></i> Remove
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br><br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4" style=" text-align: center; margin: 0; padding: 0;"><button class="btn btn-primary btn-lg modRecButton" type="submit" id="submitRecipe">Submit Changes</button></div>
<div class="col-sm-4 closePanel" style="text-align: center; margin: 0; padding: 0;" id="closePanel"><button type="button" class="btn btn-default btn-lg">Cancel Changes</button>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</form>
</div>
</div>
</div>
AJAX CODE
$(document).ready(function(e) {
$("#editRecipeForm").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "../PHP/modify_recipe.php",
type: "POST",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function(response) {
let parsedResponse = JSON.parse(response);
let newObject = parsedResponse[0]
if (parsedResponse == 'notModified') {
showErrorModal();
}else{
reBuildAfterObjectChange(newObject.recipeId, parsedResponse);
}
},
error: function() {
showErrorModal();
}
});
}));
});
PHP CODE
<?php
include 'db_operations.php';
if(isset($_POST['name'])&& isset($_POST['description']) && isset($_POST['ingredients'])&& isset($_POST['directions']) && isset($_POST['suggestedPairing']) && isset($_POST['prepTime']) && isset($_POST['servings']) && isset($_POST['calories']) && isset($_POST['vegOrVegan']) && isset($_POST['recipeId']) && isset($_POST['creatorId']))
{
$result = '';
$name = $_POST['name'];
$description = $_POST['description'];
$ingredients = $_POST['ingredients'];
$ingredients = str_replace(';', '-', $ingredients);
$ingredients = str_replace('\n', ';', $ingredients);
$directions = $_POST['directions'];
$directions = str_replace(';', '-', $directions);
$directions = str_replace('\n', ';', $directions);
$suggestedPairing = $_POST['suggestedPairing'];
$prepTime = $_POST['prepTime'];
$servings = $_POST['servings'];
$calories = $_POST['calories'];
$vegOrVegan = $_POST['vegOrVegan'];
$recipeId = $_POST['recipeId'];
$creatorId = $_POST['creatorId'];
$tags = $_POST['tags'];
$time=time();
$lastModified = (date("Y-m-d H:i:s", $time));
modifyRecipe_recipes($name, $description, $ingredients, $directions, $suggestedPairing, $prepTime, $servings, $calories, $vegOrVegan, $lastModified, $creatorId, $recipeId, $tags);
}
if(isset($_POST['recipeImage'])){
$size = $_FILES['recipeImage']['size'];
if($size > 0){
$tmp_dir = $_FILES["recipeImage"]["tmp_name"];
$tmpImg = $_FILES['recipeImage']['name'];
$ext = strtolower(pathinfo($tmpImg, PATHINFO_EXTENSION));
$recipeImage = rand(10000, 10000000).".".$ext;
move_uploaded_file($tmp_dir, "../userRecipeImages/".$recipeImage);
$sql = 'UPDATE recipes SET recipeImage = :recipeImage WHERE creatorId = :creatorId AND recipeId= :recipeId';
$stmt = $conn->prepare($sql);
$stmt->bindParam(':creatorId', $creatorId, PDO::PARAM_STR);
$stmt->bindParam(':recipeImage', $recipeImage, PDO::PARAM_STR);
$stmt->bindParam(':recipeId', $recipeId, PDO::PARAM_STR);
$stmt->execute();
}
}
$modifiedRecipeDate = getLastModified_recipes($lastModified, $creatorId);
if ($modifiedRecipeDate === $lastModified) {
$newObject = getSingleRecipeById_recipes($recipeId, $creatorId);
echo json_encode($newObject);
}
else {
$result = "notModified";
echo json_encode($result);
}
?>
You obviously forgot to change $_POST['recipeImage'] to $_FILES['recipeImage']
Files are contained in the $_FILES global variable not $_POST
Change this
if(isset($_POST['recipeImage'])){
to
if(isset($_FILES['recipeImage'])){
Here i did form validation ,after form validation all fields filled and click the INVITE QUOTES button means i want show modal, and i want to fill the modal form after filled all field means i want to close that modal,but dont want to refresh the page,Here i click INVITE QUOTES button means page is refreshing and modal is not showing how can do this?
<script>
/*$('#businessForm').submit(function (e) {
e.preventDefault();
validateForm();
});*/
function validateForm() {
var ratesfor = document.forms["myForm"]["ratesfor"].value;
if (ratesfor == null || ratesfor == "") {
document.getElementById("rate_err").innerHTML = "Field is empty";
}
var no = document.forms["myForm"]["no"].value;
if (no == null || no == "") {
document.getElementById("no_err").innerHTML = "Field is empty";
}
var breath = document.forms["myForm"]["breath"].value;
if (breath == null || breath == "") {
document.getElementById("b_t_err").innerHTML = "Field is empty";
}
var height = document.forms["myForm"]["height"].value;
if (height == null || height == "") {
document.getElementById("height_err").innerHTML = "Field is empty";
}
var truck_type = document.forms["myForm"]["truck_type"].value;
if (truck_type == null || truck_type == "") {
document.getElementById("truck_type_err").innerHTML = "Field is empty";
}
var datepicker = document.forms["myForm"]["datepicker-13"].value;
if (datepicker == null || datepicker == "") {
document.getElementById("pickup_err").innerHTML = "Field is empty";
}
var myTime = document.forms["myForm"]["myTime"].value;
if (myTime == null || myTime == "") {
document.getElementById("time_err").innerHTML = "Field is empty";
}
var from = document.forms["myForm"]["from"].value;
if (from == null || from == "") {
document.getElementById("from_err").innerHTML = "Field is empty";
}
var to = document.forms["myForm"]["to"].value;
if (to == null || to == "") {
document.getElementById("to_err").innerHTML = "Field is empty";
return false;
}
else{
$('#businessForm').submit(function (e) {
e.preventDefault();
})
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
}
}
</script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#Register").click(function(){
$("#myModal").hide();
$("#myModal_Register").modal();
});
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Rates For</label>
<input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
<span id="rate_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="length">Length</label>
<input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="length"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="breadth">Breadth</label>
<input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="breadth"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="height">Height</label>
<input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="height"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Type Of Truck</label>
<select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
<option value="feet">feet</option>
<option value="mm">mm</option>
<option value="mtr">mtr</option>
</select><span id="truck_type_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="date">Date of PickUp</label>
<br>
<input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
<span id="pickup_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="time">Time of PickUp</label>
<br>
<input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
<span id="time_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="experience">Destination</label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
<option value="">From</option>
<option value="1">Ahmedabad</option>
<option value="2">Bangalore</option>
</select>
</div>
<span id="from_err"></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="experience"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
<option value="">To</option>
<option value="1">Guragon</option>
<option value="2">Hyderabad</option>
</select>
</div>
<span id="to_err"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
</div>
</div>
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
<div class="modal-footer">
<p>Not a member? <b>Sign Up</b>
</p>
<!--<p>Forgot Password?</p>-->
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
<!--#####
Register From Start
#####--->
<div class="modal fade" id="myModal_Register" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Registration</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Confirm Password</label>
<input type="text" class="form-control" id="psw" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-info btn-block">Submit</button>
</form>
</div>
<!-- <div class="modal-footer">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>-->
</div>
</div>
</div>
</div>
Bro check this line:
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
here you are using button type submit, submit button will submit the form and reloads the page. Instead use:
<button type="button" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
I'm trying to modify a Form which has field and value into another with two columns, something like this.
Now I have:
HEADER 1
FIELD 1: VALUE
FIELD 2: VALUE
FIELD 3: VALUE
HEADER 2
FIELD 4: VALUE
FIELD 5: VALUE
FIELD 6: VALUE
And I tried to do this:
HEADER 1 HEADER 2
FIELD 1: VALUE FIELD 4: VALUE
FIELD 2: VALUE FIELD 5: VALUE
FIELD 3: VALUE FIELD 6: VALUE
Here is my code:
<div class="row">
<div class="col-lg-6 col-md-6">
<div> <h3> Datos Personales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">DNI</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->usi_dni?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Apellido y Nombre</label>
<div class="col-md-8"><input class="form-control input-sm" name="apynom" value='<?=$beca->usi_nombre?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Legajo</label>
<div class="col-md-8"><input class="form-control input-sm" name="legajo" value='<?=$beca->usi_legajo?>'></div>
</div>
<div> <h3> Datos Laborales </h3><hr></div>
<div class="form-group">
<label class="control-label col-md-2">Fecha Ingreso PJCABA</label>
<div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->f_ingreso_caba?>'></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Fuero</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['fuero'] as $key=>$fuero)
<?php if( $fuero->fuero_id == $beca->fuero_id ){?>
<option value="{{$fuero->fuero_id}}" selected>{{$fuero->fuero_nombre}}</option>
<?php }else{?>
<option value="{{$fuero->fuero_id}}">{{$fuero->fuero_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Dependencia</label>
<div class="col-md-8">
<select class="form-control" name="car_id">
#foreach($helpers['cargos'] as $key=>$cargo)
<?php if( $cargo->car_id == $beca->cargo_id ){?>
<option value="{{$cargo->car_id}}" selected>{{$cargo->car_nombre}}</option>
<?php }else{?>
<option value="{{$cargo->car_id}}">{{$cargo->car_nombre}}</option>
<?php }?>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">Aceptar</button>
Cancel
</div>
</div>
</form>
</div>
Hope someone can help me.
Thanks!
If you're trying to set your form to have two sides you can nest your columns/rows to split it into parts. Docs
See working example (full page).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form id="theForm">
<div class="container">
<div class="row">
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Personales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">DNI</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Apellido y Nombre</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="apynom">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Legajo</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="legajo">
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<!-- START CONTAINER-->
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h3>Datos Laborales</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fecha Ingreso PJCABA</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<input class="form-control input-sm" name="dni">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Fuero</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Dependencia</label>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" name="car_id">
<option selected>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-default">Aceptar</button> Cancel
</div>
</div>
</div>
</div>
</form>
<hr>
I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function
This is the form:
<form class="form" id="formNewClient" role="form">
<ul class="nav nav-tabs">
<li class="active"><i class="fa fa-user"></i> Dados Cliente</li>
<li><i class="fa fa-phone"></i> Dados Phonepark</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="clientdata">
<div class="row">
<div class="col-md-12">
<div class="page-header"><h3>Dados Pessoais</h3></div>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="name">Nome Completo:*</label>
<input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="email">Email:</label>
<input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="addressone">Morada:</label>
<input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="address2">Morada (cont.):</label>
<input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
</div>
<div class="form-group col-md-3">
<label for="postalcode">Código Postal:</label>
<input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
</div>
<div class="form-group col-md-3">
<label for="city">Localidade:</label>
<input type="text" name="clientCity" class="form-control" placeholder="Localidade">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="clientNif">NIF</label>
<input type="text" name="clientNif" class="form-control " placeholder="NIF">
</div>
<div class="form-group col-md-4">
<label for="clientBirthdate">Data de Nascimento</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
<input type='text' name="clientBirthdate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-4">
<label for="sex">Sexo:</label>
<br>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="M">
Masculino
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="F">
Feminino
</label>
</div>
</div>
</div>
<!--END CLIENTDATA-->
<div class="tab-pane" id="phoneparkdata">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Dados Phonepark</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Documentos:</h4></div>
<div class="form-group col-md-4">
<label for="document">Tipo de Documento:</label>
<select name="documenttype" class="form-control">
<?php selectListDocuments();?>
</select>
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento:*</label>
<input type="text" name="documentNumber" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento (Secundário):</label>
<input type="text" name="documentNumberSec" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Comunicações:</h4></div>
<div class="form-group col-md-4">
<label for="phone1">Telemóvel:*</label>
<input type="text" name="clientPhonePri" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="phone2">Telemóvel Secundário:</label>
<input type="text" name="clientPhoneSec" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<h4>Perfil:</h4>
<label for="profile">Perfil(s) a utilizar:*</label>
<?php
profileCheckBoxes();
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="activationDate">Data de Activação:</label>
<div class="form-group">
<div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientActivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="limitDate">Data de Limite:</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientDeactivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
</div>
</div>
<!--END PHONEPARKDATA-->
</div>
<!--END TAB-CONTENT-->
<div class="row">
<div class="col-md-4 col-lg-4 pull-right">
<button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
</div>
</div>
</form>
And this is the php function that generates the checkboxes:
function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
while($row = mysqli_fetch_array($listProfiles)){
?>
<label class="checkbox-inline">
<input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
<?php echo $row['Nome']; ?>
</label>
<?php
}
}
}
How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?
This jQuery documentation page explains how to use the serialize function:
http://api.jquery.com/serialize/
If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:
foreach ($_POST['profiles'] as $profile) {
//process code here
}
jQuery's form.serialize only pass checksboxes that are checked.
if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.
I would also change the checkboxes name to "profiles"