So I have been trying to create a dynamic form that changes the value of the offered packages, by choosing what type of customer the user is.
My JSFiddle of the section of the form:
https://jsfiddle.net/mullern/ch8z0hry/4/
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
I searched the internet for hours trying different solutions. In the end I read through the W3schools page about JQuery event methods and tried to piece together what seemed right to me. In the JSFiddle I also included a script to check if the values of the Radiobuttons. I noticed that the JSFiddle seems to work but on my own private server it doesn't. What am I doing wrong?
Edit: I am currently running the page on my synology NAS with Webstation.
You have error javascript in console? And you have included jquery?
Try insert this:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
I have been Fiddling around with the code and came to the conclusion that it actually works fine. You can go check out my JSFiddle to see the final result:
https://jsfiddle.net/mullern/no0qfqhh/
The code I started with was actually already correct.
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
Using the button at the end made checking the code very simple, especially for future testing when it comes to adding more values and displaying them in the end.
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="prices">
<fieldset data-role="controlgroup" id="pricetag">
<label><input type="radio" name="price" id="minimal" value checked="checked">Minimal</label>
<label><input type="radio" name="price" id="soundonly" value>Sound Only</label>
<label><input type="radio" name="price" id="soundandlight" value>Sound and Light</label>
<label><input type="radio" name="price" id="totalpartypackage" value>Total Party Package</label>
<label><input type="radio" name="price" id="custom" value="">Custom</label>
</fieldset>
</div>
<script>
function display() {
var a = document.getElementById('minimal').value;
var b = document.getElementById('soundonly').value;
var c = document.getElementById('soundandlight').value;
var d = document.getElementById('totalpartypackage').value;
alert("The value of the radio buttons are: " + a + " and " + b + " and " + c + " and " + d);
}
</script>
<button onclick="display()">Check</button>
Thank to everyone that contributed in any way.
Related
This is a simplified version of a page I've been working on; I got some basic validation working here but I want to integrate with the jQuery validator to get inline error messages instead of just alert boxes.
<html>
<head>
<title>pick a box, its contents will help you on your way!</title>
<script src="jQuery-1.4.4-min.js"></script>
<script src="jQuery-validate.js"></script>
</head>
<body>
<form id="fred">
<input class="Notes8" name="Notes8~1" id="Notes8~1" type="checkbox" value="Yes"> Option 1<br>
<input class="Notes8" name="Notes8~2" id="Notes8~2" type="checkbox" value="Yes"> Option 2<br>
<input class="Notes8" name="Notes8~3" id="Notes8~3" type="checkbox" value="Yes"> Option 3<br>
<script type='text/javascript'>
jQuery(function($) {
function validateMultiple (selector, n, isExactlyN) {
const totChecked = $(selector).filter(':checked').length;
return !(isExactlyN ? totChecked == n : totChecked >= n);
}
jQuery.validator.addMethod('.Notes8',
function(value, element) {
return validateMultiple('.Notes8', 1);
},
'Please check at least one check box.');
});
</script>
<button type="submit">SUBMIT!</button>
</form>
</body>
</html>
Problem is, the jQuery.validator.addMethod call doesn't seem to be working; no validation takes place and if I put alert("FRED"); inside the function(value, element) then nothing is displayed, indicating that the validator method never got wired up properly. Why is this? How can I get the validation function to execute when I submit the form? I see no JavaScript errors in the browser console.
You forgot to call validate method: $("#fred").validate();. There was also issue with your validation code - I removed unecessary negation. Also you don't need dot in name paramater in addMethod.
<html>
<head>
<title>pick a box, its contents will help you on your way!</title>
<script src="jQuery-1.4.4-min.js"></script>
<script src="jQuery-validate.js"></script>
</head>
<body>
<form id="fred">
<input class="Notes8" name="Notes8~1" id="Notes8~1" type="checkbox" value="Yes"> Option 1<br>
<input class="Notes8" name="Notes8~2" id="Notes8~2" type="checkbox" value="Yes"> Option 2<br>
<input class="Notes8" name="Notes8~3" id="Notes8~3" type="checkbox" value="Yes"> Option 3<br>
<script type='text/javascript'>
jQuery(function ($) {
function validateMultiple(selector, n, isExactlyN) {
var totChecked = $(selector).filter(':checked').length;
return (isExactlyN ? totChecked == n : totChecked >= n);
}
jQuery.validator.addMethod('Notes8',
function (value, element) {
return validateMultiple('.Notes8', 1);
},
'Please check at least one check box.');
});
$("#fred").validate();
</script>
<button type="submit">SUBMIT!</button>
</form>
</body>
</html>
I use the following code for my radio button and date field
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" name="datefilter" value="after" >
Changes take effect on:
<input type="text" name="date_filter" value="<? echo date('m-d-Y'); ?>">
When the user clicks on the text field, I would like the radio button with the value "after" to be selected, in case the forget to enter the value. I am a php hack, but don't know javascript much at all. If it will make it easier I can definitely add to the radio fields.
There is already a javascript function running that calls a date picking calendar popup when the user selects the text field. Don't imagine that will
Thanks!
Add some jQuery to it like this:
Example page on JSFiddle
Code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
<script type="text/javascript">
$(document).ready(function () {
$('#date_filter').click(function () {
$("#after").attr('checked', true);
});
});
</script>
</head>
<body>
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" id="after" name="datefilter" value="after">
Changes take effect on:
<input type="text" id="date_filter" name="date_filter" value="2013-01-01">
</body>
</html>
I have the following code; I want to make sure that submit does not actually post to the page specified by action unless one of the two radio inputs has been selected. I have tried multiple variations of this and other code, and cannot seem to figure out whats wrong. Whether the radio buttons are selected or not it still posts to somepage.py.
<html>
<head>
<title>
Test Page
</title>
<script language="JavaScript">
function validate(formEntry) {
if (formEntry.Q1.q11.checked != true && formEntry.Q1.q12.checked != true)
return false;
return true;
}
</script>
</head>
<body>
<form action="somepage.py" method="POST" onsubmit="return validate(this);">
<input type="radio" name="Q1" id="q11" value="1" />
<input type="radio" name="Q1" id="q12" value="2" />
<input type="submit" name="Submit" />
</form>
</body>
</html>
If you make one button checked by defualt, then one will always be checked:
<input type="radio" name="Q1" id="q11" value="1" checked>
<input type="radio" name="Q1" id="q12" value="2" >
Or the function can be simply:
function validate(formEntry) {
return formEntry.Q1[0].checked || formEntry.Q1[1].checked ;
}
if either is checked it will return true, otherwise false.
if (!formEntry.Q1[0].checked && !formEntry.Q1[1].checked)
Trying to access input by form_name.input_name.input_id is really strange.
Use jquery validation. Checkout this link for details
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Demo page here:
http://jquery.bassistance.de/validate/demo/
It seems to work, look at:
http://jsfiddle.net/EEgea/
Maybe you'd better use a framework like JQuery to prevent javascript flaws between different browsers
Or use a validation framework like JQuery validation, I highly recommend that.
try your function like :-
function validate(formEntry) {
var radiobtn=document.getElementsByName('Q1');
if(!(radiobtn[0].checked || radiobtn[1].checked))
return false;
return true;
}
how to copy some text to the clipboard with jquery or javascript, from google. i know there
is a pludgin named zeroclipboard http://code.google.com/p/zeroclipboard/ can do this with
cross browers. the instructions link http://code.google.com/p/zeroclipboard/wiki/Instructions
but when i tested it on my site. i set it to copy text optionally . it can't work.
my test link is http://xanlz.com/copy/1.html
it always copys all the values. even i uncheck some check box. may be the value doesn't be changed. but when i alter() the variable, the value is ok. how to correct it? thank you.
i want it can copy the checked box value. if the box unchecked, then don't copy its value.
EDIT :
Took me a while to figure this out (didn't have the correct references to the .swf), but here is a complete working example (tested IE 8 & Firefox 4)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://zeroclipboard.googlecode.com/svn/trunk/ZeroClipboard.js" ></script>
<script type="text/javascript" >
$(document).ready(function(){
var checkall = $('#checkall');
var boxes = $('input[type="checkbox"]').not(checkall);
checkall.click(function () {
boxes.attr('checked', this.checked);
});
boxes.change(function() {
checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
});
ZeroClipboard.setMoviePath('http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.glue("copyvalue");
clip.addEventListener( 'onMouseOver', function(){
var text = ' '; //Make this a space since we can't copy nothing...
$('input.forminput:checked').each(function() {
text += $(this).val() + "\n";
});
clip.setText(text);
});
}) ;
</script>
</head>
<body>
<input class="forminput" type="checkbox" value="test one" checked="checked" name="VD1">
<br>
<input class="forminput" type="checkbox" value="test two" checked="checked" name="VD2">
<br>
<input class="forminput" type="checkbox" value="test three" checked="checked" name="VD3">
<br>
<input class="forminput" type="checkbox" value="test four" checked="checked" name="VD4">
<br>
<input class="forminput" type="checkbox" value="test five" checked="checked" name="VD5">
<br>
<input id="checkall" type="checkbox" checked="checked" name="checkall">
<input id="copyvalue" class="button" type="button" value="copy test">
</body>
</html>
ORIGINAL:
You don't have a click event for your button.
You need to add something like:
var clip = new ZeroClipboard.Client();
$("#copyvalue").click(function(){
var text = '';
$('input.forminput:checked').each(function() {
text += $(this).val() + "\n";
});
//alert(text);
clip.setText(text);
});
If you don't like to use (or are not allowed) to rely on flash (which I personally would not), I think you're better off creating a text area with the text (or serialized data) preselected with an instruction for the user to copy and later paste the data.
You can make the instruction feel more native by sniffing for the operating system and give different instructions on how to copy and paste (e.g. ctrl+c for windows/linux or ⌘-C for mac).
Maybe not as sexy, but way more foolproof...
This following line works as expected in Firefox but IE returns 'undefined'.
var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();
Here is a standalone sample that you can run...
Note the problem seems to be the use of '.' and '[]' in the name of the radio element. However this is how ASP.NET MVC renders them. Here is an example which works fine in Firefox but fails in IE.
<html>
<head>
<title>Testing radio selection jquery in IE 8</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
<input name="selected.Option[0]" id="selected_Option1" type="radio" value="1" checked="checked" />
<label for="selected_Option1">Option 1</label>
<br />
<input name="selected.Option1" id="selected_Option2" type="radio" value="2" checked="checked" />
<label for="selected_Option2">Option 2</label>
<br />
<input name="selectedOption[2]" id="selected_Option3" type="radio" value="3" checked="checked" />
<label for="selected_Option3">Option 3</label>
<br />
<input name="selectedOption3" id="selected_Option4" type="radio" value="4" checked="checked" />
<label for="selected_Option4">Option 4</label>
<br />
<span id="displaySelectedChoice1">No value selected.</span>
<br />
<span id="displaySelectedChoice2">No value selected.</span>
<br />
<span id="displaySelectedChoice3">No value selected.</span>
<br />
<span id="displaySelectedChoice4">No value selected.</span>
</form>
<script language="javascript" type="text/javascript">
var selectedChoice = $("input[name='selected.Option[0]']:checked").val();
$('#displaySelectedChoice1').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selected.Option1']:checked").val();
$('#displaySelectedChoice2').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selectedOption[2]']:checked").val();
$('#displaySelectedChoice3').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selectedOption3']:checked").val();
$('#displaySelectedChoice4').html('You have selected: ' + selectedChoice);
</script>
</body>
</html>
Notice that the 2nd, 3rd and 4th all work but the 1st returns 'undefined' for IE. Its the only one with both '.' and '[]'.
Thanks
Try to escape the square braces in the selector, I don't think IE likes 'em too much. Also, you forgot to close the attribute selector.
var selectedChoice = $('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();
Or with escaped square braces and periods:
var selectedChoice = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]:checked', '#myForm').val();
Yes, there are 2 backslashes.
I think this will work:
var selectedChoice =
$('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();
UPDATE:
Replace your JS with this:
var $radio = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]');
$radio.change(function() {
$("#displaySelectedChoice")
.html("You have selected: " + $radio.filter(":checked").val());
});
See working jsFiddle demo
Your select test is invalid javascript:
var selectedChoice = $('input[name='my.test[0].SelectedOption:checked', '#myForm').val();
^--embeded quote breaks the string
This should work better:
var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();
Note that the :checked portion is not in the name= portion
I think you need to escape those [] inside your selector:
var selectedChoice = $("input[name='my.test\\[0\\].SelectedOption']:checked", '#myForm').val();
http://api.jquery.com/category/selectors/
At the top it has an entire paragraph about escaping.
I find your code pretty complicaded. Try something like this:
<form id="myForm">
<input name="my.test[0].SelectedOption" class="test" type="radio" value="1"/>
<label for="my_test_0__SelectedOption_1">Option 1</label>
<br />
<input name="my.test[0].SelectedOption" class="test" type="radio" value="2"/>
<label for="my_test_0__SelectedOption_1">Option 2</label>
<br />
<input name="my.test[0].SelectedOption" class="test" type="radio" value="3"/>
<label for="my_test_0__SelectedOption_1">Option 3</label>
<br />
<span id="displaySelectedChoice">No value selected.</span>
</form>
<script language="javascript" type="text/javascript">
$(".test").change(
function () {
var value = $(this).val();
$("#displaySelectedChoice").replaceTo("you choose: "+value)
}
)
</script>
Dont know wich version of jquery youre using, but even though I red about the new version of jquery that IE has a problem to "see" what you want with this ":checked".
Anyways avoid using this atribute for radio because, well the only checked radio is the one changed anyways.
My point is make a simpler code, it might help.