How to reset multiple select boxes in a form with jquery? - javascript

How can I reset multiple select boxes in a form with jquery?
there are multiple select boxes
they are dynamically generated & we don't know what they will be
some of the boxes option tags will be marked as selected
fiddle: http://jsfiddle.net/Qnq82/
I have this so far, it resets everything but the selects.
$('button#reset').click(function(){
$form = $('button#reset').closest('form');
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
$form.find('select').selectedIndex = 0;
});
Added some markup:
<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">
<div class="form-group">
<label for="grade">Grade</label>
<select name="grade" class="form-control input-sm" onchange="this.form.submit();">
<option value="">Any</option>
<option value="opt1">opt1</option>
<option value="opt2" selected="selected">opt2</option>
</select>
</div>
<!-- there are 6 more select controls -->
<div class="form-group">
<label> </label>
<button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
</div>
<div class="form-group">
<label> </label>
<button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
</div>
</form>

This will work:-
$form.find('select').prop('selectedIndex',0);

I deselect all html selects in the form with this code succesfuly:
$("#form1").find('select').prop('selectedIndex', -1);

I tried and searched a lot on StackOverFlow but didn't get any solution to reset multiselect.Then i found This Link. That solved my Problem.
Here is the code sample.
$("#yourcontrolid").multiselect('clearSelection');

Change the last line to this:
$form.find('select')[0].selectedIndex = 0;
selectedIndex is a property of HTMLElement and not jQuery object.
If you know the value, then you can do $form.find('select').val('value');

Below code worked for me:
$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');

$form.find('select').each(function(){
$(this).val($(this).find('option:first').val());
});
This one works for me...

Related

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

<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;
}

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.

Can't simulate click on submit button via javascript

I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()

Form event onChange not working on dropdown selection

I have one form that works perfectly and changes the action of the form based on radio buttons:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
I tried
onChange="if(this.checked)
first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?
You need to change it slightly.
Your onchange events should be bound to the select not the individual options.
I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.
This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".
See - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>

Populate fields when user submit forms without page refresh using jQuery

On my form there are a few input fields, once the users entered the values into the input field and hit submit, I want the values to populate a few corresponding elements.
How can I do it using jQuery without refreshing the page?
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
Some failed JS.
$('#hCardForm').submit(function() {
var rName = $('#yourName').val();
$('.rName').text(rName);
});
There are 2 things wrong with your code.
1. you don't have an id on your form
2. you are not stopping the submit of the form.
You could change the button type equal to button instead of submit and submit the form via jquery.
jsfiddle
<form method="get">
<label for="yourName">Your name</label>
<input name="yourName" id="yourName" type="text">
<button type="submit" id="submit">Submit</button>
</form>
<div id="result">
<span class="rName"></span>
</div>
$('#submit').click(function(event){
event.preventDefault();
$('#result .rName').text($('#yourName').val());
});​
http://jsfiddle.net/MswhY/

Categories