随机选择所有表单字段值并填写表单 - JS或jQuery - 不确定哪个

Question

I have a form and for testing I want to have a button to automatically fill out all fields randomly in each group, for checkboxes and radios just select one randomly from each group type deal. Most of the forms are quite large and for testing purposes it's getting to be a pain in the butt to select items all the time.

An example of the form is:

<div class="rows"><b>Education</b><br>
<select name="edu" id="edu" validate="required:true"><option value="">Select One</option>
<option value="Some High School">Some High School</option>
<option value="High School graduate">High School graduate</option>
<option value="Some college">Some college</option>
<option value="College graduate">College graduate</option>
<option value="Master’s degree">Master’s degree</option>
<option value="Doctorate">Doctorate</option>
</select></div>

<div class="rows"><b>Payor status</b><br>
<select name="payor" id="payor" validate="required:true"><option value="">Select One</option>
<option value="Medicare/Medicaid">Medicare/Medicaid</option>
<option value="Insurance">Insurance</option>
<option value="Self Pay">Self Pay</option>
</select></div><br>

<div class="rows"><b>I am a physician.</b><br>
<input type="hidden" name="type33-8" value="YN">
<label><input type="radio" name="33-8" id="33Y" value="Yes" validate="required:true"> Yes</label> 
<label><input type="radio" name="33-8" id="33N" value="No"> No</label><br>
<label for="33-8" class="error">Please select an option</label></div><b>This doctor:</b><br>
<input type="hidden" name="type34" value="6PMultiple">

<div class="rows"><label>1.     Appears sincere.</label><br>
<input type="hidden" name="type34-247" value="6PMultiple">
<label><input type="radio" name="34-247" id="341" value="1" validate="required:true" > 1 - Very Strongly Disagree</label> 
<label><input type="radio" name="34-247" id="342" value="2" > 2 -  Strongly Disagree</label> 
<label><input type="radio" name="34-247" id="343" value="3" > 3 -  Disagree</label> 
<label><input type="radio" name="34-247" id="344" value="4" > 4 -  Agree</label> 
<label><input type="radio" name="34-247" id="345" value="5" > 5 -  Strongly Agree</label> 
<label><input type="radio" name="34-247" id="346" value="6" > 6 -  Very Strongly Agree</label></div>

<div class="rows"><label>2.     Is professional.</label><br>
<input type="hidden" name="type34-248" value="6PMultiple">
<label><input type="radio" name="34-248" id="341" value="1" validate="required:true" > 1 - Very Strongly Disagree</label> 
<label><input type="radio" name="34-248" id="342" value="2" > 2 -  Strongly Disagree</label> 
<label><input type="radio" name="34-248" id="343" value="3" > 3 -  Disagree</label> 
<label><input type="radio" name="34-248" id="344" value="4" > 4 -  Agree</label> 
<label><input type="radio" name="34-248" id="345" value="5" > 5 -  Strongly Agree</label> 
<label><input type="radio" name="34-248" id="346" value="6" > 6 -  Very Strongly Agree</label></div>

<div class="rows"><label>3.     Speaks clearly.</label><br>
<input type="hidden" name="type34-249" value="6PMultiple">
<label><input type="radio" name="34-249" id="341" value="1" validate="required:true" > 1 - Very Strongly Disagree</label> 
<label><input type="radio" name="34-249" id="342" value="2" > 2 -  Strongly Disagree</label> 
<label><input type="radio" name="34-249" id="343" value="3" > 3 -  Disagree</label> 
<label><input type="radio" name="34-249" id="344" value="4" > 4 -  Agree</label> 
<label><input type="radio" name="34-249" id="345" value="5" > 5 -  Strongly Agree</label> 
<label><input type="radio" name="34-249" id="346" value="6" > 6 -  Very Strongly Agree</label></div>

I had thought of running through all form elements:

for ( var i=0; i < document.form1.elements.length; i++ ) {
    if ( document.form1.elements[i].type == "radio" ) {
        //Something
    }
}

My problem is that goes through each and every element, that would work for the select dropdowns (although not sure how to randomly select one of the dropdowns options once there), but that wouldn't work for the radio's name groups.

I had thought that for selecting dropdown options I could run this:

Math.random() * (max - min) + min

After getting the options count to randomly select one using the integer returned, I don't know if that will work yet since I haven't tested it since I'm stuck on the radio problem.

Answer 1

for the radio buttons, you could loop through the 'rows' div's and get the child radio buttons from there:

$("div.rows").each(function () {
    var radios = $(this).find("input[type=radio]");
    if (radios.length > 0) {
        var randomnumber = Math.floor(Math.random() * radios.length);
        radios[randomnumber].checked = true;
    }
});

Answer 2

A jQuery free version is unfortunately a bit more complicated. Eg there you could group together all the Radios, then randomly select from them. Check out my Example on JSFiddle

This is also a more generic version than the one from Reinder. It works on any kind of HTML.

JS Code:

var radios = {};
var radionames = [];

var tmpname;
for ( var i=0; i < document.form1.elements.length; i++ ) {
    if ( document.form1.elements[i].type == "radio" ) {
        tmpname = document.form1.elements[i].name;
        if (! radios[tmpname]) {
            radios[tmpname] = [];
            radionames.push(tmpname);
        }
        radios[tmpname].push(i);
    }
}

var idx; 
for (var i=0; i < radionames.length; i++) {
    tmpname = radionames[i];
    idx = Math.floor(Math.random()*(radios[tmpname].length - 1));
    document.form1.elements[radios[tmpname][idx]].checked=true;
}

​ On a side note, your HTML is not valid, element IDs have to be always unique identifier.

Answer 3

Here's some jQuery I came up with for you:

$(function() {
    var radio_questions = $('div.rows');
    radio_questions.each(function() {
        var num_choices = $(this).find('input').length;
        var rand = getRandomIndex(1, num_choices - 1);
        $(this).find('input[value="' + rand + '"]').attr('checked', 'checked');
    });
});

function getRandomIndex(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Example: http://jsfiddle.net/w3GdT/7/