I would like to have the text after the "Question:" and "Answer:" change into text input upon clicking the Edit_Question button. I don't know a good way to make this work. Here is the code I have:
<script type="text/javascript">
<!--
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
})
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>
</ul>
Just disable/enable the textbox and style the disabled version:
HTML:
<button id="edit">Edit</button>
<input id="myinput" type="text" disabled="disabled" value="My Value"/>
CSS:
input:disabled {
background-color:#fff;
border:none;
}
JavaScript:
document.getElementById("edit").onclick = function() {
document.getElementById("myinput").disabled = "";
};
First of all, you are missing a closing </td> tag after your page <select>. If you want to make it easy to select the text of your questions and answers, wrap them in an element. In my example, I wrapped them in a <span> element and gave them question and answer classes respectively.
Try a demo: http://jsfiddle.net/v3yN7/
HTML:
<li>
<h3><u><strong><i>Question:</i></strong><span class="question">What should I ask?</span></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><span class="answer">This is a rather short answer</span></h4>
<table style='max-width: 250px;'>
<tbody>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select></td>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
Javascript:
$('.Edit_Question').click(function() {
// Find the <li> element the whole clicked thing is wrapped in
var $item = $(this).closest('li');
// Select all question and answer wrappers
$item.find('.question,.answer').each(function() {
var $this = $(this);
// Get the question/answer text
var txt = $this.text();
// Empty the wrapper and replace them with an input box
$this.empty().append($('<input type="text" />').val(txt));
});
});
I assumed you just want a simple input box for editing, but it can be easily changed to a <textarea> if needed.
As to what happens next, I'll leave it up to you. :)
just copy this code to your page without damading your script.
<script type="text/javascript">
<!--
var editBox = false;
$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});
$('.Edit_Question').click(function() {
if(editBox)
{
$('.edit_area').css({'display':''});
editBox = true;
} else {
$('.edit_area').css({'display':'none'});
editBox = false;
}
});
//-->
</script>
<ul class="Question_List">
<?php foreach($FAQS as $i => $FAQ) { ?>
<li>
<h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
<div>
<h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
<table style='max-width: 250px;'>
<tbody>
<tr id="edit_area" style="display:none;">
<td colspan=3><textarea cols=20 rows=5 name="editTextBox"></textarea></td>
</tr>
<tr>
<td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
<td><input type='button' class="Edit_Question" value='edit'/></td>
<td><input type='button' class="Delete_Question" value='delete'/></td>
</tr>
</tbody>
</table>
</div>
</li>
<?php } ?>
<li><br><input type="button" class="New_Question" value="NEW"/></li>
Related
I have two elements and am trying to make each be visible / not visible depending on if the checkbox is checked, but nothing is happening.
Can anyone figure out why? Thanks
<script>
document.getElementById('cbox').onchange = function() {
if ( document.getElementById('cbox').checked === false ) {
document.getElementById("1").style.visibility = "hidden";
document.getElementById("2").style.visibility = "visible";
}
else{
document.getElementById("2").style.visibility = "hidden";
document.getElementById("1").style.visibility = "visible";
}
};
</script>
<input type="checkbox" style="-webkit-appearance:checkbox;" id="cbox">
<p style="color:black;">I agree</p>
<tr>
<td id="1" style="background-color:#3cadd4;width:5px;"><div><a
style="color:white;" href="#" onclick="document['Order'].submit()">PAY1
NOW</a> </div></td>
<td id="2" style="background-color:#3cadd4;width:5px;"><div><a
style="color:white;" href="#" onclick="document['Order'].submit()">PAY2
NOW</a> </div></td>
use div not td
,td use just in table with tr
<table>
<tr>
<td>
</td>
</tr>
</table>
<div id="1" style="background-color:#3cadd4;width:5px;"><div><a
style="color:white;" href="#" onclick="document['Order'].submit()">PAY1
NOW</a> </div></div>
see my code: https://codepen.io/miladfm/pen/XRwmvw
You have an error in your HTML. You use a tr and td but without using a table. These elements should be inside a table.
Correct your HTML and everything works fine:
document.getElementById('cbox').onchange = function() {
if ( document.getElementById('cbox').checked === false ) {
document.getElementById("1").style.visibility = "hidden";
document.getElementById("2").style.visibility = "visible";
}
else{
document.getElementById("2").style.visibility = "hidden";
document.getElementById("1").style.visibility = "visible";
}
}
<input type="checkbox" style="-webkit-appearance:checkbox;" id="cbox">
<p style="color:black;">I agree</p>
<table>
<tr>
<td id="1" style="background-color:#3cadd4;width:5px;"><div><a
style="color:white;" href="#" onclick="document['Order'].submit()">PAY1
NOW</a> </div></td>
<td id="2" style="background-color:#3cadd4;width:5px;"><div><a
style="color:white;" href="#" onclick="document['Order'].submit()">PAY2
NOW</a> </div></td>
</tr>
</table>
jsfiddle: https://jsfiddle.net/grkuLznv/
Because the JavaScript is not in an 'onload' handler or something, the script does not 'know' the 'cbox' id. Just put your JS code at the end of the document and it will be fine
From the above image currently 1st View Details is clicked so it is showing as Hide Details.
if i click on 3 rd View Details all 1st one or(Active one) has to be relaced to view details how can i do that..?
Here what i have tried:
Hide Details:
$("#tbodyid" ).on( "click", ".hide-details", function() {
$("#participantsForGd").hide();
var field = $(this);
field.text("View Details");
field.addClass("view-details");
field.removeClass("hide-details");
});
View-datails
$("#tbodyid" ).on( "click", ".view-details", function() {
$("#participantsForGd").show();
var field = $(this);
field.text("Hide Details");
field.addClass("hide-details");
field.removeClass("view-details");
});
My html:
<?php while($grpData = $grpQuery->fetch_assoc()){ ?>
<tr>
<td>
<span id="<?php echo $grpData['group_id'];?>" class="view-details">View Details</span>
</td>
</tr>
<?php } ?>
This one has to work like toggle:
<form id="participantsForGd" >BLAH BLAH </form>
Your html structure is not good to do this task easily. I am showing how you perform this task. Then you can modify as your need.
HTML:
<button class='details-btn hide-details'>Hide Details</button>
<button class='details-btn view-details'>View Details</button>
<button class='details-btn view-details'>View Details</button>
<button class='details-btn view-details'>View Details</button>
JQuery:
$('.details-btn').click(function(){
$('.details-btn').each(function(){
$(this).removeClass('hide-details').addClass('view-details').text('View Details');
});
$(this).removeClass('view-details').addClass('hide-details').text('Hide Details');
})
I think your php code will generate dom structure as below:
<table>
<tbody id="tbodyid">
<tr>
<td id="group-id-1" class="details view-details">View Details</td>
<td id="group-id-2" class="details view-details">View Details</td>
<td id="group-id-3" class="details view-details">View Details</td>
<td id="group-id-4" class="details view-details">View Details</td>
</tr>
</tbody>
</table>
And you have four divs which contains details for each button.
<div id="participantsForGd-1" class="participantsForGd"></div>
<div id="participantsForGd-2" class="participantsForGd"></div>
<div id="participantsForGd-3" class="participantsForGd"></div>
<div id="participantsForGd-4" class="participantsForGd"></div>
My solution is :
$('#tbodyid').on('click', '.details', function(){
$('.details').each(function(){
$(this).removeClass('hide-details').addClass('view-details').text('View Details');
});
$('.participantsForGd').each(function(){
$(this).hide();
});
$(this).removeClass('view-details').addClass('hide-details').text('Hide Details');
$('#participantsForGd-' + $(this).attr('id').split('-')[2]).show();
})
$(document).ready(function() {
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div><input type="text" name="Tape_Code[]" value=""/>delete</div>';
var x = 1;
$(addButton).click(function() {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
});
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<?php
include_once 'dpconnect.php';
$que=mysqli_query($MySQLiconn,"select Backup_Name from admin_backup_list ");
if(isset($_POST['confirm'])) {
$Date=date('d/m/y');
$Backup_Name=$_POST['Backup_Name'];
$Tape_Code = $_POST['Tape_Code'];
$Operator_Approval = $_POST['Operator_Approval'];
$Operator_Remark = $_POST['Operator_Remark'];
$abc=mysqli_query($MySQLiconn,"insert into backup_details(Date, Backup_Name, Tape_Code,Operator_Approval,Operator_Remark)values('$Backup_Name','$Tape_Code','$Operator_Approval','$Operator_Remark')");
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<?php $Date=date( 'd/m/y'); ?>
<form name="form2" action="" method="post">
<table>
<tr>
<td width="103">Date</td>
<td width="94">Backup_Name</td>
<td width="94">No Of Tapes</td>
<td width="53">Tape Code</td>
<td width="71">Operator Approval</td>
<td width="144">Operator Remark</td>
</tr>
<?php if ($que->num_rows > 0) { while ($row = mysqli_fetch_array($que)) { ?>
<tr>
<td>
<?php echo $Date; ?>
</td>
<td>
<?php echo $row[ 'Backup_Name']; ?>
</td>
<td>
<input type="text" name="No_Of_Backup">
</td>
<td>
<div class="field_wrapper">
<input type="text" name="Tape_Code" value="" />add
</div>
</td>
<td>
<input type="text" name="Operator_Approval">
</td>
<td>
<input type="text" name="Operator_Remark">
</td>
<td colspan="8">
<input type="submit" name="confirm" value="Confirm">
</center>
</td>
</tr>
<?php } } ?>
</table>
</form>
</body>
</html>
I'm doing this code in php. I need a help to add text fields dynamically in to the table's particular column. I have done the code using JavaScript also. But the problem is when I add field in one row, all rows are updating with extra fields. I need a help. How can I insert those data to MySQL?
The problem with your code is that you are using the class selector to select the elements. Class selector returns array like object of all the elements having that class.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
you can find out which element was clicked if you change your code similar to below one.
add
and in the script
function addButton(ev) {
var clickedElement = console.log(ev.target);
}
Now you have the element which was clicked by user and you can find the parent td/tr and append html for textbox.
In $Tape_Code = $_POST['Tape_Code']; You will get array of text input you have to insert it in database in form that you want.
$Tape_Code = $_POST['Tape_Code']
foreach($Tape_Code as $code){
echo $code;
}
Hello all,
I need to create textbox dynamically(depending on condition), when user clicks on employee it should get added next to employee, if user clicks on another element, it should get added next to another element
I have tried following, but I am not able to get exact td and function by which i can append textbox to it.
$("#emlpyeetd").after('<s:textfield id="employeeVal" name="employeeView.policyOrQuoteNumber" maxlength="15" style="width: 200px;" class="hideForAnotherField" theme="simple"></s:textfield>');
<td width="25%">
employee
</td>
<td id="policytd" class= "anotherfield" width="25%"></td>
Try something like this, it will remove 1st textbox when you click on 2nd option.
Jquery code
<script>
$(document).ready(function(){
$(".radio_action").click(function(){
if($(this).val() == "E" ){
$("#other_text").html("");
$("#emp_text").html("<input type='text' >");
}
else if($(this).val() == "A" ) {
$("#emp_text").html("");
$("#other_text").html("<input type='text' >");
}
})
});
</script>
HTML code
<table>
<tr>
<td><input type="radio" name="radio_type" value="E" class="radio_action" /> Employee</td>
<td id="emp_text"></td>
</tr>
<tr>
<td><input type="radio" name="radio_type" value="A" class="radio_action" /> Another Element</td>
<td id="other_text"></td>
</tr>
</table>
Html
<div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val1</div>
<div class="editor-wrapper"></div>
</div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val2</div>
<div class="editor-wrapper"></div>
</div>
</div>
JS
$(document).ready(function() {
$('input[name="somename"]').click(function() {
$(this.closest('.container')).find('.editor-wrapper').html($('<input>'))
});
});
jsfiddle
Im a php developer, very little experience with javascript/jquery.
Basically i have a textbox and a link with a href. When the user "keyup"s in the textbox i want the href in the link to append the value.
However i have multiple textboxes and links that should be changed together.
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5">The link</a>
</td>
</tr>
Okay so after seeing that basic set up, lets the the user type into the first text box "23-27". Now i want this to be added to the links href. So it will be appended with "&chapter=(WHAT EVER THEY TYPE IN THE TEXT BOX)".
How can i achieve this in jquery?.
I have tried a few things, my last attempt is below:
<script>
$('.target').keyup(function(){
var currentHref = $('.link').attr("href");
$(this).parents('tr').next('tr').closest('.link').attr("href", currentHref + $(this).val());
});
</script>
Any help would be great thank you.
You were on the correct path until searching for the .link. To search for direct/nested children in jQuery, use find()
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
Also, note above we do not set the attribute with
$('.link').attr("href");
because there are many .link elements. We use $(this) in the context of the found .link element
Finally, use custom data-* attributes to preserve the original href like
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
$('input').keyup(function() {
var that = $(this);
that.closest('tr').next('tr').find('.link').attr('href', function() {
return $(this).attr('data-original-href') + that.val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
<tr>
<td>
<div class="chapter_update">
<form>
<input class="target" type="text">
</form>
</div>
</td>
</tr>
<tr>
<td>
<a class="link" href="/index.php/cases?id=5" data-original-href="/index.php/cases?id=5">The link</a>
</td>
</tr>
</table>
Try this, it is working actually.
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
$('.target').keyup(function (e) {
var input = $(this);
var closestlink = input.closest('tr').next('tr').find('.link');
var linkHref = closestlink.attr('href'); // You aren't using this actually, but just in case you need to use the current href, not the default.
var defaultHref = closestlink.attr('default');
closestlink.attr('href', defaultHref + input.val());
});
https://jsfiddle.net/e8uLc9nm/1/
Another option would be removing this part
$.each($('.link'), function(){
$(this).attr('default', $(this).attr('href'));
});
And adding via HTML a default tag for your link or something else with the default value, this way you won't need to use jQuery to set the default value.
Try this
$(document).ready(function() {
$('#txt').keyup(function(e) {
$("a").attr("href", $("a").attr("href") + String.fromCharCode(e.which).toLowerCase());
$("div").html($("a").attr("href"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
some text for link
<div>
</div>