I'm trying to make something like a shopping cart, but just with an order form.
I am using this pattern to fire input changes, but it doesn't work in my case.
Here what I have first.
<div class="ingrid__table-row">
<div class="ingrid__table-data ingrid__table-item">Lemon</div>
<div class="ingrid__table-data ingrid__table-weight">15g</div>
<div class="ingrid__table-data ingrid__table-price">10</div>
</div>
With jQuery, on click, I take the data from ingrid__table-data and add to the suitable input into .order__container.
Then, on the same click, a number input is appended, which will enable to choose the quantity of the selected products.
$('.order__container').append(`<input class="bul-order-info__input bul-order-info__qnt" type="number" name="Quantity" min="1" value="1">`)
And it appears on a webpage in the order form.
I need to detect the value changes of "number type input" and fire other events.
But the input changes are not detected, although if I create the same input element manually in HTML document, these changes are detected perfectly as it's shown here
How can I achieve this behavior?
My best guess based on the info you provided is that you are trying to attach the on change event to the dynamically created inputs on this way:
$('.bul-order-info__input').change( function () {...} );
But with the code before you are aren't applying those changes to any input because none of them exists when you are creating the event handlers, so you have to bind the events to an existing element like this:
$(document).on('change', '.bul-order-info__input', function() {...});
The element doesn't have to be always document, but I tend to use it, because is the only one that always will be present. However, something like this is also valid:
$('.order__container').on('change', '.bul-order-info__input', function() {...});
Related
I am a beginner at HTML/CCS/Javascript, and I am designing a website which looks like this :
I would like to ensure that the table displayed below is always in sync with the number input element.
I have an input number element like this:
<label for="loansize">Loan Size (USD) (between 500 and 3000):</label>
<input type="number" id="loansize" name="loansize" value="3000" min="500" max="3000">
Currently the table does refresh when the user clicks elsewhere on the page, because I have added code like this :
'<div onChange="processPage();">' ... Render the HTML ... '</div>';
But this does not catch the user being in the process of changing the input number, so I get in a situation like this:
The bottom table remains unchanged from the above picture, even though the number input has changed. It takes a click elsewhere on the page for the table to be back in sync.
How can I ensure the table is re-rendered (i.e. remains in sync) in such a situation ?
Instead of using inline onChange which is considered as a bad practice. You can modify the element using DOM. Here is the simple way to fire the processPage() function every time the value in the loan input is changed.
const loanSize = document.getElementById('loansize');
loanSize.addEventListener('input', processPage);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
You can try using the onInput listener.
From MDN:
The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.
how can i detect if an input value is changed.. i have a series of inputs which is from an ajax request.
something like this:
for each result of the ajax request
print some <input type="text"> here
i tried to use an id to detect the changes made but multiple inputs have the same id and it seemed not to work on my case.
done something like this but it does not work, maybe because i have many input with the same id?
$('body').on('DOMAttrModified propertychange paste', '#rn', function() {
alert("test");
});
You can use onchange() to detect any changes on the input. For example,
<input type="text" onchange="doSomethingOnChange()">
This will trigger doSomethingOnChange() every time the value in the input is changed.
Now that you want to add classes to html elements. This will guide you on how to do such task.
Summary: I am trying to force a change event to fire on an HTML element, without actually changing it, but the event does not seem to fire.
My scenario: There is a page (created by someone else) that is designed to hide certain fields until a value from a certain dropdown is selected, at which time the dependent fields will appear. But in some scenarios, the dropdown should be autopopulated and fields should appear by default. So I am trying to trick the page into showing the dependent fields when it is first loaded. I do something like this:
form.field('THEDROPDOWNFIELD').$el.trigger('change');
But nothing happens. I found that
form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');
will fire the change event. For whatever reason, $el.trigger('change') does not trigger the change unless the DOM element's value truly has changed. The problem is I don't want the dummy value in that dropdown to be there.
Summary (again): Is there a way to force the dropdown's element change event to fire when the selected value in the dropdown has not actually changed?
This snippet works ok (uses JQuery):
$('#toChange').bind('change', function() {
$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="toChange">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>
Your code doesn't seem to be failing, so it must be something related to the DOM or the way the other guy has implemented this effect. It is hard to guess what your problem might be. So my suggestion is as follows:
Check if its really implemented to trigger on radiobutton change and not on a click event handler on a div/other element that's not directly related to the radio button.
Check if your HTML code is failing.
Provide more code snippets that you think might be related.
I've got a form where I'm trying to do the sort of thing you often see with tags: there's a textfield for the first tag, and, if you put something into it, a new and similar textfield appears to receive another tag. And so on. I've gotten the basics of this working by setting up a jQuery .blur() handler for the textfield: after the value is entered and the user leaves the field, the handler runs and inserts the new field into the form. The handler is pretty vanilla, something like:
$('input.the_field_class').blur(function () { ... });
where .the_field_class identifies the input field(s) that collect the values.
My problem is that, while the new textfield is happily added to the form after the user enters the first value, the blur handler doesn't fire when the user enters something into the newly-added field and then leaves it. The first field continues to work properly, but the second one never works. FWIW, I've watched for and avoided any id and name clashes between the initial and added fields. I had thought that jQuery would pick up the added textfield, which has the same class markings as the first one, and handle it like the original one, but maybe I'm wrong -- do I need to poke the page or some part of it with some sort of jQuery initialization thing? Thanks!
Without seeing your code in more of its context, it's hard to know for sure, but my best guess is that you're attaching a handler to the first field, but there is no code that gets called to attach it to the new field. If that's the case, you have a few options, two of which are:
1) In your blur() handler, include code to attach the blur handler to the newly created field.
2) Use jQuery's event delegation to attach a handler to the field container, and listen for blur events on any field in the container:
<div class="tag-container">
<input class="the_field_class" /> <!-- initial tag field -->
</div>
<script>
var $tagContainer = $('.tag-container');
var createNewField = function() {
$tagContainer.append($('<input class="the_field_class" />');
};
$tagContainer.on('blur', 'input.the_field_class', createNewField());
</script>
Which is better will depend on your use case, but I'd guess that the 2nd option will be better for you, since you're unlikely to be dealing with tons of blur events coming from the container.
On my form, I have a DropDown, when a value is selected, I fire some JavaScript that populates some visible <input type="text" /> fields (under neath the drop down).
The problem is, I also want to run some JavaScript function whenever the value of one of these inputs changes, I want this function to run even if the text input is changed by the drop down selection.
Here is my current code:
jQuery(document).ready(function() {
$('#mainPane').on('change', '#formElementFromEmail', function(event){
var collectFromDropDown = $('#formElementFromEmail');
persistHiddenInputForCollectFromValue();
});
});
I suspect the change event is not being fired because no one has manually changed the value of the field in question. How can I overcome this?
Since you're using jQuery, you can trigger the event:
$('#mainPane').trigger('change');
you can simulate change event by
var element = document.getElementById('formElementFromEmail');
element.onchange();