Home/ Questions/Q 6625965
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:50:15+00:00

I have these two elements in my page: <input type=’button’ value=undo style=display:none onClick =

  • 0

I have these two elements in my page:

<input type='button' value="undo" style="display:none" onClick = "undoFunction()"/>
<input type='checkbox'  onClick = "ajaxFunction()"/>

I want when ever I click checkbox, undo button appears. I have used jquery but something is wrong. it doesn’t work.

this is my whole function:

function ajaxFunction(){
        $(document).ready(function(){
        $("form input:checkbox").click(function () {
            var hrefAdd = ($(this).nextAll('a').attr("href"));
            var word = savequery();
            var ajaxRequest;  // The variable that makes Ajax possible!
            try{
                // Opera 8.0+, Firefox, Safari
                ajaxRequest = new XMLHttpRequest();
                } catch (e){
                    // Internet Explorer Browsers
                    try{
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            try{
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                                } catch (e){
                                    // Something went wrong
                                    alert("Your browser broke!");

                                    return false;
                                    }
                                }
                        }

                var queryString ="?Word=" + word + "&Link_Add=" + hrefAdd  ;
                    ajaxRequest.open("GET","ajax_request.php" + queryString , true);
                    $(this).prev('input[type="button"]').show();
                    $(this).css("display","none");


                ajaxRequest.send(null);
                });
        });
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It should be like:

     $(this).prev('input[type="button"]').show()

    The = instead of :

    And a small “better practice” note:

    Better approach would be to define your event handlers in non-obtrusive way (in case of jQuery in a domready callback:

    $(function() {
    $('input[type="checkbox"]').click(function() {
        $(this).prev('input[type="button"]').show();
    });
});

    Same with the click event button input.

    UPDATE:

    Your whole JS code (of course wrapped in <script type="text/javascript"></script> tags) should look similar to this (as I’ve written in comment to your original question – you don’t need to wrap a domready callback in another function)

    $(document).ready(function(){
    $("form input:checkbox").click(function () {
        var hrefAdd = ($(this).nextAll('a').attr("href"));
        var word = savequery();
        var data = {"Word": word, "Link_Add": hrefAdd};

        $.get('ajax_request.php', data);
        $(this).prev('input[type="button"]').show();
        $(this).css("display","none");
    });
});

    I’ve omitted e.g. a success callback from an ajax call since you don’t have one in your original code, but you can find all in Jquery.get docs.

    UPDATE 2:

    Ok, here’s complete page which does what you want (except that it may spit out an 404 error after ajax call depending, whether ajax_request.php exists or not). Does this work for you?

    <html>
  <head><title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <script type="text/javascript" encoding="utf-8">
      $(function() {
          $("form input:checkbox").click(function () {
              var hrefAdd = ($(this).nextAll('a').attr("href"));
              var word = savequery();
              var data = {"Word": word, "Link_Add": hrefAdd};

              $.get('ajax_request.php', data);
              $(this).prev('input[type="button"]').show();
              $(this).css("display","none");
          });
      });
      // just a mock function to make a call to it in checkbox click callback work
      var savequery = function() {
        return "foo";
      }
    </script>
    <form action="" method="get">
      <input type="button" value="undo" style="display:none"/>
      <input type="checkbox" />
      <a href="http://example.com/#foo">test link to fill hrefAdd</a>
    </form>
  </body>
</html>
    • 0