Im trying to build some JS to add a date in format dd-MoN-yyyy (10-OCT-2017) when certain radios are selected and submitted. Below is a basic skeleton of my form:
<html>
<body>
<form method="post" action="https://sample.sample.com" onsubmit="return setform(this);">
<input type="hidden" name="OPT_DOWN_FREQ_DATE" value="">
<input type="radio" name="OPT_DOWN_FREQ" value="D" id="daily">
<input type="radio" name="OPT_DOWN_FREQ" value="W" id="weekly">
<input type="radio" name="OPT_DOWN_FREQ" value="B" id="biweekly">
<input type="radio" name="OPT_DOWN_FREQ" value="A" id="all">
<input type="image" src="sample.submit.button" name="submit" value="submit" class="bnt" id="subBtn"></td>
</form>
</body>
</html>
So whenever a OPT_DOWN_FREQ radio it selected, we should submit dd-MoN-yyyy to field OPT_DOWN_FREQ_DATE
Any help would be appreciated!
Add a change listener to the radio button group. From there you can add a handler to add the value of the selected radio button to the input you need it at.
Depending on how you plan to pass around the date information, you can format it before setting the radio input values, or during runtime.
A few things to note: don't forget to add your self-closing tags, and you also have a random /td lurking around there.
$(document).ready(function(){
$('input[name="OPT_DOWN_FREQ"]').change(function(){
var dateString = this.value;
// format dateString as needed, if dateString is a timestamp.
$('input[name="OPT_DOWN_FREQ_DATE"]').val(dateString); // Set the value of OPT_DOWN_FREQ_DATE
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="https://sample.sample.com" onsubmit="return setform(this);">
<input type="text" name="OPT_DOWN_FREQ_DATE" value=""/>
<input type="radio" name="OPT_DOWN_FREQ" value="D" id="daily"/>
<input type="radio" name="OPT_DOWN_FREQ" value="W" id="weekly"/>
<input type="radio" name="OPT_DOWN_FREQ" value="B" id="biweekly"/>
<input type="radio" name="OPT_DOWN_FREQ" value="A" id="all"/>
<input type="image" src="sample.submit.button" name="submit" value="submit" class="bnt" id="subBtn"/>
</form>
Related
html
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/jquery-ui.js"></script>
<body>
<form id="applicationForm" method="POST" class="valida en" action="../../lib/air-condition-request.php">
<label class="serviceDay">
<input type="checkbox" id="airConDaily">Daily
<input type="checkbox" id="airConMon" name="monday" value="1">Monday
<input type="checkbox" id="airConTue" name="tuesday" value='1'>Tuesday
<input type="checkbox" id="airConWed" name="wednesday" value='1'>Wednesday
<input type="checkbox" id="airConThur" name="thursday" value='1'>Thursday
<input type="checkbox" id="airConFri" name="friday" value='1'>Friday
<input type="checkbox" id="airConSat" name="saturday" value='1'>Saturday
<input type="checkbox" id="airConSun" name="sunday" value='1'>Sunday
<input type="checkbox" id="airConPh" name="ph" value='1'> Public Holiday
</label>
<input type="hidden" name="type" value="2">
<input type="submit" name="button" id="button" value="Submit" class="all-btn">
</form>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<script src="../../js/form-validation.js"></script>
</body>
form-validation jquery
$('#itemForm').validate({
errorClass:"validationError",
rules:{
},
messages:{
}
});
Hello all,
I check many answers about at least one selected checkbox but they cannot solve my question.
How the system shows error if the the user does not choose any checkbox.
Thank you
I don't really know if it fits your Use Case but you can give your Checkboxes all the same name and give them different values, in your validation you then do a simple required check
<input type="checkbox" id="airConTue" name="weekday" value='tuesday'>Tuesday
<input type="checkbox" id="airConWed" name="weekday" value='wednesday'>Wednesday
<input type="checkbox" id="airConThur" name="weekday" value='thursday'>Thursday
rules: {
weekday: {required: !0}
}
Edit: What might even be better if you did an array, as this will make serialization easier!
<input type="checkbox" id="airConTue" name="weekday[]" value='tuesday'>Tuesday
<input type="checkbox" id="airConWed" name="weekday[]" value='wednesday'>Wednesday
<input type="checkbox" id="airConThur" name="weekday[]" value='thursday'>Thursday
rules: {
"weekday[]": {required: !0}
}
I want to check all checkboxes using javascript. When I click on submit button all the checkboxes should be checked. However all the checkboxes are checked just for a few seconds.
What am I doing wrong?
html:
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading<br/>
<input type="checkbox" name="h" value="2" id="g">php<br/>
<input type="checkbox" name="h" value="3" id="g">playing<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming<br/>
<input type="checkbox" name="h" value="5" id="g">Coding<br/>
<input type="submit" name="sub" value="submit" onclick="checkall(document.myform.h)" >
</form>
javascript code:
<script type="text/javascript">
function checkall(chk){
for(var i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
</script>
the problem is you are using a submit button within a form, which on click will submit the form.
So one solution is to change the button form a submit button to a normal button which will not trigger the submit of the form.
function checkall(chk) {
var i;
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
//return true;
}
}
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading
<br/>
<input type="checkbox" name="h" value="2" id="g">php
<br/>
<input type="checkbox" name="h" value="3" id="g">playing
<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming
<br/>
<input type="checkbox" name="h" value="5" id="g">Coding
<br/>
<!--<input type="radio" name="gen" value="male">Male<br/>-->
<!--<input type="radio" name="gen" value="female">Female<br/>-->
<input type="button" name="sub" value="submit" onclick="checkall(document.myform.h)">
</form>
You created a form.And form will be submit after click on submit button.You can use following approach to select all checkbox only.
step 1- Write following statement in html.
<input type="checkbox" name="h" value="1" class="g">Reading<br/>
<input type="checkbox" name="h" value="2" class="g">php<br/>
<input type="checkbox" name="h" value="3" class="g">playing<br/>
<input type="checkbox" name="h" value="4" class="g">Gaming<br/>
<input type="checkbox" name="h" value="5" class="g">Coding<br/>
<input type="button" name="sub" value="check all" id='custom_button'>
step 2- Write following statement in js file-
jQuery('#custom_button').click(function(){
jQuery('.g').each(function() { //loop through each checkbox
this.checked = true; //deselect all checkboxes with class "checkbox1"
});
});
Above statement will select all checkbox after click on button.
If you want to check example please use this link - http://jsfiddle.net/oxg3p1ny/1/
your code is working just stop from form submit will solve your problem use <form method="post" name="myform" onsubmit="return false"> and use ajax to get data.
Working Fiddle
I created a form which contains two Radio Buttons.
Each radio button displays a separate form, when Clicked.
When a button is un-clicked, the form disappears from view (it is not shown)
I also added a second JavaScript Function, which disables the "SUBMIT" button, if none of the radio buttons are clicked.
The program works fine..........except I have the following problems :
(a) For some reason, I am able to click BOTH radio buttons! Radio-buttons should not allow for more than one selection. But, in my form, both radio buttons are clickable
(b) the second JS function is not working; disabling the SUBMIT button is easy. But...........when I click either of the radio buttons, the SUBMIT button does not enable.
Here is the first JS function (for "hiding" the forms under each radio buttons)
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#firstformContainer').toggle('show');
jQuery('#secondformContainer').hide();
}
if (c.value == "1") {
jQuery('#secondformContainer').toggle('show');
jQuery('#firstformContainer').hide();
}
};
</script>
And the second function, for disabling the SUBMIT button :
<script type="text/javascript">
function fCheck() {
document.my_form.submit.disabled
=!(document.my_form.formselector1.checked ||
document.my_form.formselector2.checked);
}
</script>
And here is the form :
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector"
id="formselector1" onClick="displayForm(this); fCheck()"></input>Input
Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname"
name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
<input value="2" type="radio" name="formselector"
id="formselector2" onClick="displayForm(this); fCheck()">
</input>Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname"
value="$surname">
</dd>
</form>
</div>
<br>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
What am I missing?
UPDATE
I have solved the RADIO BUTTON problem.
Now, I need to fix the second problem, with the JS function : fCheck ()
It is not working.
I have feeling it's because : I am not calling BOTH functions correctly in the ONCLICK.
<input value="1" type="radio" name="formselector" id="radio1"
onClick="displayForm(this); javascript:fCheck()"></input>
<input value="2" type="radio" name="formselector" id="radio2"
onClick="displayForm(this); javascript:fCheck()"></input>
You cannot nest forms. This makes the second radio button not inside the form and hence it allows you to select both at the same time. Rewrite your html like this
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
<input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname" name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname" value="$surname">
</form>
</div>
<br>
How can I get radio button's value before form submission through PHP or jQuery?
It would be great if anybody could suggest some way :)
You can easily do it with Javascript.
<script>
function getRadioValue(id) {
var radioBtn = document.getElementById(id);
alert(radioBtn.value);
}
</script>
<form action="" method="post">
<input type="radio" id="btn1" name="123" value="value1" onclick="getRadioValue(this.id)"/>
<input type="radio" id="btn2" name="123" value="value2" onclick="getRadioValue(this.id)"/>
<input type="radio" id="btn3" name="123" value="value3" onclick="getRadioValue(this.id)"/>
<input type="submit">
</form>
var value = $('#your-form :radio:first').val();
Drive your users nuts:
<form onsubmit="alert(this.fooBar.value);" action=""
onclick="alert(this.fooBar.value);">
<div>
<input type="text" name="fooBar" value="foo bar">
<input type="submit">
</div>
</form>
I want to change the value of hidden input field when radio buttons selected :
<input type="radio" name="r1" value="10" />10
<br/>
<input type="radio" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
for example when user click on one the buttons the value of hidden field change to that value.
Use the onClick property:
<input type="radio" name="r1" value="10" onClick="document.getElementById('hidfield').value=this.value"/>10
<br/>
<input type="radio" name="r1" value="45" onClick="document.getElementById('hidfield').value=this.value"/>
45
<br/>
<input type="hidden" name="sum" value="" id="hidfield" />
You can try for example
<input type="radio" id="radio1r1" name="r1" value="10" />10
<br/>
<input type="radio" id="radio2r1" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
jQuery("input[id^='radio']").click(function() {
jQuery("input[name='sum']").val(jQuery(this).val());
}
So then when user click on each radio we handle it by various id with same start.
Using jQuery it would be:
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='sum']").val() = inputValue;
$(":hidden[name='sum']").name() = "lalala";
});
I've not double checked that code so it might need a little tweaking.
hook into the onclick event for the radio button "r1". Normally I'd suggest the onchange event but in IE it isn't fired until the user "blurs" the radio button.
If you are using a framework like jQuery, hook in the events in a nice unobtrusive manner... but if you want a quick n dirty solution, just add the events inline.
<input type="radio" name="r1" value="10" onclick="doIt(this);"/>10
<br/>
<input type="radio" name="r1" value="45" onclick="doIt(this);"/>45
<br/>
<input type="hidden" name="sum" value="" />
<script>
function doIt(obj){
//alert('my value is now: ' + obj.value);
obj.form.elements['sum'].value = obj.value;//set hidden field to radio value
}
</script>