i have a select dropdown list which has 4-5 fields. As soon as a user selects a value in the dropdown i have to assign a value to a hidden parameter on the page. (Using javascript function Onchange). The same hidden parameter is passed on to a hyperlink url whenever a user clicks on to it on a same page.
This works fine when javascript is enabled, but what to do when javascript is disabled ? i know there is noscript tag but how can i achieve above functionality ? can you give me some example code ?
Many Thanks,
There is nothing that will assign it to a hidden field if you have javascript disabled.
If javascript is disabled you will have to be able to handle the form posting to the server and figuring out on the serverside from the selected item in the form.
When javascript is disabled, then, javascript is disabled. Javascript is not there. So any solutions relying on javascript being there will not work.
If you want to support javascript disabled users also, then you must design the page sconsidering that.
In your case, you might want to use the value of the <option> in the <select> that is submitted when the form is submitted (no matter whether javascript is enabled or not)
The solution to my problem is that i created a url and then overwrite it using noscript tag. on click i was calling a javascript function which was again overwriting the same .
thus when javascript was enabled, onclick function was sending it to popup and when javascript was disabled the noscript tag was overwriting it and redirecting to a another page.
Related
I have two form elements; a SELECT drop down list which serves as an input for a javascript function, and a TEXTAREA which also is an input to the same javascript function. The textarea input needs to be submitted to PHP on the server more or less simultaneously with its use by the local javascript. Ideally, both the javascript function and the $_POST submission to the server would be triggered by the same button click, but I have not been able to get this to work because use of the textarea input by the javascript function prevents it being submitted to the server and vice versa (both these actions need the same data apparently causing interference. I have successfully worked around this problem by triggering the DOM submit() to the server with an onmouseout attribute on the input button.
The problem I now have is that the page refreshes wiping away the input values when the textarea input is submitted to the server. I don't want this to happen: I want the selection from the dropdown list to remain selected, and the text that was input to the textarea to remain in the textarea to ramain after submission. I have tried with the elements inside FORM tags and outside - page gets refreshed wiping away the values either way. There are many similar questions and suggested solutions posted on StackExchange, but after spending many hours trying many of them, I have yet to find one that works for me. Basically, they fall into to categories: ones that prevent the submit such as preventDefault and return false, and ones that don't prevent the refresh or don't work at all such as various javascript/jquery submit methods. To me, such submit methods beg the question of how does the server know anything about the method used to send the submit (other than whether it is GET or POST)? Doesn't the php code on the server receive the same $_POST array regardless of the method used to send it? How would it know the difference between an html form submit, a DOM submit or a javascript/jquery submit? It is not surprising that they all trigger the same page refresh in response.
It seems like there surely should be some simple way to retain the form values after submit because surely there are many times one would want to do this.
P.S. I am no fan of jquery, I found ajax to be much easier before jquery was created. That said, at this point I would appreciate anything that works. I have almost no familiarity with jquery so please, for any responses that use jquery, please give an example of how it would be implemented in my case (where it would be placed and how it would be triggered).
PreventDefault, return false, all manner of javascript and jquery submits, removing the FORM tags, sending the return to a hidden iframe
<select id="thisselection" class="sameline"><option selected>Select this</option></select>
<script>
function sendTextarea() {
document.getElementById("pform").submit();
}
</script>
<form action="" name="pform" id="pform" method="post">
<textarea id="text" class="sendbox" name="text" cols="45" rows="10">Hello world</textarea>
</form>
<input type="button" value="Send" id="pform" onclick="myFunction.speak($('#text').val(),$('#thisselection').val());" onmouseout= "sendTextarea();"
/>
Everything works OK but I have not found a way to send the textarea input to the server without triggering a page refresh.
I wish I could simply prevent the page refresh, but lacking a means to do so, it is possible to save and restore the form values after submit (as suggested by ADyson. There is something in html5 called localStorage or sessionStorage, and there are ready-made scripts that make it easy to use, including savy.js and formsaver.js There are several of them at https://www.jqueryscript.net/tags.php?/localStorage/ savy.js works for my purpose
Hi I am working on DOJO website and I need to get the dropdown selected value without redirecting to another page using DOJO script or Plain javascript(No jquery, because dojo website not supporting Jquery).
Here is my scenerio
View account
View payment
address change
FAQ
You want the value selected from a drop down box but the act of selecting the value in the first place causes a redirect? You mean the values are coded as links? If so then you need to find the code where the value is used as a link and write some condition to get the value rather than let the click redirect.
If you just want the currently selected value then you need to find the same code, where it was processed as a link, and set a variable there that you can use for your purposes.
We have a required field on a page where the user has to select Gender which is a radio button with options Male and Female.
What we are finding is that there are cases when the entity has no gender stored in the database. There is javascript on the page
that does not allow user to leave the page without selecting a value. I am trying to figure out if there is a way to find out
continue without selecting a value. Would anyone be able to provide some insight as how it can be done ?
If I disable the javascript the page does not even submit. So there is another way that the user is able to skip a required field. Any ideas ?
Thanks in advance.
It's a good idea to have a back-end form validation check, as well as front-end. That way if users disable JavaScript, or find ways to bypass the front-end form validation check, the back-end will also check the form for errors.
Also, you can just set a default for the radio button, by adding the checked="checked" attribute to any of the radio button genders. This way the user will have a gender radio button already selected by default.
You may also add the <noscript></noscript> tags to your page to check if the user has JavaScript enabled. If the user does not have JavaScript enabled, your page can display a message that the user needs to enable Javascript to use your site.
More info here: http://www.w3schools.com/tags/tag_noscript.asp
It could be done using development tools (like the one we get by pressing F12 on Google Chrome) in modern browsers. As the validation is done through javascript, ie client side, a user can manipulate it from the browser.
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.
I have a page that will cause an error if a user tries to click too many buttons at one time (for the impatient user) and therefore need to DISable any button (all defined by a JS onclick function) on the page until it is refreshed (with new data sent via the server using Java.) What is the best method to do this, and is there a way to do it with jQuery?
You would have to find all types of buttons using something like this..
$('input[type="submit"], button')
and loop through the returned array and do .attr('disabled','disabled'); on the item in each iteration.
How about simply calling this when you want to disable the buttons:
jQuery('input[type="button"]').attr('disabled', 'disabled');
That will disable all inputs of type button on the page. Of course, as soon as you reload/replace the page contents, the new buttons will not be disabled. You can also just disable all inputs if that's easier.
Fiddle: http://jsfiddle.net/duffmaster33/xDMux/
The single best solution is to use the BlockUI plugin for jQuery. It accomplished everything I needed and more. http://www.malsup.com/jquery/block/