Skip to content

Instantly share code, notes, and snippets.

@sudipto-me
Last active October 27, 2018 13:50
Show Gist options
  • Save sudipto-me/085e24cd359289874214cbdee455f906 to your computer and use it in GitHub Desktop.
Save sudipto-me/085e24cd359289874214cbdee455f906 to your computer and use it in GitHub Desktop.
This gist is for a dynamic add more section in js and php. Here I make a dynamic add more section using js and save this value in the database. With it I show the add more sections using php.
<div class="text-center">
<button class="btn btn-success add-more" type="button">Add More Images</button>
<!--This button will add a new section in the dom using js-->
</div>
//js part:
<script>
var $ =jQuery.noConflict();
$(document).ready(function(e){
var count = <?php echo $php_count; ?>;
$('.add-more').click(function(){
var html = '<div class="col-sm-4"><div class="form-input-field img_parent"><input type="hidden" class="img_hidden" name="competetor['+count+'][image]" value="<?php echo plugin_dir_url(__DIR__).'imageplaceholder.png'; ?>" /><div class="input_img"><span class="remove button button-large">X</span><img src="<?php echo plugin_dir_url(__DIR__).'imageplaceholder.png'; ?>" alt="Uploaded Image of Competetor" class="competetor_img img-responsive" style="height:350px; width:450px; object-fit:cover"></div><input type="button" class="btn btn-primary upload_image_src" name="" value="Upload Competetor Image"></div></div>';
$('#here').append(html);
count = count + 1;
return false;
});
$("body").on('click','.remove', function() {
console.log('hel');
$(this).parents('.col-sm-4').remove();
});
});
</script>
//php part:
<?php
$competetor_data = isset($_POST['competetor']) ? $_POST['competetor'] : array();
$php_count = 0;
if(is_array($competetor_data) && count($competetor_data) > 0) {
for($i = 0; $i < count($competetor_data); $i++){
printf('<div class="col-sm-4"><div class="form-input-field img_parent"><input type="hidden" class="img_hidden" name="competetor[%1$s][image]" value="%2$s" /><div class="input_img"><span class="remove button button-large">X</span><img src="%2$s" alt="Uploaded Image of Competetor" class="competetor_img img-responsive" style="height:350px; width:450px; object-fit:cover"></div><input type="button" class="btn btn-primary upload_image_src" name="" value="Upload Competetor Image"></div></div>',$php_count,$competetor_data[$i]['image']);
$php_count = $php_count + 1;
}
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment