I want to generate Jquery select 2 when clicking a plus button. see below screenshot
the append functionality and removing rows are working perfectly from side.
I am initializing a div with display none for appending HTML.
like below,,,
<div class="newbrndsrs" style="display:none">
<div class="row">
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
<div class="col-lg-8 col-sm-8 prepend-icon">
<select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
<option value=""></option>
<?php
while($row9=mysql_fetch_assoc($brandfetchAjax)){ ?>
<option value="<?php echo $row9['ID'];?>"><?php echo $row9['BrandName'];?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
<div class="col-lg-8 col-sm-8">
<select name="brand[]" class="form-control form-white slctjpmodelname">
</select>
</div>
</div>
</div>
<span class="btn btn-primary addline"><i class="glyphicon glyphicon-minus"></i></span>
</div>
</div>
When Clicking the Button plus I am taking the above HTML and bind it to the bottom of the plus button.
<div class="row apndarea">
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
<div class="col-lg-8 col-sm-8 prepend-icon">
<select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
<option value=""></option>
<?php
while($row2=mysql_fetch_assoc($brandfetch)){ ?>
<option value="<?php echo $row2['ID'];?>"><?php echo $row2['BrandName'];?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
<div class="col-lg-8 col-sm-8">
<select name="brand[]" class="form-control form-white slctjpmodelname">
<option value="">Series </option>
<option value="">Series </option>
<option value="">Series </option>
</select>
</div>
</div>
</div>
<span class="btn btn-primary addline"><i class="glyphicon glyphicon-plus"></i></span>
</div>
Jquery....
$(".addline").click(function(){
var eqtype = $("select[name=EquipmentTypeID]").val();
if(eqtype == ""){
$("select[name=EquipmentTypeID]").next().show();
return false;
}else{
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
But New Dynamic Select2 Not working....
I cant make click on it...
What is the Issue ?
$(document).on('click',".addline", function(){
var eqtype = $("select[name=EquipmentTypeID]").val();
if(eqtype == ""){
$("select[name=EquipmentTypeID]").next().show();
return false;
}else{
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
Click is not binded to dynamically created object, use on
Use Event deligation
$(document).on('click', ".addline", function () {
var eqtype = $("select[name=EquipmentTypeID]").val();
if (eqtype == "") {
$("select[name=EquipmentTypeID]").next().show();
return false;
} else {
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
Related
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>
I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});
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'])){
I have this form and this is my layout:
I want when the user enters the quantity the total input = qty*price.
My view
<?php $form=array('id'=>'myform');?>
<?php echo form_open('Order/submit',$form);?>
<div class="panel panel-default">
<div class="panel-heading">Customer Details</div>
<div class="panel-body">
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name">
<?php foreach ($customerdata as $c):
echo "<option value ='$c->c_id'>" . $c->c_name . "</option>";
endforeach;
?>
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="invoice_number" placeholder="Invoice Number"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="branch" placeholder="Branch"/>
</div>
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term"">
<option value="cash">Cash</option>
<option value="bank">Bank</option>
<option value="other">Other</option>
</select>
</div>
</div><!--customer panel-Body-->
<div class="panel-heading">Invoice Details
</div>
<div class="panel-body">
<div id="education_fields">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option></option>
<?php
foreach($order as $row):
echo"<option data-price='$row->p_price' value ='$row->p_id'>".$row->p_name. "</option>";
endforeach;
?>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control qty" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control total" name="total[]" value="" placeholder="Total">
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div>
</div>
<button type="submit" class="btn btn-primary center-block">Checkout</button>
<?php echo form_close();?>
This is my first jQuery and that used to generate a new row by + button
<script>
var room = 0;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option></option><?php foreach($order as $row){ ?><option data-price="<?php echo$row->p_price;?>" value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control" name="total[]" placeholder="Total"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
divtest.innerHTML = medo;
objTo.appendChild(divtest);
$('select').selectpicker();
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
and this 2nd jQuery used to get product price from from drop-menu attributes and add that into price input.
<script>
function set_price( slc ) {
var price = slc.find(':selected').attr('data-price');
slc.parent().parent().next().next().find('.price').val(price);
}
$('#education_fields').on('change','select.selectpicker',function(){
set_price( $(this) );
});
</script>
var sample = $('#sample').html();
$('#sample').on('click', '.generate', function() {
$('#sample').append(sample);
});
$('#sample').on('change', 'select.selectpicker', function () {
// keyword this is your current select element
var select = $(this);
// each group of inputs share a common .form element, so use that to
// look up for closest parent .form, then down for input[name="price[]"]
// and set the input's value
select.closest('.form').find('[name^=price]').val(
select.find('option:selected').data('price')
// trigger input's keyup event (*)
).keyup();
});
// (*) note: input[type=text]'s onchange event triggers only after it loses focus; we'll use keyup event instead
// create onkeyup event on the qty and price fields
$('#sample').on('keyup', '[name^=qty], [name^=price]', function() {
// get related form
var form = $(this).closest('.form');
// get its related values
var qty = parseInt(form.find('[name^=qty]').val(), 10),
price = parseInt(form.find('[name^=price]').val(), 10);
// ensure only numbers are given
if (!isNaN(qty) && !isNaN(price)) {
// set the total
form.find('[name^=total]').val(qty * price);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">
<!-- group all related blocks into a div .form -->
<!-- it makes it easier to reference in your JS -->
<div class="form">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option data-price=200 value=1>tes1</option>
<option data-price=218 value=2>tes2</option>
<option data-price=80 value=3>tes3</option>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control " name="total[]" value="" placeholder="total" readonly>
</div>
</div>
</div>
<button class="generate" type="button">Generate New Form</button>
</div>
Note, that I am lazy instead of doing [name="price[]"], I simply did [name^=price].
Edit changed onchange to keyup.
I have a table named order_master which stores the order_id column. I also have another table order_details having the columns order_id (FK), vendor, purchase_date, delivery_date, and person_name which stores the details of the order corresponding to the order_id from the order_master table.
I want to display a form wherein a button add new item will be displayed. On clicking this button each time, a new block of fields (like vendor, purchase_date, delivery_date, person_name) will be displayed. The user can click the above button and enter as many items as he wants on the same order_id. And when he submits the form, the items on this form must be entered in the database.
How to achieve this?
actually i am using codeigniter framework (MVC architecture). Here i am attaching the view and js file.
<?php echo form_open(); ?>
<div id="emp"></div>
<div class="box">
<div>
</div>
<div class="col-lg-12" style="padding-top: 2%;margin-bottom: 3%" id="form-box">
<div class="col-lg-6 form-group">
<select name="item[]" id="item" class="form-control">
<option value="">--Select Item--</option>
<?php foreach ($items as $item) { ?>
<option value="<?php echo $item["id"]; ?>"><?php echo $item["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 form-group">
<select name="vendor[]" id="vendor" class="form-control">
<option value="">--Select Vendor--</option>
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor["id"]; ?>"><?php echo $vendor["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-4 form-group">
<input type="text" name="po_date[]" id="po_date" class="form-control date" placeholder="Purchase Date">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="quantity[]" id="quantity" class="form-control number" placeholder="Item Quantity Individual">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="unit_price[]" id="unit_price" class="form-control number" placeholder="Unit Price" style="text-align: left;">
</div>
<div class="col-lg-4 form-group">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<textarea name="description[]" id="description" class="form-control"></textarea>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="height: 3px;background-color: grey"></div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group" id="messageBox">
</div>
</div>
</div>
<a id="add_item" class="col-lg-12" href="">Add new item</a>
<div class="col-lg-12 col-md-12 col-sm-12 text-center form-group">
<input type="button" value="Add Purchase Order" id="addpurchaseOrderBtn" class="btn btn-primary">
</div>
<?php echo form_close(); ?>
**JS File**
$("#main_content").css('minHeight', '400px');
$(document).ready(function() {
$('#add_item').click(function() {
var def_ht = $("#main_content").height() + 300;
$("#main_content").css('minHeight', def_ht);
$("#form-box").clone(true).appendTo("#form-box");
return false;
});
$("#addpurchaseOrderBtn").click(function() {
focusId = null;
var isvalid = false;
if(validateDropDown('item')){
isvalid = true;
}
if(validateDropDown('vendor')){
isvalid = true;
}
if(validatDate('po_date')){
isvalid = true;
}
if(validateTextbox('quantity')){
isvalid = true;
}
if(validateTextbox('unit_price')){
isvalid = true;
}
if(validateTextbox('description')){
isvalid = true;
}
if(isvalid){
focusId.focus();
$("#messageBox").html('<div class="alert alert-danger">There are some error in your submission. Please try again.</div>');
}else{
$("#addPurchaseFrm").submit();
}
});
});
This code works but i am unable to validate all the elements(items) in the form.
You can try the following structure-
<form name="addItem" method="post" action="addItem.php" class="insertItem">
<div class="itemAdd">
<input type="text" name="vendor" >
<input type="text" name="purchase_date" >
<input type="text" name="delivery_date" >
<input type="text" name="person_name" >
</div>
<input type="submit" name="submit" value="Add Item" class="btn btn-primary additem">
$("document").ready(function(){
$(".additem").click(function(){
$(".insertItem").append($(".itemAdd").html);
});
});
Then on addItem.php, you can execute the insert query to insert this data into your database