Jquery Mobile showing double form labels after form submit - javascript

This is my first time using jquery mobile... I have form items like this -
<label for="five_miles">5 Miles</label>
<input type="radio" name="distlim" value="5" id="five_miles">
As it says in the documentation, to label form elements, you must use a label tag and the for should = the id of that form item.
And it works fine. I load the page, the form elements are being generated and look good.
But after I submit the form back to the same page, it shows the form with the generated button elements with the label text inside the element but also it shows the text for the label above each form element again.
The code generated by jquery looks like this -
<div class="ui-radio">
<label for="yes" class="ui-btn ui-corner-all ui-radio-on ui-btn-inherit ui-btn-icon-left">Yes</label>
<input type="radio" name="transportation" class="transyes" id="yes" value="Yes" checked="">
</div>
<label for="yes">Yes</label>
I am thinking that maybe the dom is being loaded and the the jquery is loading afterwords and adding the other label element. Only happens after the form submit.
Tried putting my jscript files in the footer and in the header, and I tried putting the label above and below the form elements. ...not sure what else to do.
Thanks.

I overlooked in the docs that you have to wrap radio buttons and checkboxes with
<fieldset data-role="controlgroup"></fieldset>

Related

How to enable HTML elements on submit

I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm

JQuery UI Buttonset in UpdatePanel

I have a server control which has a couple of radio buttons on it. I run a startup javascript script file which applied the JQuery UI buttonset() on them.
$(document).ready(function () {
$('#radiobuttonpanelid%').buttonset();
});
Everything works perfectly when outside of an UpdatePanel. If the server control is inside an update panel, no matter what I try, i get "Error: Object doesn't support property or method 'buttonset'". I get this message even the first time I open the page.
Update:
Rendered HTML when inside of the update panel looks like this:
<DIV>
<SPAN>
<INPUT name=ct1 id=ct1 type=radio CHECKED value=1>
<LABEL for=ct1>1</LABEL>
</SPAN>
<BR>
</DIV>
<DIV>
<SPAN>
<INPUT name=ct2 id=ct2 type=radio value=2>
<LABEL for=ct2>2</LABEL>
</SPAN>
<BR>
</DIV>
Anyone came across this issue?

onchange select radio isn't checked

<input type="radio" name="radiobutton" id="1_1 value="1. Жетоны" "/>
<select id="1_1" onchange="document.GetElementById(this.id).checked=true;">
How come when I change option of select, radio isn't checked?
Thanks for carefuly!
But there is something else wrong, because it does not work too:
<input type="radio" name="radiobutton" id="1_1" value="1. Жетоны" "/>
<select name="1_1" onchange="document.GetElementById(this.name).checked=true;">
Thanks to shashi!
There are two things wrong:
- Your input tag is invalid HTML - it's missing a closing double-quote on the id attribute's value, and you have an out-of-place double-quote at the end of the tag.
- It looks like you're trying to use the same id for both the input and select tag. You can't do that; their ids must be different.
Replace,
document.GetElementById(this.id) with document.getElementById(this.id);
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
Element IDs must be unique in a page, however element names can be repeated. Also, form controls must have a name to be successful (i.e. be submitted to the server).
So you can fix the problem by using references to form controls (and fixing the markup):
<form>
<input type="radio" name="radiobutton" id="1_1" value="1.blah">
<select name="whatever" id="1_1" onchange="this.form.radiobutton.checked=true;">
<option>0
<option>1
</select>
<input type="reset">
</form>
Note that you need a reset button, otherwise it's impossible to uncheck the radio button without reloading the page (or the user running a script).

Button with radio button functionality

I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)
jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.
First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.

jQuery: having radio buttons and a textarea update hidden form fields

Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.
You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});
For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?

Categories