Develop Reference

Unable to get button value with loop Jquery

I am working with jquery and PHP,I want to display "buttons" according to database value(dynamic) and want to get button values in jquery, I am using "input type hidden", But right now getting value="1"(static), But I want to get "correct" value (if I select button 2 then 2 value should get in jquery)
Here is my HTML code
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) { ?>
<button class="btn btn-scale btn-scale-asc-<?php echo $i; ?>">
<?php echo $i; ?>
<input type="hidden" <?php if($records['IsRatingQuestion']=="" || empty($records['IsRatingQuestion'])){ ?>name='ques_<?php echo $records['ques_id']; ?>' <?php } else{ ?>name='rangeR_<?php echo $records['ques_id']; ?>' <?php } ?> id="ratings" value="<?php echo $i; ?>">
</button>
<?php } ?>
Here is the script, Where I am wrong?
<script>
$(document).ready(function(){
$("#next1").click(function(){
var rating =$("#ratings").val();
alert(rating);
});
});
</script>

Before anything else, you need to remove input from inside that button. It's not a valid HTML.
Moreover, as mentioned in the comments, you cannot have the same id for all inputs, so I'd just remove it.
How about something like this:
$(document).ready(function() {
$('.item').each(function() {
var $button = $(this).find('button')
var $input = $(this).find('input')
$button.click(function() {
alert($input.val())
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<button>1</button>
<input type="hidden" value="1">
</div>
<div class="item">
<button>2</button>
<input type="hidden" value="2">
</div>
<div class="item">
<button>3</button>
<input type="hidden" value="3">
</div>
<div class="item">
<button>4</button>
<input type="hidden" value="4">
</div>

As far as I am understanding, you just want to show the value of the dynamic button using jquery. For this you just need to pass the value to the button using data attribute and then you can get the value using jquery.
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) {
echo '<button class="get-value" data-value="'.$i.'">Button '.$i.'</button>';
} ?>
<input type="text" id="show-value">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '.get-value', function(){
var button_value = $(this).data('value');
$('#show-value').val(button_value)
});
});
</script>

I don't think putting an <input> inside of a <button> is valid html (although it seems to work?). Instead you can just assign those values as attributes of the button itself. Also ids have to be unique, so if you have a bunch of buttons with the same id, that is also invalid. I tend to stay away from ids and just use classes to avoid this.
Also, rather than having a bunch of choppy php, you can build a single string of html and echo it back all at once. By using double qoutes " on the outside of a string, you can use single quotes ' on the inside and drop variables right into the string without escaping or concatenating anything. Although you have to wrap associative arrays in brackets {} for it to parse correctly. PHP strings.
I'm guessing $name isn't a static variable, but without seeing the rest of your code, this is just an example:
<?php
$html = "";
$name = ($records["IsRatingQuestion"] == "" || empty($records["IsRatingQuestion"])) ?
"ques_{$records["ques_id"]}" :
"rangeR_{$records["ques_id"]}";
for($i = $records["start_range"]; $i <= $records["end_range"]; $i++) {
$html .= "<button class='btn btn-scale btn-scale-asc-$i ratings' name='$name'>$i</button>";
}
echo $html;
?>
$('.btn.ratings').on('click', function() {
//$(this).text() = $i
//$(this).attr('name') = $name
});

How I can change <input>'s CSS properties, when its validate the passwords?

I'm creating registration form, and want to before clicking on submit button to change <input>'s CSS properties when the passwords don't match (change background color).
if ($_POST["pass"] != $_POST["pass_again"]){
$message = "Passwords don't match";
echo ('
<script type="text/javascript">
document.getElementById("pass_again").background-color = "red";
</script>
');
}

If you want to validate on the server-side after they submit the form and want to change the look, you could set the class of the input elements as you write them out instead of trying to do it with Javascript afterwards.
Something like this..
<?php
$class = ($_POST['pass'] == $_POST['pass_again']) ? 'valid' : 'invalid';
?>
<style>
.valid {
bakground-color: green;
}
.invalid {
background-color: red;
}
</style>
<form method="post">
<input class="<?php echo $class; ?>" type="password" name="pass" id="pass">
<input class="<?php echo $class; ?>" type="password" name="pass_again" id="pass_again">
<button type="submit">Login</button>
</form>
Please note I didn't validate that this code has no bugs but you should get the idea.

why different effect in differnt browser after "onclick"

I want to enable the btn1 and disable btn2 on page-load. When I input value in txtbox1, then, on clicking btn1 ,btn1 should be disabled and enable btn2. If I click btn2, then btn2 should also be disabled.
$value= $_POST['tb1'.$id];
echo '<form name="f1" method="POST" action="">';
echo '<input type="text" id="txtbox1'.$id.'" name="tb1'.$id.'" value="'.$value.'" />';
echo '<input type="submit" id="btn1'.$id.'" name = "btnstart'.$id.'" value="START" onClick="document.getElementById(\'btn2'.$id.'\').disabled=false;this.disabled=true;"/><input type="submit" id="btn2'.$id.'" name = "btnend'.$id.'" value="End" onClick="this.disabled=true;" disabled/>';
echo '</form>';
if ( isset( $_POST['tb1'.$id] ) ) {
echo $value;
}
When I use Chrome, i can do the above button effects , but I cannot get the txtbox1 value.
When I use IE and Firefox, I can get the txtbox1 value, but the button effect is not want I want. Which means, I input value in txtbox1 then click btn1 only, then it will automatically enable btn2, then disable both then, then get back to the original status(btn1 enable, btn2 disable).
How to solve this problem?

Since you have dynamic button names, its better not to touch them for disbale/enable feature that you want :
Using jquery:
$(document).ready(function () {
/*Operations on the 1st button click */
$('#form').children("input[type='submit']:first").click(function () {
$(this).attr("disabled", "disabled"); /*disable the 1st button */
$('#form').children("input[type='submit']").eq(1).removeAttr("disabled"); /*enable the 2nd button */
});
/*Operations on the 2nd button click */
$('#form').children("input[type='submit']").eq(1).click(function () {
$(this).attr("disabled", "disabled");
});
});
Additionally : give your form an id, something like :
echo '<form name="f1" id="form" method="POST" action="">';
/* check the form id tag ^^ here*/
basic demo here
but you wont be able to see full feature in it!!

never write your code like this, this makes debugging like pain, just make a script tag and handle everything there like this, the point here is about setAttribute and removeAttribute:
<?php
// your server side code
// finish declaring your variables like
$input_id = 'an_id';
$input_value = 'some_value';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testing</title>
</head>
<body>
<form name="f1" method="POST">
<input type="text" id="txtbox1<?php echo $input_id; ?>" name="tb1<?php echo $input_id; ?>" value="<?php echo $input_value; ?>" />
<input type="button" id="btn1<?php echo $input_id; ?>" name="btnstart<?php echo $input_id; ?>" value="START" />
<input type="button" id="btn2<?php echo $input_id; ?>" name="btnend<?php echo $input_id; ?>" value="End" disabled="disabled"/>
</form>
<script type="text/javascript">
btn1 = document.getElementById('btn1<?php echo $input_id; ?>');
btn2 = document.getElementById('btn2<?php echo $input_id; ?>');
btn1.onclick = function() {
console.log(this);
btn1.setAttribute("disabled","disabled");
btn2.removeAttribute("disabled");
return false;
};
</script>
</body>
</html>

Disabling a submit button after one click without sacrificing the functionality of the form

I have asked this question before but no one was able to give a satisfactory answer.
I have a quiz website which has four radio buttons for the four options. When the user clicks on the submit button, a PHP script executes which check whether the answer is correct or not.
What I need to do is to disable the submit button after it is pressed once. All the answers that I received in my previous question interfered with the functionality of my form (it was not getting submitted). Please give a solution which do not sacrifices the functionality of the form.
Also,if you give a Javascript code as your answer, please do help me in implementing that as I am naive in Javascript.
Here is my code:
<form action="programming_skills.php?ad=<?php echo $a; ?>" method="post" id="quizsubmit">
<tr align="center">
<?php echo $row['q_desc']; ?><br />
<input type="radio" name="ans" value="<?php echo $row['ans1']; ?>" <?php echo ($_POST['ans'] == $row['ans1'] ? 'checked' : '') ?>/>
<?php echo $row['ans1']; ?><br />
<input type="radio" name="ans" value="<?php echo $row['ans2']; ?>" <?php echo ($_POST['ans'] == $row['ans2'] ? 'checked' : '') ?>/>
<?php echo $row['ans2']; ?><br />
<input type="radio" name="ans" value="<?php echo $row['ans3']; ?>" <?php echo ($_POST['ans'] == $row['ans3'] ? 'checked' : '') ?>/>
<?php echo $row['ans3']; ?><br />
<input type="radio" name="ans" value="<?php echo $row['ans4']; ?>" <?php echo ($_POST['ans'] == $row['ans4'] ? 'checked' : '') ?>/>
<?php echo $row['ans4']; ?><br />
<tr><td><input type="submit" id="sub" value=Submit_Answer></td></tr></form></table><table border="1" align="center">
<?php
if(isset($_POST['sub']))
{
$a_value=$a;
$answer=$_POST['ans'];
$q2="select * from question where q_id=$a_value";
$r2=mysql_query($q2);
if ($row=mysql_fetch_array($r2))
$trueans=$row['true_ans'];
if ($answer==$trueans)
{
$userid=$_SESSION['user_email'];
$q1="select * from temp_score WHERE user_id='$userid'";
$rw=mysql_query($q1);
while($row=mysql_fetch_assoc($rw))
$score=$row['temp_score'];
$score=++$score;
$z="update temp_score set temp_score='$score' where user_id='$userid'";
mysql_query($z);
?>
Your answer is correct. <?php $a=++$a; ?>
Click Here for next question
<?php
}
else
{
?>Your answer is wrong. The correct answer is <i>'<?php echo $trueans; ?>'</i>.<br />
<?php $a=++$a; ?>
Click Here for next question
<?php }
}
++$a;
$a=++$a;
}
}
}
else
{
echo '<meta http-equiv="refresh" content="0; url=results.php">';
}
?>

Hi found a fiddle which might help u to prevent default click event below code is will help...
document.getElementsById("quizsubmit").onclick = function () {
this.disabled = true;
};
http://jsfiddle.net/zb8CZ/

Disable it after a timeout:
<input type="submit" id="sub" value=Submit_Answer onclick="setTimeout('document.getElementById(\"sub\").disabled=!0;',100);">

You can either use an onclick event on the submit button like this:
onclick="this.disabled='disabled';this.form.submit();"
Thus, the form gets submitted via JS.
Or better make use of the onsubmit event on the form element:
onsubmit="document.getElementById('submit_button').disabled = 'disabled';"
"submit_button" is the ID attribute of your button in this case.

Checkbox with Jquery map function?

I have the following code,
...
<input type="hidden" name="unchecked" id="unchecked" value="" />
<?php
$ind = 1;
foreach($array as $v){
?>
<input class="checkbox checked" id="checked_<?php echo $ind; ?>" type="checkbox" value="<?php echo $value['id']; ?>"/>
<?php
$ind++;
}
?>
...
I want to store checkbox values as comma seperated in hidden box. so i tried with the following jquery ,
<script type="text/javascript">
$(function(){
$("input.checked").click(function(){
//alert($(this).val());
$("input#unchecked").val($.map($("input[id^='checked_']"), function( item ) {
return $(item).val();
}).join(","));
});
});
</script>
The above script stores all values of checkbox when i click any one of check box. what i done wrong on this. kindly advice

Change
$("input[id^='checked_']")
to
$("input[id^='checked_']:checked")
Or use the below:
Select the checked: $("input[id^='checked_']").is(':checked')
Select the unchecked: $("input[id^='checked_']").not(':checked')