jquery - i want to show button after select text, but if this happened button doesnot work in Javascript -
i want show button after select option button not work. if write button in body works.add_more_button button in code want use in js call add-more-field in js function. , show fields .
<!doctype html> <html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>laravel</title> <!-- 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('/') }}"> laravel </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') }}">home</a></li> <li><a href="{{ url('/questionair') }}">questionair</a></li> <li><a href="{{ url('/result') }}">result</a></li> </ul> <!-- right side of navbar --> <ul class="nav navbar-nav navbar-right"> <!-- authentication links --> @if (auth::guest()) <li><a href="{{ url('/login') }}">login</a></li> <li><a href="{{ url('/register') }}">register</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>logout</a></li> </ul> </li> @endif </ul> </div> </div> </nav> <div class="container"> <h2>add questions</h2> <hr> <div class="container"> <div class="col-md-6 " > <label>question type</label> <select class="form-control " required onchange="showfield(this.options[this.selectedindex].value)"> <option></option> <option value="text" >text</option> <option value="mcq">multipe choice (single option)</option> </select> <div id="div1"></div> <div class="input_fields_container"></div> <div> <button class="btn btn-sm btn-primary add_more_button">add more fields</button> </div> @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> --}} </body> </html> <script type="text/javascript"> function showfield(name){ if(name=='text')document.getelementbyid('div1').innerhtml='<label>question</label>: <input class="form-control" name="question" id="div1" type="text" placeholder="enter question"><label>answer</label>: <input class="form-control" name="answer" id="div1" type="text" placeholder="enter answer"> <button class="btn btn-sm btn-primary add_more_button">add more fields</button>
'; else if(name=='mcq')document.getelementbyid('div1').innerhtml='question: choice1: choice2: choice3: choice4:
'; else document.getelementbyid('div1').innerhtml=''; }
$(document).ready(function() { var max_fields_limit = 10; //set limit maximum input fields var x = 1; //initialize counter text box $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button e.preventdefault(); if(x < max_fields_limit){ //check conditions x++; //counter increment $('.input_fields_container').append('question: answer: remove'); //add input field } });
$('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links e.preventdefault(); $(this).parent('div').remove(); x--; }) });
Comments
Post a Comment