Form structure issue in html - html

Question

Hi everyone just want you guys to check out and see what is wrong with my form tag. What I'm trying to do here is to submit values from 2 main divs, I'm using bootstrap.
This one doesn't work:
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
But when I do this
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
EDITED
I'm using ENTER button as submit. so if I click on the edit span the MODAL div would show and I can enter a value on the textbox of that div. after clicking the add button I put on what I want to search on the txtSearch of the input-group then press enter. The second form structure works but I want the value from the text box in the MODAL div to be submitted to. Does this make sense?

Answer 1

Check this .. i think this will help you ..
$(document).on('click','#add-qty-btn',function(){
var qty = $('#addtoQuantity').val();
var txtsearch = $('#txtSearch').val();
alert('TextSearch is: ' + txtsearch + ' - Quantity: ' + qty);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br /><br />
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" name="addtoQuantity" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button id="add-qty-btn" type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>

Answer 2

If you want the text box from modal to be included so put the end that of the form after the end of the modal div
Else if you want to remove it and you don't want to include it value so remove it on submit with this jquery function
$("form").submit(function() {
$(this).children('#your input id').remove();
});
With CSS give display none to the modal
Then with the button edit modal click event set the modal display to block