I have 2 required drop-down lists,this is my try but it doesn't work when I click on the "Save" Button:
<div>
<button class="btn btn-action" ng-click="save()">Save</button>
</div>
<form>
<div class="row">
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
</div>
</form>
the save method:
$scope.save= function() {
$scope.creerGamme();
}
how can I correct my code please
thanks for help
Related
I'm working on an assignment and I'm having some trouble.
I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.
So far I have everything up until the last button that makes it disappear.
Here's my code:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
});
});
$("#menos").click(function() {
$(this).closest('div').find('#todo-tel').remove();
});
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})
Check code below:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
});
$(document).on("click", ".menos", function() {
$(this).closest('.nuevo-tel').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
qr.php
<form id="contactForm" class="forma" method="post">
<h1 id="datah1">Your data</h1>
<div class="formcontainer">
<hr class="hr3"/>
<div class="container">
<label for="uname" id="fullnameofres"><strong>Full name of your restaurant</strong></label>
<input type="text" name="textfieldtest" id="user_value" placeholder="Full name of your business.." name="user_value" required>
<label for="psw"><strong>Number of tables</strong></label>
<input type="text" id="nr_tables" placeholder="How many tables you have..." name="nr_tables" required>
<hr class="hr1">
<div id="templatesDiv">
<label for="psw"><strong>Template</strong></label>
<button id="tmplt_btn" onclick="go_to_templates_grid()" style="margin-bottom: 15px">Click here for all templates </button>
</div>
<div>
You selected : <b> <span id="templateResult" name="templateResult"> </b>
</div>
<hr class="hr2">
<label for="psw"><strong>Do you have menu</strong></label>
<!-- <input type="text" id="menu_choice" placeholder="Yes/No" name="menu_choice" required> -->
<select name="menu_dropdown" id="menu_dropdown">
<option value="None" selected disabled > Yes/No </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" id="submitara" name="submit">Submit</button>
</form>
Expected behaviour: The user fills in the fields, after clicking on 'Click here for all templates', another php file being opened, user is choosing Template, back to qr.php, submit form and that's all.
The problem is that all data which was typed in text fields being cleared after clicking on 'Click here for all templates'.
The default type for a button is submit, so when you click that button, you are submitting the form. Add: type="button" to the button code so that it will just run your function but not submit.
<button type="button" id="tmplt_btn"
onclick="go_to_templates_grid()"
style="margin-bottom: 15px">Click here for all templates </button>
Hi I downloaded some html template which I am trying to readjust and I have some code form like this, is it possible that I can change the option "value" into "href" so when client select lets say "Standard Access" and click on the button Buy Now to redirect to the paypal lets say?
Here is the code :
<div class="modal-body">
<form method="POST" action="#">
<div class="form-group">
<input type="text" class="form-control" name="your-name" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="your-email" placeholder="Your Email">
</div>
<div class="form-group">
<select id="ticket-type" name="ticket-type" class="form-control" >
<option value="">-- Select Your Ticket Type --</option>
<option value="standard-access">Standard Access</option>
<option value="pro-access">Pro Access</option>
<option value="premium-access">Premium Access</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn">Buy Now</button>
</div>
</form>
</div>
Here you have some example. Probably it's possible to make it better, but I don't know the context.
$('#confirmButton').on('click', function() {
const href = $('#redirect').val();
window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
<option value="" disabled selected>-- Select Your Ticket Type --</option>
<option value="https://www.google.com">Google</option>
<option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>
You can add onsubmit listener to your form.
<form method="POST" action="#" onsubmit="myFunction()">...
</form>
<script>
myFunction(){
var x = document.getElementById("ticket-type").value;
if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
return false; // to prevent default submit
}
</script>
I have a form with few input fields and select menus. I'm using bootstrap select plugin for select menus. Link
So I just completed all things and applied bootstrap validation using this plugin. Link and it's working fine except select menus.
When I click the select menu and click out side ( without selecting menu items ) It didn't do anything. Normally it should change border color and give error message like this. "Please fill out this field." But when I click submit, it working fine. After that I removed bootstrap selectpicker plugin. Then it worked fine. I'm thinking that there are conflicts with both two plugins. Please see example images.
Click select menu and outside click(not working)
Click form submit and working fine.
And I tried with this code but no luck. I need to show an error message when someone click select menu and if he doesn't choose anything and click outside like input fields. What is the best solution for this?
Here is an example
jsbin
<form data-toggle="validator">
<div class="form-group">
<label for="select" class="control-label">Title</label>
<div class="form-input">
<select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
$('.select').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});
You are handling the hide.bs.select event on the select class that is not on your select input. Try with .selectpicker instead :
<form data-toggle="validator">
<div class="form-group">
<label for="select" class="control-label">Title</label>
<div class="form-input">
<select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
$('.selectpicker').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});
Here is the updated jsbin
You have to use ".selectpicker".
Maybe it will helps you to solve yout issue:
http://formvalidation.io/examples/bootstrap-select/
I try to create a search box with a dropdown inside the search text field
For now this is my result:
http://www.bootply.com/46drKn8dRs#
But i prefer the dropdown is on the right, any help?
This is how I fixed it:
.btn.dropdown-toggle{
border-radius:0;
}
Here is your updated Bootply
I moved the element and added the above CSS code.
if you want to move de dropdown to the right, you can just move all the tag after the search text field like this:
<div class="row">
<div class="col-md-6">
<div class="form-horizontal">
<div class="input-group">
<input id="txtkey" type="text" class="form-control" placeholder="Enter here" aria-describedby="ddlsearch">
<div class="ddl-select input-group-btn">
<select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary">
<option value="france">France</option>
<option value="austria">Austraia</option>
<option value="usa">usa</option>
</select>
</div>
<span class="input-group-btn">
<button id="btn-search" class="btn btn-info" type="button"><i class="fa fa-search fa-fw"></i></button>
</span>
</div>
</div>
</div>
</div>