CODEWITHSUNDEEP
javascriptjqueryhtml
Tony92
Tony92

Reputation: 91

How to dynamically change the default checkbox by the current checkbox with javascript?


I have a form generated by the Perl language. I want to customize this form to add css effects, without using the default perl form. The form works well. I can select each radio button before launching queries. But after validating the form, the focus of the radio button always returns the default check box, ie Date. I think the problem does not come from Perl but from the way I do it with my javascript function. But I did not find how to dynamically change the check box and select the current check box after the validation of the form ?
Does anyone have an idea?
thank you in advance

Here is my html (html 5) script :

print '<form name="newForm">';
print '<div>';
print '<input type="radio" name="sort" id="rdo-1" value="up2date" checked>';
print '<label for="rdo-1"><span>Date</span></label>';
print '</div>';
print '<div>';
print '<input type="radio" name="sort" id="rdo-2" value="title" >';
print '<label for="rdo-2"><span>Title</span></label>';
print '</div>';
print '<div>';
print '<input type="radio" name="sort" id="rdo-3" value="author">';
print '<label for="rdo-3"><span>Author</span></label>';
print '</div>';
print '<button type="submit" style="margin-right: 15px;" onClick="sorting()">Sort</button>';
print '</form>';
print "<br />\n";

Here is my Javascript :

function sorting() {
    if (document.getElementById("rdo-1").checked){
        document.getElementById("newForm").submit();
        document.getElementById("rdo-1").checked = true;
        document.getElementById("rdo-1").focus();
    } else if (document.getElementById("rdo-2").checked){
        document.getElementById("newForm").submit();
        document.getElementById("rdo-2").checked = true;
        document.getElementById("rdo-2").focus();   
    } else {
        document.getElementById("newForm").submit();
        document.getElementById("rdo-3").checked = true;
        document.getElementById("rdo-3").focus();   
    }

}

Upvotes: 0

Views: 135

Answers (2)

Tony92
Tony92

Reputation: 91

I solved my problem by setting conditions with the print command, because I think the command line print '... checked fixes the checked and does not lose to modify it and write it back on the other lines. If anyone has a better idea, I'd love to know him. Thanks again for the help.
My new script is below:

print "<form name='newForm'>\n";
    my $mySort = '';
    $mySort = $cgi->param("sort");
    if ($mySort eq "title"){
      print "<input type='radio' name='sort' id='rdo-1' value='up2date'>\n";
      print "<label for='rdo-1'><span>Date</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-2' value='title' checked>\n";
      print "<label for='rdo-2'><span>Title</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-3' value='author'>\n";
      print "<label for='rdo-3'><span>Author</span></label>\n";
    }elsif ($mySort eq "Author"){
      print "<input type='radio' name='sort' id='rdo-1' value='up2date'>\n";
      print "<label for='rdo-1'><span>Date</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-2' value='title'>\n";
      print "<label for='rdo-2'><span>title</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-3' value='Author' checked>\n";
      print "<label for='rdo-3'><span>Author</span></label>\n";

    } else {
      print "<input type='radio' name='tri' id='rdo-1' value='up2date' checked>\n";
      print "<label for='rdo-1'><span>Date</span></label>\n";
      print "<input type='radio' name='tri' id='rdo-2' value='title'>\n";
      print "<label for='rdo-2'><span>title</span></label>\n";
      print "<input type='radio' name='tri' id='rdo-3' value='Author'>\n";
      print "<label for='rdo-3'><span>Author</span></label>\n";
    }
    print '<button type="submit" style="margin-right: 15px;" value="Submit">Sort</button>';
    print "</form>\n";
    print "<br />\n";

Upvotes: 0

Alex
Alex

Reputation: 10216

First of all, you shouldnt use inline event handlers. Second, you are submitting the form multiple times. Just by clicking the submit button, the browser will submit the form. Then, in your JavaScript, you are re-submitting the form (why?). Third, maybe your onclick gets fired after the form is submitted. Use jQuery and the submit event:

(function($) {
  $(function() {
    $('form[name="newForm"]').submit(function() {
      var rdoOne = $('#rdo-1'),
          rdoTwo = $('#rdo-2'),
          rdoThree = $('#rdo-3');

      if (rdoOne.is(':checked')) {
        rdoOne.focus();
      }
      else if (rdoTwo.is(':checked')) {
        rdoTwo.focus();
      }
      else if (rdoThree.is(':checked')) {
        rdoThree.focus();
      }
    });
  });
})(jQuery);

Upvotes: 1

Related Questions