Clear/Reset specific inputs fields by button click in Angular 5 - javascript

<form #addOpeninghoursForm="ngForm" ngNativeValidate (ngSubmit)="addOpeninghours()">
<div class="form-group">
<label for="day">Select Day:</label>
<select class="form-control" [(ngModel)]="openinghours.day" name="day" id="day" required>
<option value="1">Saturday</option>
<option value="2">Sunday</option>
</select>
</div>
<div class="form-group">
<label for="opens_from">Opens From:</label>
<input type="time" class="form-control" [(ngModel)]="openinghours.opens_from" name="opens_from" id="opens_from" placeholder="Enter the time" required>
</div>
<div class="form-group">
<label for="opens_till">Opens Till:</label>
<input type="time" class="form-control" [(ngModel)]="openinghours.opens_till" name="opens_till" id="opens_till" placeholder="Enter the time" required>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-success" (click)="onlyResetTheTimeInputs?!?!">Reset</button>
</form>
When I saved the form, by pressing the save button, sometimes I want to press the reset button. Not always! But when I have to, I only wanna clear the time inputs. The earlier selected day may not be cleared.

You can clear the input fields of time in onlyResetTheTimeInputs() like
onlyResetTheTimeInputs(): void {
this.openinghours.opens_from = this.openinghours.opens_till = '';
}

Take a look at the code and demo
Source, Stack Blitz
Explanation:
Just a simple clearing of value will do, angular takes care of the view.
Advantage of having two way data binding is view doesn't need to be updated manually
onlyResetTheTimeInputs() {
this.openinghours.opens_from = this.openinghours.opens_till = null;
}

Related

How can multiple computations when I automatically add other fields, then save all the data?

I'm trying to make calculations on multiple fields having different data but when i add them calculations are only done on the first set of fields but the other fields i add, the javascript does not seem to work.
Plus i want to save those data in an array.
Here's my HTML code to display the select box and the input fields
<div id="addon_details">
<div class="form-group col-md-6">
<label for="name">Select Addon Package</label>
<select id="addon" name="type[]" class="form-control">
<option value="Radio">Radio</option>
<option value="Lamp">Lamp</option>
<option value="Phone">Phone</option>
<option value="Battery">Battery</option>
<option value="Antenna">Antenna</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="name">Quantity</label>
<input type="number" class="form-control" name="quantity[]" placeholder="Qty" id="qty[]" onchange="calculate();">
</div>
<div class="form-group col-md-4">
<label for="name">Total Price</label>
<input type="number" class="form-control" name="total[]" placeholder="" readonly="" id="price">
</div>
</div>
Then when I click on add package button it adds another set of fields
<div class="form-group col-md-12 col-md-offset-2">
<button type="button" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-plus" aria-hidden="true" id="add_success"></i>Add Package</button>
<button type="submit" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-refresh" aria-hidden="true"></i>Upgrade</button>
<button type="button" class="btn btn-default btn-addon m-b-sm"><i class="fa fa-close" aria-hidden="true"></i>Cancel</button>
</div>
Also here's the javascript to compute:
function calculate(){
var qty = document.getElementById('qty[]').value;
var radio = 1000 ;
var price = "";
if(document.getElementById('addon').value == "Radio") {
price = parseInt(qty) * radio;
document.getElementById('price').value = price;
}
}
But unfortunately for me, I can only do calculation on the first set of fields but the other fields the calculation are not possible.
Below you can see what I'm trying to do graphically
Any help is appreciated. Thank you!
As #Barmar suggests, you need to make your ID's unique. In your example your initial addon id could be addon1 like this:
<select id="addon1" name="type[]" class="form-control">...</select>
As you use your add package button, you would have to generate the next number for the select, like:
<select id="addon2" name="type[]" class="form-control">...</select>
<select id="addon3" name="type[]" class="form-control">...</select>
etc...
You could then have your function traverse all the fields with partial matches on addon id. This SO link would help you understand how you might do that.

Onclick Cancel application event

new to js...need your help. I want to create a cancel button that cancels an online form session when the cancel button is clicked. Before cancelling the session, I want a notification popup to appear (onclick event) asking for the user's confirmation before cancelling the application session. See code below:
<form>
<div class="form-group">
<label for="Product">Product</label>
<input type="text" name="product" id="product" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product1</label>
<input type="text" name="product1" id="product1" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product2</label>
<input type="text" name="product2" id="product2" required="required" value="">
</div>
<div>
<button name="submit">Add Product</span></button> **Cancel**
</div>
</form>
First you need on click confirm function which will ask user approve before continue
**Cancel**
<script>
function confirmCancel () {
var message = "Are you sure?";
if (confirm(message)) {
// do what you want
}
}
</script>
<form id='form1'>
<div class="form-group">
<label for="Product">Product</label> <input type="text" name="product" id="product" required="required" value=""> </div>
<div class="form-group">
<label for="Product">Product1</label> <input type="text" name="product1" id="product1" required="required" value=""> </div>
<div class="form-group"> <label for="Product">Product2</label> <input type="text" name="product2" id="product2" required="required" value=""> </div>
<div>
<button name="submit">Add Product</span></button>
**Cancel** </div>
</form>
<script>
function(id){
if(confirm("do you want to cancel?")){
$("#"+id)[0].reset();
}
}
</script
>
Without editing the form select the element, attach an 'click' event listener to the element you want to listen in on, in this case, "cancel" a tag. Once the click is registered confirm using a confirm box. if Ok grab the form and reset it and redirect the user. Else, do something else.
// grab your cancel anchor tag
var anchor = document.querySelector("[href='http://www.google.com']");
// grab your form
var form = document.getElementsByTagName('form')[0];
// add an event listener on to your cancle anchor tag
anchor.addEventListener('click',clicked =>{
// assign your confirm to varable yes
var yes = confirm('are you sure you want to cancle');
if(yes===true){
// if they confirm their departure reset the form
form.reset();
//alert them of a successfull form reset and inform them of the reroute
alert('the form has been reset you are going to be rerouted to google');
// use location to reroute to a different domain
//window.location.href("http://www.google.com")
// or within the current domain using a relative path
// window.location.href = '../' one level up
// winsow.location.href = '/path' relative to a domain
}else{
alert('you decided to cancle');
// do nothing
}
});
<form>
<div class="form-group">
<label for="Product">Product</label>
<input type="text" name="product" id="product" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product1</label>
<input type="text" name="product1" id="product1" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product2</label>
<input type="text" name="product2" id="product2" required="required" value="">
</div>
<div>
<button name="submit">Add Product</span></button> **Cancel**
</div>
</form>

How to submit two form in HTML using one click of submit button using JavaScript? [duplicate]

This question already has answers here:
Submit multiple forms with one submit button
(3 answers)
Closed 6 years ago.
This is my HTML code - the forms in this are not working. Please help to work out the JavaScript and the HTML to submit these forms with a single click to same database.
JavaScript for the buttons:
<script>
submitBothForms = function () {
document.forms["userinfo"].submit();
document.forms["userinfo1"].submit();
}
</script>
<script>
clearForms = function(){
document.forms["userinfo"].reset();
document.forms["userinfo1"].reset();
}
</script>
HTML code where the both the forms and the buttons exists both the buttons are clear and save the code must be submitted to a single PHP file to a single database and single table.
<div class="row">
<div class="col-sm-12">
<div class="bill-to">
<div class="step-one">
<h2 class="heading">Add new Shipping address</h2>
</div>
<div class="form-one">
<form action="userinfo.php" name="userinfo" method="POST">
<input type="text" name="name" required placeholder="Name">
<input type="email" name="email" required placeholder="Email">
<input type="text" name="address1" required placeholder="Address 1">
<input type="text" name="address2" placeholder="Address 2">
</form>
</div>
</div>
<div class="form-two">
<form action="userinfo.php" name="userinfo1" method="POST">
<input type="text" name="zip" required placeholder="Zip / Postal Code">
<select>
<option>-- Country --</option>
<option>United States</option>
<option>Bangladesh</option>
<option>UK</option>
<option>India</option>
<option>Pakistan</option>
<option>Ucrane</option>
<option>Canada</option>
<option>Dubai</option>
</select>
<input type="tel" name="contact" required placeholder="Mobile Phone *">
<button type="submit" class="btn btn-primary" style="margin-right: 15px;" onClick="submitBothForms()">Save</button>
<button class="btn btn-primary" onclick="clearForm()">Clear</button>
</form>
</div>
</div>
</div>
You cannot submit two forms using submit button. Only one form can be submitted by the button. Use ajax call to submit the form i.e give two ajax call for the form submit.
jQuery AJAX submit form
this is simply not possible, as each of your fomrs will trigger a rountrip/reload.

Multiple products in one form

I would like to add a functionality in my form, in which a user can add as many entries before hitting submit button, like a 'add to cart' functionality, show the added entries in same page, in a separate div with submit button then save those multiple entry in database using that submit button(in a separate div that shows added entry).
So far my form allows only entries on per submit bases, meaning is if the user wants to add another entry, he/she has to go back to the form and add and click to submit again.
<form method="POST" name="myForm" action="saveto.php">
<label> Speed Rating:</label>
<select name="speed_rating" required class="form-control" id="speed_rating" ></select>
<div class="form-group col-sm-8">
<label> Description:</label>
<select name="description" required class="form-control" id="description" >
</select>
</div>
<div class="form-group col-sm-4">
<label> Load Index:</label>
<select name="load_index" required class="form-control" id="load_index" >
</select>
</div>
<div class="form-group col-sm-6">
<label> Vendor:</label>
<select name="vendor" required class="form-control" id="vendor" >
</select>
<div class="note"> Recommended Vendor : <span id="recomvend"> </span> </div>
</div>
<div class="form-group col-sm-6">
<label> Quantity:</label>
<input type="text" required name="qty" class="form-control" id="qty"></div>
<div style="clear:both"> </div>
<input type="submit" name="submit" class="btn btn-primary smp" value="Submit">
<button id="clear" type="button" class="btn btn-primary smp smp2" > Reset </button>
</div>
<input type="submit" value="submit" name="submit">
</form>
How would you achieved this? My saveto.php is just a normal script that will process the submitted data to database, one entry in a per submit bases.
I created this jsfiddle https://jsfiddle.net/jy6vh4rp/31/
If that's what you are looking for then you should add this to your front end:
<form action="validate.php" method="post">
<div style="padding: 30px 0; text-align: center;">
<button type="button" onclick="createDOM()">Add</button>
<input type="submit" value="submit" name="submit" />
</div>
<div class="productsContainer"></div>
</form>
<script>
$(document).ready(function() {
id = 0;
createDOM = function() {
$(".productsContainer").append('<input type="text" id="' + id + '" name="products[]" value="' + id + '" />');
id++;
};
});
</script>
And this to your validation backend :
foreach($_POST['products'] as $prodInput){
$product = filter_var($prodInput,FILTER_SANITIZE_NUMBER_INT);
if( is_numeric($product) ){
echo $product;
}
}

protractor kendo combo box

I am having trouble selecting a kendo combobox selection using angular js. The best way i can tell to change the value is to set the model.batch.type on the controller, but i don't know how to do that. I have messed around with executing a script to do it but have had no luck. Any help would be appreciated.
<div class="row form-group">
<label for="type" class="col-sm-1 k-label text-right">Type</label>
<input id="type" class="col-sm-1 no-padding" kendo-combo-box data-ng-model="model.batch.type"
k-data-text-field="'name'" k-data-value-field="'id'" k-data-source="model.batchTypes"/>
<label for="size" class="col-sm-1 k-label text-right">Size</label>
<input type="text" id="size" name="size" class="col-sm-1 k-textbox" ng-required="true" data-ng-
model="model.batch.size"/>
<label class="col-sm-2 col-sm-offset-1 k-label">
<input type="checkbox" data-ng-model="model.barCodePrint" checked/> Print Batch Barcode
</label>
<button type="button" class="btn" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn btn-primary" ng-disabled="createBatchForm.$invalid"
value="Create"/>
</div>
I am trying to select an option in the second input with id='type'.
Locate the underlying input element, click it, clear, send keys to it and hit enter:
var comboBox = element(by.css("input#type"));
comboBox.click();
comboBox.clear();
combobox.sendKeys("Element inside the combobox");
combobox.sendKeys(protractor.Key.ENTER);

Categories