0

I have my table crated dynamically. Also I created textbox that should disable all other text boxes after user click to input text in one of them. What I'm struggling is to get button created just next to text box which I clicked on. My current code show the button on the same spot. Does not matter which text box I clicked on my button always show up next to the first text box. HTML code:

<tr>
    <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
    <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
    <td><input type="text" name="fname" id="fname">
        <input type="button" id="test" name="test" value="Save" onClick="testButton()" style="display: none">
   </td>
</tr>

JQuery code:

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $("#test").show();
        } else {
            $(":text").removeAttr('disabled');
            $("#test").hide();
        }
    });
});

I'm not sure why button show up only in the first row. My text box function works fine. If I click in one text box all other will be blocked. Only issue is that my button is not created next to the text box that I clicked but first one. If anyone see where is my code breaking please let me know. Thank you.

espresso_coffee
  • 5,980
  • 11
  • 83
  • 193

3 Answers3

2

Use next() and prev() to find next and previous element like following. Hope this will help you.

$(".fname").keyup(function (e) {
     if ($(this).val() != '') {
        $(".fname").not(this).attr('disabled', 'disabled');
        $(this).next(".test").show();
     } else {
        $(".fname").removeAttr('disabled');
        $(this).next(".test").hide();
     }
});

$(".test").click(function (e) {
     alert($(this).prev(".fname").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
        <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
        <td>
            <input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Save" style="display: none">
        </td>
    </tr>
    <tr>
        <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
        <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
        <td>
            <input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Save" style="display: none">
        </td>
    </tr>
</table>

Update:

Button:

<input type="button" class="test" name="test" 
     onclick="testButton(this)" value="Save" style="display: none">

JS Function

function testButton(btn) {
    var test = $(btn).prev('.fname').val();
    alert(test);
}
Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
  • Thank you that solved this problem. Another thing what does not work now is if I enter text and click on button I'm getting value just for the first input field, if I enter text in any other input field and click on button I will get empty alert. What can cause this problem? – espresso_coffee Dec 17 '15 at 19:15
  • 1
    This is not a good answer. You shouldn't use the same id for all the buttons on the page. – ataravati Dec 17 '15 at 19:16
  • 1
    See the updated answer. Hope this will solve your problem. @user3023588 – Ibrahim Khan Dec 17 '15 at 19:27
  • What if I want to pass value in javascript function like this: function testButton(){ var test = $('.fname').prev('.fname').val(); alert(test); } this code gives me undefined value in alert box.? – espresso_coffee Dec 17 '15 at 19:32
  • I tried this too:var test = document.getElementsByClassName('fname').value; – espresso_coffee Dec 17 '15 at 19:38
  • Thank you, that works. Can you explain why I have to use .prev() to get all values? I would like to understand this. – espresso_coffee Dec 17 '15 at 19:43
  • 1
    Because every `textbox` is placed before it's corresponding `button` and there are multiple `textbox` and `button` pair. So to find only the previous `textbox` of the `button` you have to use `prev()` @user3023588 – Ibrahim Khan Dec 17 '15 at 19:56
  • How I can do email validation of my input field type="text"? I tried to use JQuery validation email but is not that good. First time if I enter wrong email that form works fine but If I click twice on the button my email will be submitted even if it's wrong formatted. Is there any other way to check email before submitting? – espresso_coffee Dec 18 '15 at 17:51
2

The answer of Azim is partially correct, the "next" selector can't be an ID selector, otherwise you select only the specific textbox with the specific ID. The right way is:

$(this).next("input").show();

Example: here

eylay
  • 1,712
  • 4
  • 30
  • 54
Baro
  • 5,300
  • 2
  • 17
  • 39
1

That happens because all of the buttons have the same id. So, $("#test") always finds the first button:

You need to use a class instead of id, like this:

<input type="button" class="test" value="Save" onClick="testButton()" style="display: none">

Then, your key-up event should be like this:

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $(this).next(".test").show();
        } else {
            $(":text").removeAttr('disabled');
            $(this).next(".test").hide();
        }
    });
});
ataravati
  • 8,891
  • 9
  • 57
  • 89