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. 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
    el 9 ago. 2016 a las 23:27
  • Collective v5.2.4, quizas no este cargando el jquery o no lo este cargando bien :( el 9 ago. 2016 a las 23:42
  • Es posible, agrega jQuery al <head>
    – Shaz
    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? 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
    el 12 ago. 2016 a las 0:50

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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