I'm new to javascript that why i don't know how to get value using javascript.
Here is my PHP script
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";
if($row['choice'] == 0){
echo "<p>First Choice</p>";
echo "<input type='hidden' id='hidden' value='0' />";
}
elseif($row['choice'] == 1){
echo "<p>Second Choice</p>";
echo "<input type='hidden' id='hidden' value='1' />";
}
else{
echo "<p><input type='radio' name='content_type' value='1' />This is A</p>
<p><input type='radio' name='content_type' value='2' />This is B</p>
<p><input type='radio' name='content_type' value='3' />This is C</p>";
//content_a
echo "<div id='content_a'>";
echo "<p>First Choice</p>";
echo "<input type='hidden' id='hidden' value='0' />";
echo "</div>";
//content_b
echo "<div id='content_b'>";
echo "<p>Second Choice</p>";
echo "<input type='hidden' id='hidden' value='1' />";
echo "</div>";
//content_c
echo "<div id='content_c'>";
echo "<p>Third Choice</p>";
echo "<input type='hidden' id='hidden' value='2' />";
echo "</div>";
}
echo "<a style='text-decoration: none; color: #000000;' class='alert'
href='#' onclick='return false;'>Alert</a>";
echo "</div>";
}
Javascript
//when click on alert button
$(".alert").bind('click', function(){
var type = $(this).parents('.loop').find("#hidden").val();
alert(type);
});
//when radio button change
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$(this).parents('.loop').find('#content_a').show(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '2':
$(this).parents('.loop').find('#content_b').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '3':
$(this).parents('.loop').find('#content_c').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
break;
}
});
My javascript script above work only when choice == 0 and choice == 1 (when I click alert button with choice == 0, it will alert 0, and click alert button with choice == 1, it will alert 1). But if choice == 2, it didn't work at all, it alerts undefined. I want when choice == 3 and user choose the radio button, it will do like below:
- if user choose **This is A** and click Alert button, it will alert 0
- if user choose **This is B** and click Alert button, it will alert 1
- if user choose **This is C** and click Alert button, it will alert 2
Can you help me to solve this problem?
Thank in advance
You have logic for
if($row['choice'] == 0){
and
elseif($row['choice'] == 1){
but not in the same manner if the choice is 2.
You also have three inputs with id='hidden.' Is it possible that the following line is finding the wrong hidden element?
var type = $(this).parents('.loop').find("#hidden").val();
A live example in a site like jsfiddle.net would help us tinker more easily.
you are given same id's in the below code. id's need to given unique name.
echo "<div id='content_a'>";
echo "<p>First Choice</p>";
echo "<input type='hidden' id='hidden' value='0' />";
echo "</div>";
//content_b
echo "<div id='content_b'>";
echo "<p>Second Choice</p>";
echo "<input type='hidden' id='hidden' value='1' />";
echo "</div>";
//content_c
echo "<div id='content_c'>";
echo "<p>Third Choice</p>";
echo "<input type='hidden' id='hidden' value='2' />";
echo "</div>";
Related
while ($row = mysqli_fetch_array($result)) { echo "";
echo "<div id='img_div'>";
echo "<i class='fas fa-times'></i>";
echo "<img class='photoDeGallery' src='image/".$row['image']."'>";
echo "<div class='dropdown'>";
echo "<span>Details</span> ";
echo "<div class='dropdown-content'>";
echo "<p>".$row['text']."</p>";
echo "</div>";
echo "</div>";
echo "<div class='feedback'>";
echo "<input type='radio' name='star' id='loveIt' checked='checked'>";
echo "<label for='loveIt'>";
echo "<img class='imag' src='love_it.png'>";
echo "<h4>love it</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='likeIt'>";
echo "<label for='likeIt'>";
echo "<img class='imag' src='liked_it.png'>";
echo "<h4>like it</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='applause'>";
echo "<label for='applause'>";
echo "<img class='imag' src='applause.png'>";
echo "<h4>applaus</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='laugh'>";
echo "<label for='laugh'>";
echo "<img class='imag' src='laugh.png'>";
echo "<h4>laugh</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='boring'>";
echo "<label for='boring'>";
echo "<img class='imag' src='boring.png'>";
echo "<h4>boring</h4>";
echo "</label>";
echo "</div>";
echo "</div>";
echo "</div>";
}
Hallo, I provided the code above.
On a button_click runs the code above. The code inserts pictures on database and shows them on the website. Under each photo inside an img_div also been shown the "details" to the pic as well as rating. The rating-system I created using radio input (as it is to see in the code). The rating-system appears under every picture, which has been uploaded to the database and shown on the website.
The problem is:
when I rate a picture, all other pictures get the same rating.
How can i keep for each picture the own rating, so that rating been assigned 1:1 rating1:photo1, rating2:photo2 etc. ?
Should I store rating_clicks in a database or is there away to count the rates (likes, dislikes etc)?
I will be grateful if someone could help me and Modos wouldn't close my thread?
Best regards
Reda
Your radio groups need the same name, but each group needs it's own unique shared name. You can do this by appending the ID of the item in with the name. That way when you sort out the POST data you'll have a reference to the ID that goes with the rating. Also you shouldn't be using the same IDs for multiple elements, so I changed those to data-attributes. You can wrap the text and radio in the label tag to associate the two together
<?php while ($row = mysqli_fetch_array($result)) { ? >
<div id='img_div'>
<i class ='fas fa-times'></i>
<img class='photoDeGallery' src='image/<?php echo $row['image']?>'>
<div class='dropdown'>
<span>Details</span>
<div class='dropdown-content'>
<p><?php echo $row['text']?></p>
</div>
</div>
<div class='feedback'>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='loveIt' checked='checked'>
<img class='imag' src='love_it.png'>
<h4>love it</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='likeIt'>
<img class='imag' src='liked_it.png'>
<h4>like it</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='applause'>
<img class='imag' src='applause.png'>
<h4>applaus</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='laugh'>
<img class='imag' src='laugh.png'>
<h4>laugh</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='boring'>
<img class='imag' src='boring.png'>
<h4>boring</h4>
</label>
</div>
Then in your $_POST you can find your ratings like this
<?php
foreach ($_POST as $p => $v) {
if (strpos($p, 'star_')!== false) { // if the name of the $_POST item has the string 'star_' in it
$imgid = explode('_', $p)[1]; // get the id by exploding the name into an array like ['star','7'] and choosing the [1] index
$rating = $v; // the rating itself will just be the $_POST value
}
}?>
This is my first post here so I apologize in advance if the formatting is wrong.
I am working on a form that pulls data from MySQL using a loop and outputs it to HTML page. The user then has the option to approve or deny the entries, and based on user selection validation should be required or optional. My current code will validate correctly, but only for the first row being outputted from the loop. I am trying to validate all rows. I have tried using a while loop and foreach statement with no success. Any help would be greatly appreciated!
My Loop & Form:
//connect to the database
$db=mysqli_connect('localhost','root','') or die ('I cannot connect to the database because: ' . mysql_error());
//-select the database to use
$mydb=mysqli_select_db($db,"my_db") or die(mysql_error());
//-query the database table
$sql="SELECT id, date, client_name, client_number, date_completed, status FROM clients WHERE client_name LIKE '%" . $search ."%' OR status LIKE '%" . $search ."%' ";
//-run the query against the mysql query function
$result=mysqli_query($db, $sql);
//-count results
$rows=mysqli_num_rows($result);
if($rows=mysqli_num_rows($result)) {
echo "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>" . $rows . " result(s) found for " . $search . "</h2><br />";
}elseif($rows=mysqli_num_rows($result) == 0) {
echo "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>0 result(s) found for " . $search . "</h2><br />";
}
//-create while loop and loop through result set
while($row=mysqli_fetch_assoc($result)){
$id=$row['id'];
$date=$row['date'];
$client_name=$row['client_name'];
$client_number=$row['client_number'];
$date_completed=$row['date_completed'];
$status=$row['status'];
echo "<form method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo "<tr>\n";
echo "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo "</tr>";
echo "<tr>\n";
echo "<td readonly class='date'>$date</td>\n";
echo "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo "<td><select id='status' name='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n";
echo "<td><input type='date' id='date_completed' name='date_completed_returned' value='$date_completed'></td>\n";
echo "<td><input type='file' id='upload' name='upload'></td>";
echo "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n";
echo "</tr>";
echo "</table>";
echo "</form>";
}
My jQuery code:
I am trying to make date_completed and upload fields required if user selects "Approved" under status field, and optional if he selects "Denied".
<script>
$('#status').on('change', function() {
if ( this.value == 'Approved')
$("#date_completed").prop('required',true)
}).trigger("change"); // notice this line
$('#status').on('change', function() {
if ( this.value == 'Approved')
$("#upload").prop('required',true)
}).trigger("change"); // notice this line
</script>
Thanks to KevinB I was able to find a solution to my problem.
I added class names for the input fields (status, date_completed, upload) I was trying to validate:
Updated code below:
echo "<form method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo "<tr>\n";
echo "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo "</tr>";
echo "<tr>\n";
echo "<td readonly class='date'>$date</td>\n";
echo "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo "<td><select id='status' name='status' class='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n";
echo "<td><input type='date' id='date_completed' name='date_completed' class='date_completed' value='$date_completed'></td>\n";
echo "<td><input type='file' id='upload' name='upload' class='upload'></td>";
echo "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n";
echo "</tr>";
echo "</table>";
echo "</form>";
<script>
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.date_completed').prop('required',true)
}).trigger("change"); // notice this line
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.upload').prop('required',true)
}).trigger("change"); // notice this line
</script>
I just want to do something when an option is clicked on/set before submitting its containing form.
Here is my code
echo " <form method='post' action='employees.php?go' id='searchform' >";
echo "<tr>","<td>","<select name='inpuQuery' style ='width:200px;border-radius: 25px;'>",
"<option value='-1'>Filter:</option>",
"<option value='Name'>Name</option>",
"<option value='Surname'>Surname</option>",
"<option value='ID_No'>ID_No</option>",
"</select >",
"<td>", "<tr>";
echo "<tr>","<td>"," <input style='border-radius: 25px;color:blue;width:200px;' type='submit' name='filter' value='Search'> ","<td>", "</tr>";
//the if statement for if isset the search submit query
if(isset($_POST['filter'])){
$criteria=$_POST['inpuQuery'];
switch ( $criteria) {
case "Name":
echo "<input type='text' style ='border-radius: 25px;width:200px;height:40px;' placeholder ='enter first name to search by' name='name_query' > ";
break;
case "Surname":
echo "<input type='text' style ='border-radius: 25px;width:200px;height:40px;' placeholder='enter surname to search by' name='surname_query' > ";
break;
case "ID_No":
echo "<input type='text' style ='border-radius: 25px;width:200px;height:40px;' placeholder ='enter ID Num to search by' name='id_query' > ";
break;
}
}
My code is fetch data from database (suppose there are 4 records). Only first loop that effected when i changed radio button. Below is my code:
PHP CODE
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";
echo "<p><input type='checkbox' name='content_type' value='1' /></p>";
echo "<p><input type='checkbox' name='content_type' value='2' /></p>";
echo "<p><input type='checkbox' name='content_type' value='3' /></p>";
//content_a
echo "<div id='content_a' style='display:none;'>";
echo "<textarea name='text' id='textarea0'><textarea>";
echo "</div>";
//content_b
echo "<div id='content_b' style='display:none;'>";
echo "<textarea name='text' id='textarea1'><textarea>";
echo "</div>";
//content_c
echo "<div id='content_c' style='display:none;'>";
echo "<textarea name='text' id='textarea2'><textarea>";
echo "</div>";
//button
echo "<div class='button'>";
echo "<a class="tweet1" href="#" onclick="return false;">Alert</a>";
echo "</div>";
echo "</div>";
}
Javascript
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$(this).parents('.loop').find('#content_a').show(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '2':
$(this).parents('.loop').find('#content_b').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '3':
$(this).parents('.loop').find('#content_c').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
break;
}
});
I want radio button action change according to the loop that fetch from database. My code above, only first loop that effected. How to solve this problem?
that is beacuse id should always be unique...here (in your code ) you have multiple elements with same id id='content_a' (since it is inside a loop) . change this to class and use class selector
try this
html
echo "<div class='content_a' style='display:none;'>";
//---^^^^^ here
jquery
$(this).parents('.loop').find('.content_a').show(1000);\
//-------^-----here
change likewise to all other id selector
and while parents('.loop') works.. i recommend to use closest() for better performance
$(this).closest('.loop').find('.content_a').show(1000);
and yes.. you can reduce your code to two lines if you chnage your html properly..
first change you content to match with the checkbox value..
echo "<div class='content_1' style='display:none;'>"; //here class='content_' + value of checkbox
.....
echo "<div class='content_2' style='display:none;'>";
... //so on
try this
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
$('div[class^="content_"]').hide(); //hide all div
$(this).closest('.loop').find('.content_' + n).show(1000); //so particular div
});
Hello guys I just want to ask how can i create a jquery that can detect the user input and assign an attribute or remove an attribute based on the user input.
My scenario is I have a table with 4 columns. First is a dropdown. And the rest are textboxes which are readonly.
The default option for dropdown is NULL or empty. If the user choose from the dropdown, the 2 texboxes should not be readonly. On that process I don't have an error but if the user set back again to NULL. The 2 textboxes won't go back to readonly again. I don't know where's my error.
Here's my jquery code:
$("[id^=code]").on('change',function(){
var index = this.id.match(/\d+/)[0];
var validate = $('#code'+index).val();
if(validate != ''){
$("#qty"+index).removeAttr('readonly');
$("#price"+index).removeAttr('readonly');
}
});
$("[id^=code]").on('change',function(){
var index = this.id.match(/\d+/)[0];
var validate = $('#code'+index).val();
if(validate == ''){
$("#qty"+index).attr('readonly');
$("#price"+index).attr('readonly');
}
});
And this is my table
for($i = 1; $i < 16; $i++){
echo "<!-- ITEM {$i} -->";
echo "<tr>";
echo "<td>";
echo "<select name='code[]' id='code{$i}' style='width:100'>";
echo "<option value=''><label>--CHOOSE ITEMS--</label></option>";
foreach($resultGetCode->result_array() as $list){
echo "<option value='".$list['itemid']."'>".$list['itemcode']." --- ".$list['itemname']."</option>";
}
echo "</select>";
echo "</td>";
//echo "<td><input type='text' name='item[]' class='k-textbox' id='item{$i}' value='' /></td>";
echo "<td><input type='text' name='qty[]' id='qty{$i}' style='text-align: center' readonly='readonly' /></td>";
echo "<td><input type='text' name='price[]' id='price{$i}' style='text-align: right;' onblur='' readonly='readonly' /></td>";
echo "<td><input type='text' name='total[]' id='total{$i}' style='font-family: courier; text-align: right; background-color: lightgray; color: red' readonly='readonly' value='' /></td>";
echo "<tr>";
}
Here's the fiddle: http://jsfiddle.net/rochellecanale/jnkc3/5/
Would be easier to help you if you create a fiddle, but try this
if(validate == ''){
$("#qty"+index).prop('readonly', true);
$("#price"+index).prop('readonly', true);
}
Update. FIDDLE