show row depending what radio button is selected - javascript

I have read through a number of similar questions on stackoverflow but am a little lost of how to modify it to my particular situation. I want to output 2 rows in html differently depending what radio button is selected. I am still learning javascript...
What am i missing please? and how do i get the html to output directly after the radio button form item?
My form looks like this;
<tr>
<td>Select your option</td>
<td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" />
<?php echo $text_yes; ?>
<input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" />
<?php echo $text_no; ?></td>
</tr>
After this i also have several other form items
At the bottom of the form i have the function;
<script type="text/javascript"><!--
function addrow() {
if(document.getElementById('store_yes').checked) {
html = '<tr>';
html = '<td>Row is showing this</td> ';
html = '</tr>';
} else {
html = '<tr>';
html = '<td>Row is showing something else</td> ';
html = '</tr>';
}
//--></script>
EDIT, if YES is selected the 2 rows appear, the rows need to dissapear again if NO is then subsequently selected, ie change of users mind.

Here is your code, I have used Jquery to append the rows to the end of your table. Read more about .append() in jquery here .
The modified function:
function addrow() {
if (document.getElementById('store_yes').checked) {
$('#yourTable').append('<tr><td>Row is showing this</td></tr>');
} else {
$('#yourTable').append('<tr><td>Row is showing something else</td></tr>');
}
}
The modified HTML
`
<table border="1" id="yourTable"><tr>
<td>Select your option</td>
<td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" />
<input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" />
</td>
</tr>
</table>
`
Check out the demo here
Update
The demo has been updated to remove appended rows if the user changes his mind

Related

How to populate the option values dynamically inside a dropdown which is build on onclick event of a dropdown menu

In the on click event of a select drop-down, how to dynamically create a drop-down menu , which is also created inside the function [for options : fetch the data from the database].
I have 2 drop-down menus in my page with id="type" , first drop down menu is rendered on page load itself, fetching the data from database.
And the second drop-down menu is built inside the on click event[function] of the first drop-down.
For rendering the second drop-down menu I have made an ajax call, but only for the first time, the drop-down menu with options is getting rendered, on clicking the button multiple times, no action is getting performed.
This is my page :
type.php
<?php
include('db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="assets/js/jquery-3.3.1.js"></script>
<form class="form-horizontal" role="form" action="" enctype="multipart/formdata" method="POST" autocomplete="off">
<table id="table" class=" table order-list">
<thead>
<tr>
<td><b>Type</b></td>
</tr>
<div id="next"></div>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
<select class="form-control" name="type[]" id="type" required>
<option value="">Select the Type</option>
<?php
$arr = array();
$sql = mysqli_query($con,"select id,name from type_table where view = 'display'");
while($result = mysqli_fetch_assoc($sql)){
echo '<option value="'.$result['id'].'">'.$result['name'].'</option>';
$arr[$result['id']] = $result['name'];
}
?>
</select>
</td>
<td class="col-sm-2"><a class="deleteRow"></a> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="SUBMIT" name="submit" class="btn btn-success center-block" id="submittable">
</div>
</div>
</form>
<script>
$(document).ready(function(){
var arr = <?php echo json_encode($arr);?>;
//console.log(arr);
document.getElementById("addrow").onclick = function () {
$.ajax({
url:"test_select.php",
method:"post",
data:{arr:arr},
success:function(data){
$('#next').html(data);
}
});
}
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
</script>
</body>
</html>
And the ajax call made file [test_mail.php]:
<?php
//print_r($_POST["arr"]);
$select = '';
$select = '<tr><td><select class="form-control" name="type[]" id="type" required>';
foreach($_POST["arr"] as $k=>$v){
$select .= '<option value="'.$k.'">'.$v.'</option>';
}
$select .= '</select></td><td class="col-sm-2"><a class="deleteRow"></a> </td></tr>';
echo $select;
?>
I expect to get the second drop down [inside the on click event of a button ] to be rendered dynamically as many times I click the button .
First off, I am quite sure that you're asking about dropdown menu (usually a select form input, also known as dropdown or combobox) "on-click" event and not a button on-click as mentioned in the question.
"On-click" event (as explained here) occures when the user "clicks" with his mouse on an element (or may also be triggered by any pointer like devices).
But what you are looking for is "on-change" event which will be fired every time when you change your selection within the select form input.
Please go through the link and modify your code accordingly.
While I am not sure if you are talking about onclick event of the button $('.addrow') or of the select element $('#type'), I have spotted an issue which is the reason why no select is being rendered the second time and so on.
Using html() will replace everything inside an element. So everytime user clicks on $('.addrow') button, it will replace everything inside the targeted element $('#next')
You should use the jquery append() method:
$.ajax({
url:"test_select.php",
method:"post",
data:{arr:arr},
success:function(data){
$('#next').append(data);
}
});
Link to docs: https://api.jquery.com/append/

Placing id on input and select tags inside td depending on query result looping

asigning id for each input tag and select tag in tr depending on query result
I tried a code like this putting an id inside the input tag and select tag
<table id="myTable">
<thead>
<th>Progress</th>
<th>Amount</th>
<th>Action</th>
</thead>
<tbody>
<?php $qry = "SELECT * FROM trade";
foreach($conn->query($qry) as $data){
?>
<form action="update.php" method="post">
<tr>
<td><select name="progress" id="select_progress" onclick="changeSetting()">
<option value="Partial">Partial</option>
<option value="Full">Full</option>
</select></td>
<td><input type="number" name="amount" id="amount"></td>
<td><input type="submit" name="update" value="Update"></td>
<input type="hidden" name="tradeid" value="<?php echo $data['tradeID'];?>">
</tr>
</form>
<?php }?>
</tbody>
</table>
Now i coded the javascript like this:
function changeSetting(){
var selectValue = document.getElementById("select_progress").value;
var amountValue = document.getElementById("amount");
if(selectValue.value === "Partial"){
amountValue.required = true;
}else if(selectValue.value === "Full"){
amountValue.required = false;
}
}
The first row seems to be doing fine, but the second row doesn't apply the javascript i wrote. Any suggestion on how to approach this would be welcome. I know, that an id should be unique for each element but if i have about 50 results in my query i dont know how to place id's on each input and select tag inside my table. Any suggestions or help is greatly appreciated.
All your elements have the same id value, so when you try to getElementById it always returns the first one. One way to work around this is to add the tradeID value to each element's id value to distinguish them. For example:
<td><select name="progress" id="select_progress<?php echo $data['tradeID'];?>" onchange="changeSetting(<?php echo $data['tradeID'];?>)">
<option value="Partial">Partial</option>
<option value="Full">Full</option>
</select></td>
<td><input type="number" name="amount" id="amount<?php echo $data['tradeID'];?>"></td>
<td><input type="submit" name="update" value="Update"></td>
Then you would modify your JS as so:
function changeSetting(id){
var selectValue = document.getElementById("select_progress" + id).value;
var amountValue = document.getElementById("amount" + id);
if(selectValue === "Partial"){
amountValue.required = true;
}else if(selectValue === "Full"){
amountValue.required = false;
}
}

how to select second input box from cell using javascript

I have the table with following structure . I am generating a dynamic table on the basis of input provided by user which will repeat this row .
I want to get the value of this text box and trying to use the code below
if (row.getAttribute('val') === 'answer') {
var Cell = table.rows[i].cells[0];
alert(Cell.innerHTML);
}
<tr val='answer'>
<td>
<input type='checkbox' />
<input style='width:483px' type='text' />
</td>
</tr>
I am putting alert to check if i am getting the correct value .I can see the two inputs in the alert message I want to get the value of text box using javascript not jquery
You can use querySelectorAll to select all rows and then use loop to get only rows with val='answer' and then use querySelector to get input with type="text"
var rows = document.querySelectorAll('tr');
for (var i = 0; i < rows.length; i++) {
if (rows[i].getAttribute('val') == 'answer') {
var input = rows[i].querySelector('input[type="text"]');
console.log(input.value);
}
}
<table>
<tr val='answer'>
<td>
<input type='checkbox' />
<input value="Some value" style='width:483px' type='text' />
</td>
</tr>
</table>

How can I get the data from hidden field in jQuery? (hidden field has class in place of id)

I am getting data from the database:
<table>
<?php
$select_data = mysql_query(" select * from `data_table` ") or die(mysql_error());
while($data_row = mysql_fetch_array($select_data))
{
?>
<tr>
<td>
<img src="../Stuff-site_data_images/<?php echo$data_row['data_image_name']?>" width="100" height="100" />
</td>
<td> <?php echo $data_row['data_image_name'];?> </td>
<td> <?php echo $data_row['data_description'];?> </td>
I want to get data from here:
<td align="center" class="row_id">
<input class="inner_row_id" type="hidden" value="<?php echo $data_row['data_id'];?>" name="show_detail_button" id="show_detail_button"> Show All
</td>
I want to get data from here:
</tr>
<?php
}
?>
</table>
so as far as I know jQuery will conflict when there is more than 1 id so that's why I used CSS class names "row_id" & "inner_row_id".
When I click on "row_id" I want the value of "inner_row_id"
and for that I have written the code below:
$(".row_id").click(function(e){
var row_id = $(".inner_row_id").val();
alert("Le click thyuu....");
});
Is there any one who suggest me what to do in this...
This should work
$(".row_id").click(function(e){
alert($(this).find('.inner_row_id').val());
})
The "click" function gives you access to this, which is the element that you clicked on. Find then looks for any decedents of the element which have class .inner_row_id.
Link to jsFiddle
As I see you are creating the input dynamically so use below JS:
$(".row_id").on('click',function(e){
var row_id = $(this).children('.inner_row_id').val();
alert("Le click thyuu....");
});
DEMO.

How to Check if other page field value is empty using jquery

I'm getting all contacts from Mysql db and then showing it on html row. Each row has onClick() method After click on each row it will show a details of contact to the right side of all contacts.
showing All contacts:
echo "<tr onclick='getDetails($cdid), showthirdbox($cdid), visited(this);'>";
echo "<td class='' valign='top' align='left' width='20'>$companyName</td>";
echo "<td class='' valign='top'>$family_name</td>";
echo "<td class='' valign='top'>$given_name</td>";
echo "<td class='' valign='top'>$department</td>";
echo "<td class='' valign='top'>$title</td>";
echo "</tr>";
This getDetails() call the getContactDetails.php (Contact Details) page. In this page I've a field called Note where user can enter notes.
So now I want to show a Confirm message to the user Only if user write something on Enter Note box but click other row (all contacts) without save this Enter Notes
Confirm mesaage will be : Do you want to save this Notes box before you go to other Contact ? Yes Or No. If Yes then saveNote() will be call otherwise it will load the new contact row.
I've no idea how can I do this using Jquery or Javascript ? Do you have any idea or solution ? Thank you.
getDetails() function:
function getDetails(id) {
id = id;
$.ajax({
type:"post",
url:"getContactDetails.php",
data:"id="+id,
success:function(res){
$('#visiable').show();
$('#notebox_visiable').show();
$('#thirdBox').show();
$('#all_contact_details').html(res);
showthirdbox(id);
//showNotexBox(id);
//showAllNotesBox(id);
}
});
}
getContactDetails.php page have Note field:
<tr>
<td colspan="2">Enter Note<p id="demo"></p></td>
</tr>
<tr>
<td colspan="2">
<center><img id="loading-image" src="images/loading-image.gif" style="display:none; margin-bottom:10px !important;"/></center>
<div id="Notesboxsuccess"></div>
<form action="" method="post" id="showNotesBox" name="notebox">
<input type="hidden" value="<?php echo $id; ?>" name="cdid" id="cdid"/>
<tr>
<td colspan="2"><textarea name="contentText" id="contentText" cols="35" rows="4" placeholder="enter note"></textarea></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Save" name="submit" class="submit" id="addNewNotes"/></td>
</tr>
</form>
Home page view after click on a row (All contacts) :
change only triggers on blur, so as long as the user stays in the textbox there is nothing to do.
jQuery change()
Attach a change event handler:
$("#contentText").change(function() {
$("#contentText").attr("ididwritesomething","yep");
}
In the save button remove the attribute jQuery removeAttr()
$("#contentText").removeAttr("ididwritesomething");
In the click handler for your contact list, check if the attribute is set (from this question):
var attr = $("#contentText").attr("ididwritesomething");
if (typeof attr !== typeof undefined && attr !== false && attr=="yep"){
//do you want to save?
}
Here you can use jQuery Change function to do this.
For example,
<input id="field" type="text" value="abcd">
<a id="pid" href="#">Link</a>
For the above html code the jQuery code is following
$(document).ready(function(){
$("#pid").click(function(){
$("#field").change(function(){
alert("The text has been changed.");
});// end of change
});// end of click function
});//end of document

Categories