onclick radio input display php - javascript

I want to execute php code base on radio result html example below.
<form>
<input type="radio" name="type" value="0" checked />Staff
<input type="radio" name="type" value="1" />Client
</form>
in php I can do this
<?php
if($_POST['type'] == 1){
echo "some of my php code";
} else {
echo "my second option php code";
}
?>
but no idea how to implement that code in javascript using onclick

You need ajax. Php is executed before javascript, so it cant change after your click (only if submit and refresh the page).

If you don't need ajax:
Get the DOM element and just add event listeners:
var inputRadio = document.querySelectorAll("input[type='radio']");
for(var i = 0; i < inputRadio.length; i++) {
inputRadio[i].addEventListener('click', function() {
console.log(this); // if you click the radio button,
// it will be logged to the console
});
/*
instead of `addEventListener` you can use:
inputRadio[i].onclick = function() { }
*/
}

You can execute your code after check radio button value. Here I am using on change event.
$('input[name=radioName]').change(function(){
var value = $('input[name=radioName]:checked').val();
if(value == 1){
//do anything
alert(value);
}else{
//do anything
alert(value);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radioName" value="1" /> 1
<input type="radio" name="radioName" value="0" /> 0
var result = $('input[name=type]:checked').val());
if(result == 1){
//"do anything"
} else{
//"do anything"
}

Related

Checkbox Hidden Div Unchecked

I have a checkbox hidden div with text field. If checkbox is checked this text field will showed, but if checkbox unchecked text field not show. This Code :
<script type="text/javascript">
$(function () {
$("input[name='checkbox1']").click(function () {
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
$("#dvcheckbox1").hide('lainnya');
}
});
});
</script>
<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1" style="display: none;">
<?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>
But, How this checkbox is checked if there something value on textfield? and text field shown. Because in form Update, value was show but checkbox is checked. I want checkbox is checked
For example Like this:
Click to show example
Instead use with change event with .toggle(boolean) method:
// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
var $v = $(this).find('input').val();
$("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
return $v.trim().length !== 0;
});
$("input[name='checkbox1']").change(function () {
$("#dvcheckbox1").toggle(this.checked);
});
There are a few things here:
1 - Better if you use document ready, because it waits until all the elements are loaded.
2 - You should hide the element$("#dvcheckbox1").hide('lainnya') when the page is loaded.
3 - A listener in the input:text is a good idea. It enables the checkbox if the textbox is empty.
Please, have a look at the next piece of code:
<div>
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1">
<label for="myValuye"/>
<input type="text" id="myValue" name="myValue" value=""/>
</div>
</div>
<script>
$(document).ready(function() {
$("input[name='checkbox1']").click(function () {
// Always use some logs to check what line are you reaching.
console.log("Clicked checkbox!!!");
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
console.log("Value: " + $("#myValue").val());
$("#dvcheckbox1").hide("lainnya");
}
});
$("#myValue").bind("change paste keyup", function() {
if ($(this).val() == "") {
$("#checkyes1").removeAttr("disabled");
} else {
$("#checkyes1").attr("disabled", true);
}
});
// First of all we hide the #dvcheckbox1
$("#dvcheckbox1").hide('lainnya');
})

How do i check if a specific Radio button is checked among the other radio buttons using Javascript?

I am trying to make javascript check if a specific Radio button is checked among the other radio buttons.
The validation method for checking if any radio button works perfectly:
This is a snippet the HTML code containing the radio buttons:
<form id = "buy" name = "buy" onsubmit = "return valiform()">
<input type="radio" name="Card_type" value="visa" > Visa </input>
<input type="radio" name="Card_type" value="mastercard" > Mastercard</input>
<input type="radio" name="Card_type" value="paypal" > Paypal </input>
<input type="submit" value="Confirm order">
</form>
This is the snippet of the Javascript code regarding the radio buttons:
<script type = "text/javascript">
function valiform(){
var visa = document.buy.Card_type;
var mastercard = document.buy.Card_type;
var paypal = document.buy.Card_type;
var message = "Error!\n";
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
if(validateRadio (document.buy.Card_type))
{
}
else
{
message+= "Please select card.\n";
}
if(message != "Error!\n"){
alert(message);
return false;
}
}
</script>
So far the code works perfectly, but I want the code to check if specifically the Paypal radio button is selected. I cannot do it without inducing an error. Any ideas how to do it?
First change the paypal line to:
<label><input id="paypalRadio" type="radio" name="Card_type" value="paypal"> Paypal </label>
This use this code which will return true if a given radio button is checked:
document.getElementById('paypalRadio').checked
or you could do this without changing anything:
$("td[name=Card_type]")[2].prop("checked", true)
Instead of returning just true, you could have validateRadio() return the value of the checked button. Then you can assign this to a variable.
var selected = validateRadio(document.buy.Card_type);
if (selected == 'paypal') {
...
}
<input type="radio" name="Card_type" value="visa" > Visa </input> is invalid html; <input> is an empty element , where content is not permitted. You can use .addEventListener(), submit event attached to <form> element, .querySelectorAll(), Array.prototype.some(), check the element at index 2 from result of .querySelectorAll() to determine if input element having value equal to "paypal" is checked
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form id="buy" name="buy">
<input type="radio" name="Card_type" value="visa" />
<input type="radio" name="Card_type" value="mastercard" />
<input type="radio" name="Card_type" value="paypal" />
<input type="submit" value="Confirm order">
</form>
<script type="text/javascript">
function valiform(event) {
event.preventDefault();
var radios = this.querySelectorAll("input[type=radio]")
var message = "Error!\n";
function validateRadio(radios) {
return Array.prototype.some.call(radios, function(input) {
return input.checked
})
}
if (validateRadio(radios)) {
if (radios[2].checked) {
alert(radios[2].value + " radio is checked")
}
event.target.submit();
} else {
message += "Please select card.\n";
}
if (message != "Error!\n") {
alert(message);
return false;
}
}
document.getElementById("buy").addEventListener("submit", valiform)
</script>
</body>
</html>

HTML Form Number Type Unique User Input

I am using the code below to ask users to rank (prioritize) which sweets they like the best. The users need to rank from 1-3 (1 being the best)
<form id="form1" name="form1" method="post" action="">
<input type="number" name="cake" id="cake" required="required" max="3" min="1"/>Cake <br />
<input type="number" name="twizlers" id="twizlers"required="required" max="3" min="1"/>Twizlers <br />
<input type="number" name="taffy" id="taffy" required="required" max="3" min="1"/>Taffy <br /><br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
I am using HTML 5 coding to make sure that they only use numbers 1,2, and 3 but how can I make sure they do not use the same number twice? Is there an HTML input code that I can use or is there some javascript code needed? If javascript is needed, what do you suggest?
<script type="text/javascript">
function item() {
cake = Number(document.getElementById('cake').value);
twizlers = Number(document.getElementById('twizlers').value);
taffy = Number(document.getElementById('taffy').value);
if (cake == twizlers) {
alert("Some alert cake or twizlers");
return false;
} else if (twizlers == taffy) {
alert("Some alert taffy or twizlers");
return false;
} else if (taffy == cake) {
alert("Some alert taffy or cake");
return false;
} else {
return true;
}
}
</script>
This will work, otherwise you can use radio button.
You can go with a JS check that the user only rank 1 item with a single value and cant rank that item again. You can use JS to do this.Insert an ID for your input field and then
document.getElementById("your_id").disabled = false;
document.getElementById("your_id").disabled = false;
document.getElementById("your_id").disabled = false;
var var1 = document.getElementById("your_id");
var1.onchange = function () {
if (this.disabled == true) {
document.getElementById("your_id").disabled = true;
}
}
Thus check this for three items.

get button value javascript expression language

I have a sumbit button gets his value from an expression language in foreach jstl as showin below ,I want when click three buttons get their values to the three hidden input respectively,but when run this code returns the first value in expression language
<script>
function myfunction()
{
if(document.getElementById('demo1').value=""){
document.getElementById('demo1').value=document.getElementById('btn').value;
}else if(document.getElementById('demo2').value=""){
document.getElementById('demo2').value=document.getElementById('btn').value;
}else
{
document.getElementById('demo3').value=document.getElementById('btn').value;
}
}
</script>
<html>
<form:form action="Search" method="post">
<input type="hidden" name="answer1" id="demo1">
<input type="hidden" name="answer2" id="demo2">
<input type="hidden" name="answer3" id="demo3">
<c:forEach var="item" items="${group.subGroups}">
<input id="btn" type="submit"
value="${item.subGroupName}" onclick="myfunction()">
</c:forEach>
<form:form>
</html>
First of all, testing for equality is made using ==not = which is used for assigning values. So
if(document.getElementById('demo1').value=""){
[...]
}
becomes
if (document.getElementById('demo1').value == "") {
[...]
}
And then, if you have multiples buttons output by your JSTL forEach (the <input id="btn"...> ones), you must provide multiple ids or use another way of referring to them; otherwise, how can the browser know which button you are trying to access ?
The other way would be something like :
function myfunction(element)
{
if (document.getElementById('demo1').value == ""){
document.getElementById('demo1').value = element.value;
} else if (document.getElementById('demo2').value == ""){
document.getElementById('demo2').value = element.value;
} else {
document.getElementById('demo3').value = element.value;
}
}
[...]
<input type="submit" value="${item.subGroupName}" onclick="myfunction(this)">

validating at least one checkbox selected on dynamically added fields

If you're dynamically adding form fields to an existing form, what's the best way of adding validation?
Consider this fiddle: http://jsfiddle.net/yWGK4/
<form action="#" method="post">
<div id="parent">
<div class="child">
<input type="checkbox" name="box1[]" value="1" /> 1
<input type="checkbox" name="box1[]" value="2" /> 2
<input type="checkbox" name="box1[]" value="3" /> 3
</div>
</div>
</form>
<button id="addBoxes">Add Boxes</button>
<script>
$(function() {
var parentdiv = $('#parent');
var m = $('#parent div.child').size() + 1;
$('#addBoxes').on('click', function() {
$('<div class="child"><input type="checkbox" name="box'+m+'[]" value="1" /> 1 <input type="checkbox" name="box'+m+'[]" value="2" /> 2 <input type="checkbox" name="box'+m+'[]" value="3" /> 3 </div>').appendTo(parentdiv);
m++;
return false;
});
});
</script>
On that form I'm adding new checkbox groups, and want to make sure at least one box from each group is checked (not one box across all groups). Anyone got any clever methods? Everything I've looked at would get very complicated due to the dynamically added fields.
It doesn't matter if the checkboxes are dynamic when validating on submit etc. so something like this would check if at least one checkbox per .child is checked :
$('form').on('submit', function(e) {
e.preventDefault();
var valid = true;
$('.child').each(function() {
if ( ! $('[type="checkbox"]:checked', this).length ) // no box checked
valid = false;
});
if (valid) {
this.submit();
}else{
alert('error');
}
});
FIDDLE
If you want to check it using jQuery you can use `.each()
$(".child").each(function(){
var $this = $(this);
var checked = $this.find("input:checked");
if( checked.lenght == 0 ) {
alert("This group is not valid");
}
});
You can find more about this jQuery functions in this links:
each()
find()
here's what I came up with. Basically you loop over the .child groups and test if they have a checkbox in the checked state..
$('#checkBoxes').on('click', function(){
var uncheckedgroups = new Array();
$('.child').each(function(childindex, childelement){
var checkFound = 0;
$('.child').each(function(index, element){
if($(element).is(':checked')){
checkFound = 1;
}
});
if(checkFound == 0){
uncheckedgroups.push(childindex);
}
});
if(uncheckedgroups.length > 0){
alert("the following groups have no checked checkbox: " +
uncheckedgroups.join(','));
}
});

Categories

Resources