Detecting if javascript is enabled with hidden form field - javascript

It may seem like a repeat question, but I have not found an appropriate answer in the hundreds of answers about detecting whether or not javascript is enabled.
My home page will have a form that requires a zip code to be entered. If the entered zip code is in more than one county, then the visitor will be returned a page to select their state, and then their county. If they have js enabled I can provide them with a nice dynamic dependent drop-down menu of counties once they select a state. Without js I would have to return another page with the county options.
The home page doesn't need js. Is there a way to use a hidden field in the zip code entry form that would let the next page know if js is enabled?

Create a hidden field in the form that contains zipcode and fill it on the homepage with js. Once the form is send you can check if the field is empty which would indicate that js is not enabled and render the result page accordingly.

Related

How to make an element fixed in a dropdown based upon the page redirected from?

Currently have a fully functional form that has a dropdown field that lets the user choose products. I want to ensure the dropdown field is locked to product_x if the user has been redirected to the form from product_page_x (theres a total of 8 products) and the dropdown remains accessible if user has been redirected from any other page except the product pages.
Edit: What I've thought so far is to assign different IDs to the buttons redirecting from each product page and assign null ids to buttons on all pages except product pages and then use js to implement an switch statement that displays a fixed element field according to ID and the defaults to the dropdown. Is this the most optimal approach? I've attached my dropdown and a supposed src page id.
Open to both php and js suggestions. The whole website has been developed using Laravel.
Would appreciate both logical and functional help.
Final edit: Made form redirect buttons return an id (unique to every product page) and then used php to get that id. Used a switch to display simple readonly text field with product name nested inside an if statement that checks if switch var (i.e. id has been set) and then echoed the dropdown in the else block. Open to suggestions about how this could be better.
you can use js to select a value and then make the dropdown unclickable.
var pageType= "<?php echo ($pageType); ?>" ;
if (pageType=='product'){
$("#dropdown").val('product_x');
$("#dropdown").css("pointer-events","none");
}
It is difficult to give you a proper code without seeing your page design, but this is the basic format on how you can achieve this.$pageType will have to be defined from controller itself.

Reload partial and retain form values

When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).

Over-shadowing label when pre-populating value to form

I'm using Materialized CSS and it works very well for me. However when I added more dynamic behaviour to my app, for example when I'm pre-populating form with values and appending them to the layout, here is the photo of that:
That happens only when I preset the value to form on/prior to page load (because my form html is generated by server side).
However if I were to click into the quantity field then quantity would go back to its place and it would stay there.
How do I make it so that it stays up even when I pre-populate the form value? Is there a class I need to add to it (label or input) or JavaScript or something that I can put out there.
If you want to pre-fill text inputs, use Materialize.updateTextField(); as the docs says

pass variable to dynamically populated drop down

We have an online application html form that pulls the open positions into a menu/list select field from an xml file. You can see the form here: enter link description here
For each open position there is a job posting page with an apply now button which links to the application page. We'd like to pass the position to the menu/list select field in the form when a user hits the apply now button.
So If I make a form on the job posting page, and use a hidden field to hold the position from that page, then how do I pass that variable to the online application to select the position.
You need to set the default value to your select box.
After you load your page,
document.getElementById("selectbox").value = hiddensValue;

Suggestion needed for NON JavaScript version of an input autocomplete

I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?
Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.
If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.
Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.
Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).

Categories

Resources