How to create persist function on checkbox if data is present - javascript

I have seen many checkbox examples, but not this one.
I need a checkbox to remain checked if data is present in specific <input> fields. So it would need to be something that is constantly checking field status.
Basic checkbox:
<input class="checkbox" type="checkbox" unchecked onclick="shipping()"/>
It calls a function that removes a <div> and adds a shipping info page. There is a back button there that will remove shipping page and add orig. If they entered shipping data I want that checkbox to be checked. Now if they click it again, the data they entered on the shipping page would disappear. And process can be repeated.
This is a PHP page so I am comfortable using javascript, jQuery or PHP. Just looking for the most reliable way.

JavaScript is the way to go because PHP can't react to what's happening in the browser. I would register an onchange event handler to the input that drives the checkbox. When the input is altered (ie when the handler is triggered):
Read the value, and if it is empty then...
Enable the checkbox.
Else, disable the checkbox and set it as checked
This should prevent a user of the UI from unchecking the box while there is content in the input

Related

Radio button unchecked from javascript does not reset selectedIndex on C#

How it supposed to work: User starts typing in a textbox. If the textbox is populated with something, i show a div with 3 radiobuttons. If the user clicks one of the radiobuttons a postback on the server is made and we retrive some data. If the user clears the textbox we should uncheck the radiobuttons and hide their container. In the next step the user writes another value in the textbox and the radiobuttons appears on the screen, with neither of them selected.
Unfortunately, if the user selects the previously selected radio, the postback (selectionchangedhandler) on the server is not fired, presumably because i didn't unchecked correctly the radio button.
Do you have any ideas hot to make this work? I can't modify the c# source code because the website is generated from a CMS
tl;dr how to notify that we have no more a selectedIndex in a radioButtonGroup in c# from javascript?

Ext JS Search button which is attached to form

So basically I wanted to make a thing like this. A search button which is disabled. than when somebody enters something in one of the fields of the form I want button to enable itself and if somebody cleans every input up than I want to disable that button back. So my Idea was something like this. Extend the button provided by Ext JS. and somehow when this button is drawn or initialized, attach event of value changed to its upper form's input fields. so basically when somebody changes value of any input, that method attached as a listener will be called and than with help of some logic I can achieve the thing I want. but there is one problem. I don't really see how to do that. I mean I have some guesses but all of them have led me to the dead-end. So can you suggest what can I look at or from where to start ?
You can use formBind to enable/disable button depending on the validity state of the form. Validity of the form fields are checked against the validators set for form fields (like allowBlank: false). See the Example usage here
Another way to validate is to use VTypes
But, for the specific requirement to enable button if user enter values in any one of the fields, you might require custom validators. Sample fiddle here: https://fiddle.sencha.com/#fiddle/5qe

Submitting selection box item when javascript disabled

This is the case. I want to pass onchange event to a page (actually to the page this call is coming from) without having javascripting available. There is a tag with address like this:
<form name='form1' action='http://mysite.com/index.php' method='get'>
The select tag takes onchange event:
<select name='alue' onchange='this.form.submit();'>
I want to pass a particular, restricted list of choices to another selection box, based on the first selection box selection. I would like this to happen when javascript is disabled but is this impossible? Is this totally a client side event? Is there a way to perform this action purely with php (by forcing the page to reload somehow)?
The point is to have an alternative way for user to restrict amount of choices when javascript is disabled. Thank you for any advice and suggestion!
One approach is following :
Submit the form generally i.e through submit button then you can check in POST variable if the select box was selected or not.
if select box have value you can pass the form data using PHP to your page.

Chrome's clear form option from Autofill

I'm working on a form that have several fields with user's information (like his address) and, in the same form, several checkboxes and radio buttons. I want to keep autofill on, but only for the text fields. The radios and checkboxes all have custom events that trigger some ajaxes to update the page summaries and some other things.
Problem is: I did put autocomplete="off" on all fields I don't want autofill to mess up.. and that does work. But on chrome, when you have an autofilled a form, a "clear form" option shows up when you double click any field that is part of the autofilled form.
This clear form triggers a reset on the form object but this reset just don't fire any event. And it clears the whole form, even the radios and checkboxes. This breaks the functionality of my form because the custom events on the radios and checkboxes are not triggered.
The only solution I could think was to, using javascript, try to cache the current selections on the fields and keep comparing using a interval function... but that looks like a lame solution to me... it is kind of heavy and not very intuitive for other people to maintain this code. Does anyone know if this is a chrome bug or if there is any secret event I should be listening to, instead of "reset"?
Thank you

javascript editing fields after manual edit of field

I've looked everywhere on this.
basically what I have is a script that changes the value of some fields based on a radio selection.
For example: Think of it like a radio button that gets credit card data.
it works initially when the page loads and selects a radio. It will correctly load the data of that radio button.
Now when I choose to edit the fields manually, using it like a "new card" form, if I change my mind and go to select a presaved card, it will no longer update those fields I edited manually. It will completely ignore my request for it to change values via my javascript code that was just previously working. Note: It will actually still continue to work for any fields I left alone *did not manually type into/edit
so I was just wondering who else had that problem and what one does to fix it.
I am not sure if I understand exactly but I'll take a shot. My suggestion would be set apply a css class like "is-dirty" to the field once it has been updated and then you check to see if a given field has that class before updating it.

Categories

Resources