Develop Reference

When I select the options from the dropdown the button should be triggered automatically and produce the unique Id

I have a drop down and when I select one option from the dropdown the button has to be triggered automatically and it produces some unique id. I am not sure how the trigger can happen when we select the value from the dropdwon.
I have refered this link
Auto trigger click on a button when selecting from dropdown list
but its not working and its not showing any error. I can see that its not going inside the button click function. can someone help me how to do the auto click when we select the dropdown option?
I am attacching the code here
<div id="dialog-form" title="Send Email Invite">
<form>
<fieldset>
<label for="select1">Round Level</label>
<div class="col-md-4">
<select name="select1" class="form-control" id="select1" style="width:200px; height:30px;" required>
<option value="">Select the below option</option>
{% for each_round in round_names %}
<option value="{{each_round.round_id,each_round.round_name}}">{{each_round.round_name}}</option>
{% endfor %}
</select>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">Please fill out this field</div>
<div class="col-md-4" id="generateButton" style="display:none;" required>
<input id="generateUrl" value="generate url" size="40%" readonly />
<input type="button" class="btn btn-info" value="Generate URL" id="urlbutton"></input>
</div>
<div id="result">
<textarea name="rdesc" id="rdesc" style="width:200px; height:300px; display:none;"
required></textarea>
</div>
</div>
<script>
$("#select1").on('change', function () {
$("[name='select1']:submit").trigger("#urlbutton")
var dropdownValue = document.getElementById("select1");
var roundName = dropdownValue.options[dropdownValue.selectedIndex].value;
$.ajax({
type: 'POST',
url: 'blah',
data: {
'blah': blah
},
success: function (results) {
$("#rdesc").show();
$("#rdesc").text(results.round_description);
}
})
})
</script>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<script>
$("#urlbutton").click(function () {
console.log("i am coming here");
$.ajax({
type: 'POST',
url: 'blah',
data: {
'blah':blah
},
success: function (data) {
var url_textbox = document.getElementById("generateUrl");
url_textbox.setAttribute('value', data.url);
}
})
})
</script>

You can click the button programmatically like this.
On your select change click the button.
("#urlbutton").click()

Laravel Dropzone without class form Invalid element

i am trying to make a multiple upload with dropzone on laravel and i take a look on documentation of dropzone.
The example must be using form and give class dropzone , here my case i want to use dropzone and others text field
and got error Uncaught Error: Invalid dropzone element. here is the screenshot : error screenshot
here is my html code :
<form method="POST" action="/backend/blog" enctype="multipart/form-data" id="formku">
<div class="form-group label-floating">
<label class="control-label">Title</label>
<input type="text" name="title" class="form-control">
</div>
<div class="form-group label-floating">
<label class="control-label">Written By</label>
<input type="text" name="written_by" class="form-control">
</div>
<div class="form-group" id="place_image" style="display: none;">
<img src="" id="image_category" style="width: 95px;height: 50px;">
</div>
<div class="form-group">
<a class="btn btn-primary" id="btn_choose_image" onclick="$('#choose_image').click();">Choose Image</a>
<input style="display: none;" type="file" id="choose_image" name="image"></input>
</div>
<textarea id="bodyField" name="description"></textarea>
#ckeditor('bodyField', ['height' => 250])
<div class="form-group label-floating">
<div class="row">
<label class="control-label">Category</label>
<select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7" name="category">
<option disabled selected>Choose Category</option>
#foreach( $categories as $key => $category):
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach;
</select>
</div>
</div>
<div class="dropzone" id="imageUpload">
<h3>Upload Multiple Image By Click On Box</h3>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="status"> Status
</label>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="submit" class="btn btn-fill btn-rose" value="Submit">
</form>
and here is my JS code :
Dropzone.autoDiscover = false;
var imageUpload = new Dropzone("div#imageUpload", {
url: "dropzone/store",
autoProcessQueue:false,
uploadMultiple: true,
maxFilesize:5,
maxFiles:3,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
init: function() {
var submitButton = document.querySelector("#submit-all")
//imageUpload = this; // closure
submitButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
imageUpload.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
});
anyone have solution of this trouble ?

You could try to check if the imageUpload element is there first :
Dropzone.autoDiscover = false;
if (document.getElementById('imageUpload')) {
var imageUpload = new Dropzone("div#imageUpload", {
url: "dropzone/store",
autoProcessQueue:false,
uploadMultiple: true,
maxFilesize:5,
maxFiles:3,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
init: function() {
var submitButton = document.querySelector("#submit-all")
//imageUpload = this; // closure
submitButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
imageUpload.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
});
}

Select Option Doesn't Set on Button Click with jQuery

I've tried following a couple of answers with no success. I am trying to get the select box to go back to the "Please Select One Option" when the Add Exercise button is clicked. I got it to work in a simple scenario like this:
<div id="retro_add_exercises">
<div class="row">
<div class="input-field col s12">
<div class="select-wrapper initialized">
<select class="initialized" id="exercise_category">
<option value="0" disabled="" selected="">Please Select One</option>
<option value="1">Cardio</option>
<option value="2">Weight Lifting</option>
<option value="3">Stretching</option>
</select>
</div>
</div>
</div>
<!-- CARDIO SELECT FIELD -->
<div class="row" id="select_cardio">
<form method="POST" id="cardio_form">
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="add_exercise_from_cardio" type="submit" name="action" value="ADD">Add Exercise from cardio</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#add_exercise_from_cardio').click(function() {
$('#exercise_category').val('0').change();
});
});
</script>
But in my main project, it isn't working when I have the row show and hide on button click too. Any help would be appreciated.
$(document).ready(function() {
$('#retroactive_date_form').submit(function(e) {
e.preventDefault();
var date = $('#retroactive_date_picker');
var exercise_date = date.val();
if (exercise_date !== '') {
var exercise_category;
var weight_set_type;
console.log(exercise_date);
date.prop('disabled', true);
$('#retroactive_date_submit').addClass('disabled');
$('#retro_add_exercises').show();
//Exercise Category Function
$('#exercise_category').on('change', function() {
exercise_category = $('#exercise_category').val();
console.log(exercise_category);
if (this.value === '1')
{
$('#select_cardio').show();
$('#drop_or_reg_set_select_exercise').hide();
$('#super_set_select_exercises').hide();
$('#drop_and_regular_set_action_btn').hide();
$('#super_set_action_btn').hide();
$('#super_set_table_row').hide();
$('#drop_or_reg_set_table_row').hide();
}
else
$('#select_cardio').hide();
if (this.value === '2')
{
$('#select_weight').show()
}
else
$('#select_weight').hide();
if (this.value === '3')
{
$('#select_stretch_fields').show();
$('#select_cardio').hide();
$('#drop_or_reg_set_select_exercise').hide();
$('#super_set_select_exercises').hide();
$('#drop_and_regular_set_action_btn').hide();
$('#super_set_action_btn').hide();
$('#super_set_table_row').hide();
$('#select_weight').hide();
$('#drop_or_reg_set_table_row').hide();
}
else
$('#select_stretch_fields').hide();
return exercise_category;
});
///////////Cardio Training Functions///////////////
//Selecting Cardio Exercise
$('#cardio_exercise').on('change', function (e) {
var cardio_exercise;
cardio_exercise = $('#cardio_exercise').val();
console.log(cardio_exercise);
});
//Adding Another Exercise After Done Adding Current Cardio Exercise
$('#add_exercise_from_cardio').on('click', function(e) {
e.preventDefault();
$('#exercise_category option[value="0"]').attr('selected', true);
$('#select_cardio').hide();
$('#drop_or_reg_set_select_exercise').hide();
$('#super_set_select_exercises').hide();
$('#drop_and_regular_set_action_btn').hide();
$('#super_set_action_btn').hide();
$('#super_set_table_row').hide();
$('#drop_or_reg_set_table_row').hide();
});
//Error Handling If No Date is Selected Before Starting
else {
alert('Please select date')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="retro_add_exercises" style="display:none">
<div class="row">
<div class="input-field col s12">
<div class="select-wrapper initialized"><span class="caret">▼</span>
<select class="initialized" id="exercise_category">
<option value="0" disabled="" selected="">Please Select One</option>
<option value="1">Cardio</option>
<option value="2">Weight Lifting</option>
<option value="3">Stretching</option>
</select>
</div>
<label>Choose Exercise Type</label>
</div>
</div>
<!-- CARDIO SELECT FIELD -->
<div class="row" style="display:none" id="select_cardio">
<form method="POST" id="cardio_form">
<div class="input-field col s12">
<div class="select-wrapper initialized"><span class="caret">▼</span>
<select id="cardio_exercise" name="cardio_exercise" class="initialized">
<option value="0" disabled selected>Choose Cardio Exercise</option>
<option value="1">Jumping Jacks</option>
<option value="2">Jump Rope</option>
<option value="3">Precor</option>
<option value="4">Running (outside)</option>
<option value="5">Swimming</option>
<option value="6">Treadmill</option>
</select>
</div>
<input type="date" style="display:none" id="cardio_exercise_date" name="cardio_exercise_date">
<input placeholder="Duration (minutes)" name="cardio_duration" id="cardio_duration" type="number" class="validate">
<input placeholder="Distance (optional)" name="cardio_distance" id="cardio_distance" type="number" class="validate">
<button class="btn waves-effect waves-light" id="add_exercise_from_cardio" type="submit" name="action" value="ADD">Add Exercise</button>
<button class="btn waves-effect waves-light" id="finish_tracking" type="submit" name="action" value="FINISH">Finish Workout</button>
<label for="cardio_exercise">Choose Exercise</label>
</div>
</form>
</div>

The jQuery documentation dictates that since jQuery 1.6, attr will not update the dynamic state of a DOM element. In addition, it appears your select is disabled after being selected. Try:
$('#exercise_category option[value="0"]').prop('disabled', false);
$('#exercise_category option[value="0"]').prop('selected', true);

There is probably a better and more efficient way to solve it, but I figured it out. I wrapped the select option in form wrappers and gave the form an ID. Then on the button click I triggered reset of the form using
$('#button_id').on('click', function(e) {
e.preventDefault();
$('#form_id').trigger('reset');
});
Although I'm sure there is a better way, this method worked for me and hopefully it works for someone else too.

How to only validate a form when toggled

I have a form with bootstrap toggles for each day of the week. When toggled "yes", a div with two select boxes appears. When toggled "no", the div disappears. This is functioning perfectly, but I want to use JavaScript to validate the form.
However, if one or more of the days are toggled "no", I don't want to validate that section of the form.
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle("fast");
});
I have tried multiple suggestions from online mostly using :visible, but I still cant get it to work.
I'm still new to JavaScript.
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input name="everyday" name="mycheckbox" id="mycheckbox" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" value="0">
<div id="mycheckboxdiv" style="display:none">
<select class="btn btn-default" name="ed_from" id="ed_from" method="post">
<option disabled selected>From</option>
<?php for($i = 1; $i < 25; $i++): ?>
<option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
<?php endfor ?>
</select>
<select class="btn btn-default" name="ed_to" method="post">
<option disabled selected>Until</option>
<?php for($i = 1; $i < 25; $i++): ?>
<option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
<?php endfor ?>
</select>
<div><label class=" err2 err" id="ed_from_error">Please select your availability</label></div>
<br><br>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next">
</div>

There are many errors in the HTML. method="post" attribute not available for select DOM. Use <form method="POST"></form> element to submit your data. Here is the example but I not used the <form> tag.
HTML Code
<input name="everyday" id="mycheckbox" type="checkbox" value="1" >
<div id="mycheckboxdiv" style="display:none">
<select class="btn btn-default" name="ed_from" id="ed_from">
<option disabled selected value="">From</option>
<option value="1">1:00 AM</option>
</select>
<select class="btn btn-default" name="ed_to" id="ed_to">
<option disabled selected value="">Until</option>
<option value="1">1:00 AM</option>
</select>
<div><label class=" err2 err" id="ed_from_error">Please select your availability</label></div>
<br><br>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next">
</div>
jQuery Code
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle("fast");
});
$('#submit').click(function() {
if($('#mycheckbox').val()){
if($('#ed_from option:selected').val() == '' || $('#ed_to option:selected').val() == ''){
$('#ed_from_error').show();
}else
$('#ed_from_error').hide();
}
});
https://fiddle.jshell.net/LLayz0k3/
If you want to try with <form> tag
$( "#target" ).submit(function( event ) {
event.preventDefault();
// Add your validation here
....
....
});

You might try to use one of the solutions for checking for visibility from this question.
This is only if you are doing manual validation of some kind. If you are using some library you will need to provide more specifics if you need more help on how to unregister the validation when your submit is pressed.
Edit: More closely match posted snippet.
// unhide if checkbox is checked on page load (probably not needed)
if ($("#mycheckbox")[0].checked) {
$("#mycheckboxdiv").show("fast")
}
// toggle when checkbox changes
$("#mycheckbox").change(function() {
$("#mycheckboxdiv").toggle("fast");
});
// validation
$("#submit").click(function() {
if ($("#mycheckboxdiv").is(":visible")) { // jquery
//if ($("#mycheckboxdiv")[0].offsetParent != null) { // non jquery
// do validation here
if ($("#ed_to").val() == null || $("#ed_from").val() == null) {
$("#ed_from_error_1").show("fast");
return false;
} else {
$("#ed_from_error_1").hide("fast");
}
if ($("#ed_to").val() <= $("#ed_from").val()) {
$("#ed_from_error_2").show("fast");
return false;
} else {
$("#ed_from_error_2").hide("fast");
}
}
// alter just for snippet
alert("All good");
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input name="everyday" name="mycheckbox" id="mycheckbox" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" value="0">
<div id="mycheckboxdiv" style="display:none">
<select class="btn btn-default" name="ed_from" id="ed_from" method="post">
<option disabled selected>From</option>
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
</select>
<select class="btn btn-default" name="ed_to" id="ed_to" method="post">
<option disabled selected>Until</option>
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
</select>
<div>
<label class="err2 err" id="ed_from_error_1" style="display:none">Please select your availability</label>
<label class="err2 err" id="ed_from_error_2" style="display:none">Until must be later than from</label>
</div>
<br><br>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next">
</div>

Ok after plenty of research I've figured out what I was missing. A lot of the different JavaScript I was trying out was actually perfectly valid and would have worked fine however I discovered the underlying issue was actually with not initializing the bootstrap toggle before running any other JavaScript.
$('#mycheckbox').bootstrapToggle('off');
http://www.bootstraptoggle.com/
I now have a code that displays the selects and validates them when toggle is on, or hides and does not validate them when the toggle is off.
//initialize bootstrap.
$('#mycheckbox').bootstrapToggle('off');
//Show/Hide div when toggled.
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle("fast");
});
$(function availability(){
$('.err').hide();
$("#submit").click(function() {
//If toggle is checked:
if ($('#mycheckbox').prop("checked")){
//validate.
var ed_from = $("#ed_from").val();
if (ed_from == null) {
$("label#ed_from_error").show();
$("#ed_from").focus();
document.getElementById('ed_from').style.borderColor = "red";
return false;
}else{
if (ed_from != null) {
document.getElementById('ed_from').style.borderColor = "green";
}
}
}
});
});

jQuery incrementing a cloned elements instead of cloned div

I had this HTML script which contains a drop list and a text box, and I just need to clone those two instead of the whole div, and then send the data to AJAX, and each drop list with text box will form an array that should be add as a single row in a table, that's what I have now:
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
<div class="row clonedInput" id="clonedInput1">
<div class="col-sm-6 ">
<label for="diagnosis_data">Medication</label>
<fieldset class="form-group">
<select class="form-control select" name="diagnosis_data" id="diagnosis_data">
<option value="choose">Select</option>
</select>
</fieldset>
<!-- End class="col-sm-6" -->
</div>
<div class="col-sm-6">
<label for="medication_quantity">Quantity</label>
<fieldset class="form-group">
<input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
</fieldset>
<!-- End class="col-sm-6" -->
</div>
<!-- End class="col-sm-6" -->
</div>
<div class="actions pull-right">
<button class="btn btn-danger clone">Add More</button>
<button class="btn btn-danger remove">Remove</button>
</div>
<!-- End class="col-sm-4" -->
</div>
And here is the jQuery Script:
$(document).ready(function()
{
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
})
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;
function clone(){
$(this).closest(".rounded").clone()
.insertAfter(".rounded:last")
.attr("id", "rounded" + (cloneIndex+1))
.find("*")
.each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = id.split('-')[0] +'-'+(cloneIndex);
}
})
.on('click', 'button.clone', clone)
.on('click', 'button.remove', remove);
cloneIndex++;
}
function remove(){
$(this).parent().parent(".rounded").remove();
}
The problem is that the whole div is being cloned and just the div id is being changed:
Here is the id of each div is being incremented:
I need to clone the 2 elements only not the whole div and buttons
At the end I need t add them to database using Ajax and PHP

Here you can go with the code.
In this code i made changes in clone()
Here the changes
You first find existing child element.
Than clone that element and append it after last element
var cloneIndex = $(".clonedInput").length; this should be in clone() So it will pass proper incremented value of child element as id in your cloned html
the below code just only make clone of clonedInput not a whole div
Edit
I also edit remove function also.
It will only removes last element which was cloned.
Hope this will helps you. :)
$(document).ready(function()
{
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
});
var regex = /^(.+?)(\d+)$/i;
function clone() {
var cloneIndex = $(".clonedInput").length;
$(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" + (cloneIndex+1));
}
function remove() {
$(".rounded").find(".clonedInput:last").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
<div class="row clonedInput" id="clonedInput1">
<div class="col-sm-6 ">
<label for="diagnosis_data">Medication</label>
<fieldset class="form-group">
<select class="form-control select" name="diagnosis_data" id="diagnosis_data">
<option value="choose">Select</option>
</select>
</fieldset>
<!-- End class="col-sm-6" -->
</div>
<div class="col-sm-6">
<label for="medication_quantity">Quantity</label>
<fieldset class="form-group">
<input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
</fieldset>
<!-- End class="col-sm-6" -->
</div>
<!-- End class="col-sm-6" -->
</div>
<div class="actions pull-right">
<button class="btn btn-danger clone">Add More</button>
<button class="btn btn-danger remove">Remove</button>
</div>
<!-- End class="col-sm-4" -->
</div>

You can add style to your actions class to prevent it from showing on all cloned elements
css
.actions {
display: none;
}
.clonedInput:first-child .actions {
display: block;
}
Also for the removing function you could use .closest() instead of .parent().parent()
$(this).closest(".rounded").remove();

There are a lot of things that could be optimized and replaced but I've edited your code. I believe that this is the easiest way to learn.
The edits are marked as "STACKOVERFLOW EDIT" in the comments.
$(document).ready(function() {
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
$("button.submit").on("click", submit_form); // STACKOVERFLOW EDIT: execute the submit function
});
var regex = /^(.+?)(\d+)$/i;
function clone() {
var cloneIndex = $(".clonedInput").length;
$(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" + (cloneIndex + 1));
}
function remove() {
if($(".clonedInput").length > 1) { // STACKOVERFLOW EDIT: Make sure that you will not remove the first div (the one thet you clone)
$(".rounded").find(".clonedInput:last").remove();
} // STACKOVERFLOW EDIT
}
// STACKOVERFLOW EDIT: define the submit function to be able to sent the data
function submit_form() {
var ajax_data = $('#submit_form').serialize(); // The data of your form
$.ajax({
type: "POST",
url: 'path_to_your_script.php', // This URL should be accessable by web browser. It will proccess the form data and save it to the database.
data: ajax_data,
success: function(ajax_result){ // The result of your ajax request
alert(ajax_result); // Process the result the way you whant to
},
});
}
The HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
<form action="" method="post" id="submit_form"> <!-- STACKOVERFLOW EDIT: generate a form to allow you to get the data in easy way -->
<div class="row clonedInput" id="clonedInput1">
<div class="col-sm-6 ">
<label for="diagnosis_data">Medication</label>
<fieldset class="form-group">
<select class="form-control select" name="diagnosis_data[]" id="diagnosis_data"> <!-- STACKOVERFLOW EDIT: Add [] so that you may receive the values as arrays -->
<option value="choose">Select</option>
</select>
</fieldset>
<!-- End class="col-sm-6" -->
</div>
<div class="col-sm-6">
<label for="medication_quantity">Quantity</label>
<fieldset class="form-group">
<input type="number" class="form-control" name="medication_quantity[]" id="medication_quantity"> <!-- STACKOVERFLOW EDIT: Add [] so that you may receive the values as arrays -->
</fieldset>
<!-- End class="col-sm-6" -->
</div>
<!-- End class="col-sm-6" -->
</div>
</form> <!-- STACKOVERFLOW EDIT -->
<div class="actions pull-right">
<button class="btn btn-danger clone">Add More</button>
<button class="btn btn-danger remove">Remove</button>
<button class="btn btn-danger submit">Submit</button>
</div>
<!-- End class="col-sm-4" -->
</div>