3

Background

I have a form which a user must click a radio button to select a security level while adding another user. Doing a little researching, it has become apparent that jQuery Validation is not compatible with with buttons acting as radio selects. Therefore, I have taken a look at someone elses solution, which 'on clicking' a button, sets a hidden value as the value of the button, and that hidden value is the one that validates the users input. Unfortunately,it is not working.

Can someone help me tweak the code that will allow this hidden input button to assume the value of the button clicked. Please keep in mind I have omitted a few regular input fields such as first name and last name in the html.

UPDATE:

It just so happens that this form is inside a modal window. I believe Bootstrap's modal-open handler is interfering with the actual jquery of .on. Can anyone provide a solution with the 'newly brought to light' information?

Buttons in Form

<div class="btn-group" data-toggle="buttons" id="addSecLvlButtons" >
    <label id="addSecLvl1Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">Security Lvl 1</label>
    <label id="addSecLvl2Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption2" value="2">Level 2</label>
    <label id="addSecLvl3Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption3" value="3">Level 3</label>
    <label id="addSecLvl4Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption4" value="4">Level 4</label>
    <label id="addSecLvl5Label" class="btn btn-default btn-gradient btn-sm">
      <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption5" value="5">Level 5</label>
</div>
 <input required type="hidden" name="addSecLvl" id="addSecLvl">

jQuery

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
    $('#addSecLvl').val($(this).val());
});


//Validate the form and show hidden fields
$('#addUser').validate({
    debug: false,
    ignore: [],
    rules: {
        addFirstName: "required",
        addLastName: "required"
    },
    messages: {
        addFirstName: "Please enter the new user's first name",
        addLastName: "Please enter the new user's last name"
    }
});

POSSIBLE SOLUTION SUGGESTION

I have this code, which does seem to be working fine with bootstrap inside the modal window. Maybe a slight tweak would do the trick for .on as well? Just trying to 'think outside the box'

$("#addUserName").focus(function() {
    var firstname = $("#addFirstName").val();
    var lastname = $("#addLastName").val();
    if(firstname && lastname && !this.value) {
        this.value = firstname + "." + lastname;
    }
});
hawkhorrow
  • 475
  • 2
  • 7
  • 18

1 Answers1

1

Good news, you're pretty close. You're passing the label object into your click handler, rather than the input object (note that you're passing the object with class .btn, which is the label).

Try something like this:

HTML

<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">`

JavaScript

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
    $('#addSecLvl').val($(this).val());
});`

Here is a JSFiddle demonstrating the code. Good luck!

the911s
  • 1,824
  • 17
  • 17
  • sorry buddy, doesn't seem to work. i've modified it on the server and still no go :( – hawkhorrow Jun 04 '14 at 00:44
  • Strange, it works perfectly for me. You updated all your tags with the proper class name? You should double-check that your click handler is being reached by putting in a debug message `console.log("Got here");` or `alert("Got here");` – the911s Jun 04 '14 at 00:46
  • hmmmm still nothing. I dont presume this should be in a `document.ready()` function to work. It shouldn't need to :\ – hawkhorrow Jun 04 '14 at 00:54
  • Correct, that's not necessary. If you put a debug alert inside that click handler and it's not being called when you click whatever you've bound it to, then you have a syntax error somewhere. Check out the JavaScript console on whatever browser you're using and you should see it pop up. Make sure you updated the click handler as shown also, not just the `` tags. – the911s Jun 04 '14 at 00:59
  • I updated the answer with a JSFiddle showing how it should work. Hope you can figure it out! – the911s Jun 04 '14 at 01:05
  • Only two things could really be wrong at this point. 1) You're not including jQuery.js in your header, or 2) Your JavaScript is being executed before the HTML in the page. Good luck, you'll figure it out. – the911s Jun 04 '14 at 01:09
  • One last thought. This form happens to be in a modal window. I just compared all my code to EXACTLY yours. Literally copy/pasted from your jsfiddle. Would bootstraps handler of modal-open have anything to do with this javascript not activating AFTER the modal is opened? – hawkhorrow Jun 04 '14 at 01:14
  • Ok!!! It definately is the modal window handler that is interefering!! Guess i'll need another workaround. Any suggestions!? – hawkhorrow Jun 04 '14 at 01:18
  • I have modified the question taking into consideration your input. thank you again, and hopefully this will lend a further hand to the solution – hawkhorrow Jun 04 '14 at 01:35
  • Have a look at this... I'll whip up a Fiddle if I need a break! http://stackoverflow.com/q/10626885/1435804 – the911s Jun 04 '14 at 01:46