I have select box which load addresses form via ajax. So user can select previous saved address. Inside address form , another select box which lists 'States'. A shipping is calculated based on 'States' select box change.
I want to trigger a change after loading addresses. I used this code
$('select#addressed').change(function() {
$('select#states').trigger('change');
});
But this will trigger change before new address load.Any way to trigger after loading address?
Fire the change in the success section of the Ajax call. That way it won't fire until the data comes back. You could also use a $.when/.done as well.
http://api.jquery.com/jQuery.when/
You can fix this by putting the "click" trigger in the complete function. I'm assuming from your syntax and tag you're using jQuery. Have a look at this link under "complete".
Related
I am currently using an Elementor WordPress form plugin (MetForm) that is using oninput events to handle data submitted by users in their forms.
The issue is that I am passing data as parameters between pages in the URL but these can't be saved because they are not manually entered by the user when they land on the new page.
Their plugin as it is now requires users to interact with form elements to register the values.
jQuery('#iD').val();
doesn't set a new value unless it is actually typed by the user.
jQuery('#iD').trigger("oninput"); or jQuery('#iD').trigger("input");
don't seem to work.
It'd be very complicated for me to try to change their plugin and their support hasn't been responsive to my requests just yet.
Is there a way I could manually trigger oninput event on a particular form element with a given ID to trick user input? (you can assume each form element has a separate ID as follows: #my-input1, #my-input2 etc.)
Please note I am not trying to handle the input. The user won't interact with an input I pre-fill for them. I am trying to trigger the oninput event to trick the form plugin to believe that's what happened so that the form values register when the form is submitted.
Yes you can manually add event listeners for inputs
Example:
const myInput = document.querySelector('#my-input1');
myInput.addEventListener('input', function () {
// code to run when oninput event is triggered on the input
})
I'm using select2 plugin (v4) to present a list of cities. When a city is chosen an ajax is executed to find all instances related to that city. I need to prevent the change method that calls the ajax when the user click a button to push all the nearest cities to the city previously chosen cause it is executing the ajax per each nearest city.
Thanks in advance for your suggestions.
My first though was to use preventDefault but I'm not sure this can be done - see this question:
preventdefault-not-working-for-change-event
The on change event cannot be cancelled, so it cannot be prevented, it seems.
My only other idea would be to overwrite the on change behavour with an empty function?
I have a situation, in which I want to restrict my web page to refresh after I attach a document.
The secnerio is there is some hide when condition written on OnLoad of the Form using javascript, and as soon as the form loads the hide when is active but below that we have more hide when on the basis of selection of a drop down, that is also working, but if I attach a document the web page refreshes and the onload triggers, which further enables the first hide-whne and then again I have to select from drop-down to enable the next hide-when.
Please help if we can restrict web-page refresh after attachment upload.
It sounds like the problem might be more that you have to re-select the drop-down to get the hide-when on that to work after a refresh ? That is, the value is already selected, so there's no change, so the hide-when isn't triggered ?
If so, you probably need to package up the drop-down's hide-when code into a function (if it isn't aleready) and always call that during onload so that if the page refreshes, all hide-when is honoured.
That's assuming the hide-when resulting form the drop-down change is also in Javascript. If it isn't and you have "Refresh fields on keyword change" ticked in the Notes Designer field's properties, then that's what's causing the second refresh, and your best best would be to un-tick that peoperty and simulate the resulting hide-when using javascript, with an onchange event on the drop-down.
If I have a required field on my form within my MVC3 page, and try submitting the form, the validation fires and the input control is given a light-red background color (fill) and it also shows a validation message. If I type in the input control, it will detect the value and remove both the coloring and validation method. This is how it should work.
In my case, I have mailing address fields, most of them required. I have an option on my site to select an address in a drop down list. When an address is selected by the user, all the address fields filled in using client side javascript. However, when I do this, my validation message and color aren't going away. So I need to somehow force the validation check.
How is this done?
Thanks in advance.
The reason validation fires for your inputs is because they hook up to your change, focus, blue, keypress, etc events. For a scenario of where you fill the fields in with script you'll need to specifically call each element that had it's value populated. The reason for this is because the change event will not be fired. Just select the element with jQuery and call the valid method on it for jQuery Validate. The valid function will force validation on the element when called.
jQuery Validate Valid Documentation
Example
$("#mySelect").change(function() {
$("#myElement1").val("Some Value");
$("#myElement1").valid();
});
How can I force any change to a checkbox (inside a form) or to a drop-down menu selection to cause a HTTP POST to be issued by the browser?
Bandwidth is not an issue, page reloading is not an issue and I don't want to go the full AJAX route.
What I really want is an HTTP POST to be done when the user clicks on a checkbox (or selects something from a drop-down menu), etc. without the user having to click 'Submit' after its change.
Maybe it should be done with some JavaScript on the client-side? (I couldn't succesfully Google anything)
Use Javascript. Add onchange="document.getElementById('myFormId').submit()" to the elements, or do this programatically. myFormId must be replaced by the HTML id of the form element.
You could use the JavaScript onchange event to then call the submit() function on the form.
if you have a form already set up just put a class to the element you want to use as trigger and then
for select
$(".classname").change(function(){
$("#formid").submit();
});
for checkbox/radio
$(".classname").click(function(){
$("#formid").submit();
});
AFIK it can't be done without client-side scripting. The easiest way would be to trigger the submit event for every form change. With jQuery it's done with the following code:
<script type="text/javascript">
$(function() {
$("input[type=checkbox],input[type=radio],select").change(
function(evt)){evt.target.form.submit();}
);
});
</script>
If you don't use jQuery, you'll have to write some boilerplate event handling code. See this introduction for more info on JavaScript event handling.