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>
Related
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
I am trying to get value of a text box by using closest().
My form contains dynamically created table with one text box and button in each row . I want to show the value of text box in button click event.
Table format is given below
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
I have written one javascript code (given below) . when the code will execute, it return a null value.
Function
function UpdateSchedule() {
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
Please let me know why am not getting the null value.
jQuery .closest() goes up from the current element until it finds what you give it to find. jQuery .find() goes down until it finds what you give it to find.
This does the trick:
http://jsfiddle.net/6T3ET/
id must be unique, you need to use class instead:
<button class="schedule schbtn btn btn-primary" type="button">
<input class="amtcls txtamt" type="text" value="500">
an use .click() instead of inline onClick handler since you're using jQuery. So you can do:
$('.schedule').click(function() {
var amt2 = $(this).closest('td').prev('td.amountclm').find('.amtcls').val();
alert( amt2);
});
Please note that the .amountclm input is the child of a td whose is the immediate previous sibling of parent td of your clicked .schedule button.
Try this
replace 'this' with the 'schedule_' class attribute
function UpdateSchedule() {
var amt2 = $(".schedule_").closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
HTML :
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
or try with Jquery as
$(document).on('click', '.schedule_',function(){
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
} );
Use .parent() and .prev() in jquery for this contradiction
$(".schbtn").click(function() {
var amt2 = $(this).parent().prev("td.amountclm").find('.amtcls').val();
alert( amt2);
});
Fiddle
First of all .closest() is not plain JavaScript. It's a function from jQuery.
http://api.jquery.com/closest/
and it traverses up in the element hierachy. And td.amountclm is not in the element hierachy of the button#schedule.
Therefore .closest wont find it.
I'm having a problem with style.display.
I want to show a submit box (which is inside a table) when I change a number and it's not working.
Here's the code:
<head>
<script>
function changedisp(Section){
if (Section.style.display=="none"){
Section.style.display=""
}
else{
Section.style.display="none"
}
}
function raisenumber(s,s1) {
var x;
x = document.getElementById(s).innerHTML;
document.getElementById(s).innerHTML = x*1 + 1;
changedisp(s1);
}
</script>
</head>
<body>
<table>
<tr>
<th><b>ID</b></th>
<th><b>number</b></th>
<th><b>buttoon</b></th>
<th><b>submit</b></th>
</tr>
<form action="modifica_inventario.php" method="post">
<tr>
<td> <b id="cell1A">item number1</b></td>
<td> <b id="cell2A">10</b></td>
<td> <button id="cell3A" type="button" onClick=raisenumber("cell2A","cell4A")>+1</button></td>
<td> <b id="cell4A" style="display: none;"> <input type="submit" value="submit"/></b>   </td>
</tr>
<tr>
<td> <b id="cell1B">item number1</b></td>
<td> <b id="cell2B">10</b></td>
<td> <button id="cell3B" type="button" onClick=raisenumber("cell2B","cell4B")>+1</button></td>
<td> <b id="cell4B" style="display: none;"> <input type="submit" value="submit"/></b>   </td>
</tr>
</form>
</table>
</body>
Well I don't know why it's not showing on and off the submit button every time a press the button...
I also tried replacing
changedisp(s1);
by
s1.style.display="";
Any comments about this?
You need to pass the actual element you are trying to hide and show to your changedisp function. In your code you are just passing the ID name of the element. Try this...
function raisenumber(s,s1) {
var x;
x = document.getElementById(s).innerHTML;
document.getElementById(s).innerHTML = x*1 + 1;
changedisp(document.getElementById(s1));
}
notice changedisp(document.getElementById(s1)); passes the actual element instead of just the ID.
You need to set it to a display type explicitly:
Section.style.display="inline";
Or inline-block, or block, or whatever you want.
A <B> is by default display:inline, so trying setting to "inline" not the empty string, "".
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>
I have a table: in first row I have an anchor to click, in second - <asp:CheckboxList /> expanding to another table.
How can I access inputs inside that table using jQuery? I want to select all using one link, and deselect all using another one.
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!-- Anchor to click -->
<a onclick="do stuff" href="javascript://">Select all</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<!-- CheckboxList -->
<table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
<tbody>
<tr>
<td>
<!-- input to select -->
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I tried $(this).parent().('#list > input') but it doesn't work. I'm not familiar with jQuery, so please help. Thanks!
This is the jQuery I think you need:
// When the select link is clicked
$('#selectall').click( function ( ) {
\\ For each checkbox inside an element with class "link" set to checked
$('.list input[type=checkbox]').attr('checked','checked');
});
You need to change your link to this:
<a id="selectall" href="javascript:void( );">Select all</a>
Similarly, for deselect, jQuery:
$('#deselectall').click( function ( ) {
$('.list input[type=checkbox]').removeAttr('checked');
});
Link:
<a id="deselectall" href="javascript:void( );">Select all</a>
Because it would hurt me not to, I've got to warn against using tables for laying out your form. It's very bad practice these days, and you can make a layout that looks as good, but is more flexible, using divs and CSS. I'd go for:
<div id="select_links">
<!-- Anchor to click -->
<a id="selectall" href="javascript:void( );">Select all</a>
<a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</div>
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</div>
</div>
EDIT: Mark's right, that should have been removeAttr(checked), not attr('checked',null);
It is as simple as just targeting all checkboxes and setting the checkbox.
$("#doIt").click(function(){
$("input[type='checkbox']").attr("checked", true);
});
If you want to remove the check
$("#doIt").click(function(){
$("input[type='checkbox']").removeAttr("checked");
});
Another option would be to use toggle() which can be used to toggle checkboxes on an off.
$("#doIt").toggle(function() {
$(this).text("Select All");
$("input[type='checkbox']").removeAttr("checked");
}, function() {
$(this).text("Deselect All");
$("input[type='checkbox']").attr("checked", true);
});
Code example on jsfiddle.
I would remove any dhtml code from your anchor tag, get rid of the onclick and change the href to just #. With jquery all you need is a class or id.
so you should have:
in your html:
<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>
in your javascript:
$('a.toggle_checks').click(function(){
$('table.list').children('input').attr('checked', this.id == 'select_on');
});
so what this code is doing is $('a.toggle_checks') is selecting all anchor tags with class toggle_checks, binding a click event handler, when clicked $('table.list') selects the tables with class list, .children('input') selects the inputs within those tables, and the attr part sets the checked attribute to checked if the anchor tag has the id select_on and not if otherwise.