javascript doesn't show alert message - javascript

I am working with radio buttons and a submit button to send the inputs of the radio buttons to a javascript file called script.js. Whenever i click the submit button without selecting data from the radio buttons, the alert message "Please fill out all fields" does not show.
my code of index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
</script>
</head>
<body id="page-top">
<header>
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" id="submit" name="submit" value="Submit">
</header>
</body>
</html>
my code of script.js
$(document).ready(function () {
$("#submit").click(function () {
var radio1 = $("input[name=group1]:checked").val();
var radio2 = $("input[name=group2]:checked").val();
var radio3 = $("input[name=group3]:checked").val();
var radio4 = $("input[name=group4]:checked").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&submit1=' + radio1 + '&submit2=' + radio2 + '&submit3=' + radio3 + '&submit4=' + radio4;
if (radio1 == '' || radio2 == '' || radio3 == '' || radio4 == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function (result) {
alert(result);
}
});
}
return false;
});
});

i just saw they are radios, check for falsy values as well, e.g !radio1 || !radio2 etc..
Specificaly jQuery tries to select a checked radio, but none maybe checked, so the jQuery object is empty, so the .val() will return a falsy value (e.g null or undefined).

Your html is not conform - see input tag without form tag :
<form onsubmit="yourfunction(); return false;"> ...
or use simply a tag button :
<button id="submit">Submit</button>

You can test radio input for undefined like this https://jsfiddle.net/2Lzo9vfc/6/
if (radio1 == undefined || radio2 == undefined || radio3 == undefined || radio4 == undefined) {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
}

Related

Multiple radio buttons controlgroups in jQuery mobile

I have the below html code
<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>
I want if choice2 is checked and one of cb-choice1 or cb-choice2 then the received value is the value of cb-... choice (4 or 5) if choice2 is checked and no cb-... is checked then the received value is 2.
How can I do this?
I try this
$("input:checked").each(function(i) {
if (($(this).attr("radioatrr") == 0)) {
alert(($(this).attr("value"));
}
})
but can not working as I want
You can check out this tutorial from W3 to help you out:
https://www.w3schools.com/jsref/prop_radio_value.asp
In regards to your problem, you can hook in this function:
function handleRadioSelection() {
if(document.getElementByName('choice2').checked) {
if (document.getElementByName('cb-choice1').checked) {
return document.getElementByName('cb-choice1').value
} else if (document.getElementByName('cb-choice2').checked) {
return document.getElementByName('cb-choice2').value
} else {
return document.getElementByName('choice2').value
}
}
}
I'm using a hidden input field to capture the value that you want, you can change it to anything else. I've also modified the radio buttons into two groups, as from reading the question/requirements I think that's how it should be setup.
$("#submit").click(function() {
//capture group 1 and group 2 value that's checked
var val1 = $('input[name=choice]:checked').val();
var val2 = $('input[name=choice2]:checked').val();
//capture the input object with the desired value
var sendVal = $('input[name=myval]');
//reset value to 0 as this happens on click, incase value gets changed
sendVal.val(0);
//if group 1 is 2 and there is a value selected in group2
if(val1==2&&val2 != undefined){
sendVal.val(val2);
//if group 1 is 2 and group 2 is not selected
}else if(val1==2&&val2 == undefined){
sendVal.val(val1);
}
//showing value to be sent in an alert
alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>
<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>
<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>

how to stop a javascript function from resetting on form submit

I have a problem with my web page. I am trying to create a survey with an image and using form submit with several radio button groups. The image changes every 15 secs from img1.jpg to img2.jpg and so on and so forth and the data from the radio buttons are saved in my local database. The problem is when the image is on img2.jpg and when the user clicked submit to save it to database, the image resets to img1.jpg. What should I do so that the image doesn't reset every time on form submit?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
</script>
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</header>
<?php
$con = mysqli_connect("localhost","root","","survey");
# $group1 = ($_POST['group1']);
# $group2 = ($_POST['group2']);
# $group3 = ($_POST['group3']);
# $group4 = ($_POST['group4']);
if(isset($_POST['submit']))
{
mysqli_query($con,"INSERT INTO response (col1,col2,col3,col4)
VALUES ('$group1','$group2','$group3','$group4')");
mysqli_close($con);
}
?>
</body>
</html>
1.Create file called form-request.php with the following code:
<?php
$con = mysqli_connect("localhost","root","","survey");
# $group1 = ($_POST['group1']);
# $group2 = ($_POST['group2']);
# $group3 = ($_POST['group3']);
# $group4 = ($_POST['group4']);
mysqli_query($con,"INSERT INTO response (col1,col2,col3,col4) VALUES ('$group1','$group2','$group3','$group4')");
mysqli_close($con);
?>
2.This should be your index page.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
$('.header-content form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'form-request.php',
data: $('.header-content form').serialize(),
success: function (data) {
console.log(data);
}
});
});
});
</script>
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<form action="home.html" method="post">
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</header>
</body>
</html>
form-request.php should be in the same directory as index.php. When submitting the form the page will not refresh nothing will happen only the data will be inserted in the MySQL database. If you want something to happen when the form is submitted please provide me an information for it.
You are posting the form. After the post, the page reloads and the initial image is being loaded.
You need a way to pass the name of the current img that you are seeing to the server when submitting the form.
There are multiple ways you can do this. For example, you can do this by passing it to the query string and then check for it.

How can I check if all radio buttons are checked

I have a number of radio buttons with the option, 'yes' or 'no'.
Is there a simple way with jQuery to check if they all have 'yes' selected?
HTML is:
<input type="radio" id="yes1" name="group1" value="yes">Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes<br>
<input type="radio" name="group3" value="No">No<br>
I'm guessing it's something along the lines of
yes1 = $("#yes1").prop("checked", true);
yes2 = $("#yes2").prop("checked", true);
yes3 = $("#yes2").prop("checked", true);
if (yes1 & yes2 & yes3) {
// do something ?
}
You can rather compare the length of elements with ['value=yes] with elements with ['value=yes] and property :checked:
if($('[value=yes]').length==$('[value=yes]:checked').length){
//all yes elements are checked
}
One way is to check whether all the radios with value as yes is checked
if($('input[type="radio"][value="yes"]').not(':checked').length == 0){
//all checked
}
You may check the count of radio buttons with value != true. If the count is Zero, all radio buttons would be selected.
if(!$('input[type="radio"][value="yes"]').not(':checked').length){
//select all radio buttons with value = yes
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>
<input type="radio" id="yes1" name="group1" value="yes" checked>Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes" checked>Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes" checked>Yes<br>
<input type="radio" name="group3" value="No">No<br>
var yes1 = $("#yes1").is(":checked")
var yes2 = $("#yes2").is(":checked")
var yes3 = $("#yes3").is(":checked")
//$("#Myradio").is(":checked")
if (yes1 & yes2 & yes3) {
alert('sasa');
//do something
}
FIDDLE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>

check all radio groups are checked

I want to know best way to check all the radio button groups are checked in a page.
My code -
<div class="radioGroup">
Question1
<input type="radio" value="1" name="group1"/>1
<input type="radio" value="2" name="group1"/>2
<input type="radio" value="3" name="group1"/>3
<input type="radio" value="4" name="group1"/>4
</div>
<div class="radioGroup">
Question2
<input type="radio" value="1" name="group2"/>1
<input type="radio" value="2" name="group2"/>2
<input type="radio" value="3" name="group2"/>3
<input type="radio" value="4" name="group2"/>4
</div>
<div class="radioGroup">
Question3
<input type="radio" value="1" name="group3"/>1
<input type="radio" value="2" name="group3"/>2
<input type="radio" value="3" name="group3"/>3
<input type="radio" value="4" name="group3"/>4
</div>
<input type="button" value="check all radio Group selected" onclick="validate();"/>
and I wrote a javascript function which works fine but I want a good solution means single selector solution.
function validate(){
var isNotSelected = false;
$(".radioGroup").each(function(i,v){
var grpName = $(this).find("input:first").attr("name");
if($(this).find("[name='"+grpName+"']:checked").val() == undefined){
isNotSelected =true;
}
});
if(isNotSelected){
alert("not all checked");
}
else{
alert("all checked");
}
}
Thanks in advance
You can do
var allChecked = !$('.radioGroup:not(:has(:checked))').length;
demonstration
Check if the number of total groups match the number of groups that contain a checked radio button, if so, all groups have been selected
$('.radioGroup').length === $('.radioGroup:has(input:checked)').length

How to get the value of a textbox if a specific radio button is selected?

I have the following HTML
CHOICE 1
<input type="radio" name="c1" value="0" class="a"> Yes
<input type="radio" name="c1" value="1" class="a"> No
<input type="radio" name="c1" value="2" class="a"> Only <input type="text" id="t1" />
<br />
CHOICE 2
<input type="radio" name="c2" value="0" class="a"> Yes
<input type="radio" name="c2" value="1" class="a"> No
<input type="radio" name="c2" value="2" class="a"> Only
<input type="text" id="t2" />
<br />
CHOICE 3
<input type="radio" name="c3" value="0" class="a"> Yes
<input type="radio" name="c3" value="1" class="a"> No
<input type="radio" name="c3" value="2" class="a"> Only
<input type="text" id="t3" />
<br />
<button>Press me</button>
I want to get the value of the textbox if the radio button selected is "Only". Any idea on how to do it?
This is my current jQuery script
var arr = new Array();
var rad;
var i = 0;
var id;
$('button').click(function(){
$('input[type="radio"]:checked').each(function(){
rad = $('input[type="radio"]:checked').val();
if(rad == 2){
id = this.id;
arr[i] = $('input[type="text"]#'+id).val();
}
else{
arr[i] = $(this).val();
}
i++;
});
alert(arr);
i = 0;
});
Using this script only gives me repeated value of the textbox. The "Yes" and "No" (0 and 1) values doesnt appear.
Prints the value of the .next() input field to the console when the button was clicked and the "Only" radio was selected.
Demo on jsbin
$("button").click(function(){
$("input[type=radio]:checked").each(function(){
if($(this).val() == 2) {
console.log($(this).next("input[type=text]").val());
}
});
});
Simple enough.
if ( jQuery("input[name='c1']:checked").val() === '2' ) {
return jQuery("#t1").val();
}
You can add some extra logic to generate the c1 and t1 strings dynamically to make it generic.

Categories