1

Debe ser algo simple, pero recien llevo dos semanas con laravel y hay muchas cosas que desconozco y esta es una de ellas.

En el tab1 tengo una celda que es capital que ingreso un valor y quisiera que cuando hago click en el segundo tabs. me muestre otra celda con el valor que puse en capital + 1000.

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab1">
                {!! Form::label('capital', 'Cantidad') !!}
                {!! Form::text('capital', null, ['class' => 'form-control', 'placeholder' => 'Ingrese Cantidad $$$' , 'required']) !!}
                </div>
</div>
        <div role="tabpanel" class="tab-pane" id="tab2">
<!-- Que Muestre lo que escribi en tab1=capital + $1000  -->

</div>
    </div>
</div>
<!-- Tab fin -->

Este es mi código completo

@extends('layouts.app')
@section('title', 'Cantidades')
@section ('content')

<!-- Nav tabs -->
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
    {!! Form::label('capital', 'Cantidad') !!}
    {!! Form::text('capital', null, ['class' => 'form-control', 'placeholder' => 'Ingrese Cantidad $$$' , 'required']) !!}
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
    {!! Form::text('capital2', null, ['class' => 'form-control' , 'required']) !!}
</div>
</div>

<script>
// detectamos el cambio de valor en el campo capital
$('#capital').on('input', function(){

// comprobamos que sea un entero y en caso contrario, pasamos un cero
var capitalValue = !isNaN(parseInt($(this).val())) ? parseInt($(this).val()) : 0 ;

// sumamos 1000 al valor obtenido de capital y lo ponemos en capital2
$('#capital2').val(capitalValue + 1000);

});
</script>
@endsection

y este es mi layouts.app

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title','default') | Prestamista</title>
<link rel="stylesheet" href="{{ asset('pluggins/bootstrap/css/bootstrap.css')}}">

<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">

<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}

<style>
    body {
        font-family: 'Lato';
    }

    .fa-btn {
        margin-right: 6px;
    }
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Branding Image -->
            <a class="navbar-brand" href="{{ url('/') }}">
                Prestamista
            </a>
        </div>

        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/home') }}">Inicio</a></li>
            </ul>
    @if(Auth::user())
                <ul class="nav navbar-nav">
                <li><a href="{{ url('/clients') }}">Clientes</a></li>
            </ul>
                <ul class="nav navbar-nav">
                <li><a href="{{ url('/loans') }}">Prestamos</a></li>
            </ul>
    @if((Auth::user()->tipo)==='admin')
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/users') }}">[Usuarios]</a></li>
            </ul>
    @endif
    @else 
    @endif

            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Salir</a></li>
                        </ul>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

@yield('content')

<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}

2 respuestas 2

0

Bueno, realmente no tiene mucho que ver con Laravel, es más un asunto de frontend, asumo que cuando hablas de una celda te refieres a un <input type="text"> por lo que veo en tu código, vamos a hacer una solución rápida con jQuery, aunque si no lo usas, puedes optar mejor por una en javascript puro:

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1">
        {!! Form::label('capital', 'Cantidad') !!}
        {!! Form::text('capital', null, ['class' => 'form-control', 'placeholder' => 'Ingrese Cantidad $$$' , 'required']) !!}
    </div>
    <div role="tabpanel" class="tab-pane" id="tab2">
        {!! Form::text('capital2', null, ['class' => 'form-control' , 'required']) !!}
    </div>
</div>

<script>
  // detectamos el cambio de valor en el campo capital
  $('#capital').on('input', function(){

    // comprobamos que sea un entero y en caso contrario, pasamos un cero
    var capitalValue = !isNaN(parseInt($(this).val())) ? parseInt($(this).val()) : 0 ;

    // sumamos 1000 al valor obtenido de capital y lo ponemos en capital2
    $('#capital2').val(capitalValue + 1000);

  });
</script>
13
  • primero que nada muchas gracias por la ayuda!! :) pero veo que el text = capital2 no cambia ningun valor cuando modifico el text = capital como que no se refrescara... igual soy muy nuevo y estoy haciendolo mal. Commented el 9 ago. 2016 a las 23:08
  • Yo lo probé y me funcionó, qué versión de Laravel Collective usas? (el generador de los inputs)
    – Shaz
    Commented el 9 ago. 2016 a las 23:27
  • Collective v5.2.4, quizas no este cargando el jquery o no lo este cargando bien :( Commented el 9 ago. 2016 a las 23:42
  • Es posible, agrega jQuery al <head>
    – Shaz
    Commented el 9 ago. 2016 a las 23:43
  • <script src="{{ asset('pluggins/jquery/js/jquery-3.1.0.js')}}"></script> lo coloco asi? cuando esta la carpteta pluggins dentro de la carpeta public? Commented el 9 ago. 2016 a las 23:52
0

Si el error que tenia es que tenia que especificar el id, pensaba que solamente con "text('capital2')" ya lo identificaba. y no.. tenia que poner el "'id' => 'capital2'" y ya funciono todo bien. gracias por el script Shaz!!

{!! Form::text('capital2', null, ['class' => 'form-control', 'id' => 'capital2' , 'required']) !!}
1
  • Curiosamente eso lo hace LaravelCollective en sus versiones más recientes (si no especificas el id, el name es asignado como id también).
    – Shaz
    Commented el 12 ago. 2016 a las 0:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.