I have little knowledge with javascript but in view of the code I think I can understand it to do something I need, I perform maintenance on a project and they asked me for the following, in this image I place any data in the Product field, in this case "COCA" and I look for the results you get in real time.
I am looking for other products and when I select it it is disabled so that they do not overwrite it as seen in this image
What I need is to multiply the price value by the Quantity to Deliver field .
add an input that says Calculate total, so that the total of what you have selected is reflected there.
My question is how to do it or get the price value? What do you recommend to do it?
ANNEX JavaScript Code Where You Search for the Product through a WebService
function doneTypingSearch() {
$('.producto').autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api.TESTl.com.ve/Rest/PublicService.svc/FindProducts",
type: "POST", contentType: "application/json",
dataType: "json",
crossOrigin: true,
data: JSON.stringify({
Search: request.term,
ApiKey: "VS2015-VS2015",
Count: 100,
StartIndex: 0,
StoreId: "A001"
}),
success: function( data ) {
var res = data;
var availableTags = [];
for (var i = 0; i < data.Products.length; i++) {
var principio = data.Products[i].ActiveIngredient != "" ? " - " + data.Products[i].ActiveIngredient : "";
var precio = data.Products[i].LastFullPrice != 0 ? " Precio: "+ (data.Products[i].LastFullPrice).toFixed(2) : "";
var opt = data.Products[i].Description + principio + precio;
availableTags.push({ label: opt, id: data.Products[i].Id, indice: i });
}
response( availableTags );
},
});
},
minLength: 3,
select: function (event, ui) {
desbloquearGuardar();
var sapCode = ui.item.id;
$(this).prop("disabled", true);
$($(this).nextAll("input[type=hidden]")).val(sapCode || "");
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
}, function () {
}, 300);
}
ANNEX JavaScript code Where the product is positioned
function NuevaPosicion() {
var indice = parseInt($("input#indice").val());
var productoAnterior = $('input[data-id=' + indice + '].producto').val() != null ? $('input[data-id=' + indice + '].producto').val().trim() : "";
var cantidadAnterior = $('input[data-id=' + indice + '].cantidad').val() != null ? $('input[data-id=' + indice + '].cantidad').val().trim() : "0";
if (($('input[data-id=' + indice + '].cantidad').val() == null && $('input[data-id=' + indice + '].producto').val() == null) || (productoAnterior != "" && !isNaN(parseInt(cantidadAnterior)) && parseInt(cantidadAnterior) > 0)) {
indice = indice + 1;
$("input#indice").val(indice);
$("#tblPosicionesNueva").append('<tr>'+
//CAMPO PRODUCTO
'<td><input type="text" autocomplete="off" class="producto" placeholder="Nombre y Presentación" data-id="' + indice + '" required style="width: 100%" list="searchresults' + indice + '" /><datalist id="searchresults' + indice + '"></datalist><input type="hidden" data-id="' + indice + '" class="sap"></td> ' +
//CAMPO CANTIDAD POR ENTREGAR
'<td class="cssCenterTd"><input type="number" min="1" max="10" value="1" step="1"class="cantidad justNumbers" data-id="' + indice + '" required style="width: 50px" /><input type="hidden" class="idPosicionOrden" data-id="' + indice + '" value="-1"/></td> ' +
//CAMPO ELIMINAR
'<td class="cssCenterTd"><a id="eliminar' + indice + '" class="fa-stack fa-lg" href="javascript:EliminarPosicion(' + indice + ')" title="Eliminar"><i class="fa fa-circle fa-stack-2x fa-fondo"></i><i class="fa fa-trash fa-stack-1x fa-frente"></i></a></td></tr>');
$('input[data-id=' + indice + '].producto').focus();
$("#tblPosicionesNueva tbody tr input[type=number]").on('blur', function () {
NuevaPosicion();
});
$('input.justNumbers').keydown(function (evt) {
return validaTecla(evt);
});
}
$('input[required]').on('blur change keypress focus', function () {
desbloquearGuardar();
});
var desbloquear = true;
$('input[required]').each(function () {
if ($(this).val().trim() == "") {
desbloquear = false;
}
});
if ($("#tblPosicionesNueva tbody tr").length >= 1 && desbloquear)
$('#btnGuardar').prop("disabled", false);
else
$('#btnGuardar').prop("disabled", true);
doneTypingSearch();
}
Annex cshtml code
@using TPConvenios.App_Data;
@using TPConvenios.Models;
@model Orden
@{
Layout = null;
AjaxOptions ajaxOpciones = new AjaxOptions
{
UpdateTargetId = "cuerpoPopUpGenerico",
InsertionMode = InsertionMode.Replace,
OnSuccess = "OnSuccess",
OnFailure = "OnFailure"
};
List<Item> items = ViewBag.listaItems;
List<AtributoAdicional> atributosAdicionales = ViewBag.ListaAtributosAdicionales;
string codConvenio = ViewBag.codConvenio;
bool tieneEntregas = items.Any(i => i.tieneEntregas);
bool tieneRepetidos = items.Any(i => i.repetido);
int j = 0;
}
<input type="hidden" id="tieneRepetidos" value="@tieneRepetidos.ToString().ToLower()" />
<style>
.ui-autocomplete
{
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 100px;
}
.box
{
width: 250px;
float: left;
height: 25px;
}
</style>
<div id="botonesContenedorCarga" style="float: right; display: none;">
<input type="button" align="center" class="botonNuevo" onclick="NuevaPosicion();"
value="Agregar Producto" />
</div>
@if (Model.idOrden == 0 || ViewBag.duplicado)
{
<h1>Nueva Orden</h1>
}
else
{
<h1>Orden N° @Model.idOrden <span style="color: red">@(Model.FechaHasta.Date < DateTime.Now.Date ? "Vencida" : (!Model.Activa ? "Inactiva" : string.Empty))
@(Model.Eliminada ? " - Eliminada" : string.Empty)</span></h1>
}
@using (Ajax.BeginForm("NuevaOrden", "Ordenes", null, ajaxOpciones, new { id = "NuevaOrden", onsubmit = "GuardarOrden();" }))
{
@Html.ValidationSummary(true);
<input type="hidden" name="codigoConvenio" id="codigoConvenio" value="@ViewBag.codConvenio" />
<input type="hidden" name="confirmadoRepeticion" id="confirmadoRepeticion" value="0" />
<input type="hidden" name="idOrden" id="idOrden" value="@(ViewBag.duplicado ? 0 : Model.idOrden)" />
</div>
<br />
<div align="right">
<input type="button" align="right" class="botonNuevo" value="Calcular Total" />
<input type="text" align="right" />
</div>
<div id="div_tblPosiciones">
<table id="tblPosicionesNueva">
<thead>
<tr>
<th>Producto
</th>
<th align="center">Cantidad por<br />
Entregar
</th>
<th>
Eliminar
</th>
</tr>
</thead>
<tbody>
@if (null != items)
{
foreach (var item in items)
{
j++;
<tr>
<td>
<input type="text" class="producto" autocomplete="off" id="inputBusqueda" style="width: 100%;@(item.repetido ? "border-color:transparent transparent #FCBB1D;" : string.Empty)" placeholder="Nombre y Presentación" data-id="@j"
required value="@item.nombre"/>
<input type="hidden" class="sap" data-id="@j" value="@item.sap"/>
</td>
<td><!--// ESTE <TD> LO INCLUI PARA INCORPORAR EL PRECIO -->
<input type="text" class="producto" autocomplete="off" id="IP" style="width: 100%" required value="@item.precio" />
<input type="hidden" class="sap" data-id="@j" value="@item.sap" />
</td>
<td class="cssCenterTd">
<input type="number" min="0" value="@item.cantidad" step="1" class="cantidad justNumbers" data-id="@j"
required style="width: 50px" />
<input type="hidden" class="posicion" data-id="@j" value="@item.posicion"/>
</td>
<td class="cssCenterTd">
<a id="eliminar@(j)" class="fa-stack fa-lg @(item.tieneEntregas ? "fa-disabled" : string.Empty)" href="javascript:EliminarPosicion('@j')"
title="Eliminar"><i class="fa fa-circle fa-stack-2x fa-fondo"></i><i class="fa fa-trash fa-stack-1x fa-frente"></i></a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
<input type="hidden" id="indice" name="indice" value="@j" />
<input type="hidden" id="listaProductos" name="listaProductos" />
<input type="hidden" id="codConvenio" name="codConvenio" value="@(ViewBag.codConvenio)" />
<br />
<br />
<p>
<input type="button" class="botonNuevo botonSuccess" onclick="CancelarNuevaOrden()"
style="float: right; margin-top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;"
value="Cancelar" />
<input type="submit" id="btnGuardar" class="botonNuevo botonSuccess" style="float: right; margin-top: 0; position: relative;"
value="Guardar" disabled />
</p>
}
<script src='@Url.Content("~/" + String.Format("Scripts/jsOrden/jsNuevaOrden.js?v={0}", File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + "/Scripts/jsOrden/jsNuevaOrden.js").ToString("yyyyMMddHHss")))' type="text/javascript"></script>
How can I achieve this? I accept all your suggestions for me to analyze and implement it in the code to achieve what is proposed
I appreciate the help you can give me
Whenever you want to extract a number from a string you can use Regular Expressions . I leave you a small example of how: