从<input>值设置变量

I need to implement Google Analytics (Universal/analytics.js) on a 20-something part AJAX-based questionnaire. The questionnaire works something like a choose-your-own-adventure, whereas the follow-up questions are all determined by the preceding answers.

Each input has a name and an ID. I'm interested in pulling the value from this field and setting it as a global variable in a dataLayer. Everything has a unique ID and Name, which I've started collecting in a database.

Here's an example of the HTML:

<table id="ctl00_ContentPlaceHolder1_2_Table1" class="CompSSRadio" cellpadding="1" cellspacing="1">
            <tr>
                <td class="CompSSRadioLabel">
                </td>
            </tr>
            <tr>
                <td class="CompSSRadioResponses">
                <table id="ctl00_ContentPlaceHolder1_2_1_48_1" class="CompSSRadioResponses" border="0">
                    <tr>
                        <td><input id="ctl00_ContentPlaceHolder1_2_1_48_1_0" type="radio" name="ctl00$ContentPlaceHolder1$2$1_48_1" value="4" /><label for="ctl00_ContentPlaceHolder1_2_1_48_1_0"><SPAN style="FONT-FAMILY: Museo 500"><SPAN style="FONT-SIZE: 14pt"><SPAN style="FONT-FAMILY: Museo 500"></SPAN>Test answer 1</SPAN></SPAN></label></td>
                    </tr><tr>
                        <td><input id="ctl00_ContentPlaceHolder1_2_1_48_1_1" type="radio" name="ctl00$ContentPlaceHolder1$2$1_48_1" value="5" /><label for="ctl00_ContentPlaceHolder1_2_1_48_1_1"><SPAN style="FONT-FAMILY: Museo 500"><SPAN style="FONT-SIZE: 14pt"><SPAN style="FONT-FAMILY: Museo 500"></SPAN>Test answer 2</SPAN></SPAN></label></td>
                    </tr>
                </table>
            </td>
            </tr>
        </table>

Here is the "next" button:

<input type="image" name="ctl00$ContentPlaceHolder1$btnNext2" id="ctl00_ContentPlaceHolder1_btnNext2" src="../App_Themes/Images/Right.gif" onclick="javascript: pageTracker._trackPageview('//forward.html');window.document.getElementById('ctl00_ContentPlaceHolder1_btnNext').disabled=true;window.document.getElementById('ctl00_ContentPlaceHolder1_btnNext2').disabled=true;__doPostBack('ctl00$ContentPlaceHolder1$btnNext2','');" style="border-width:0px;" />

And here is a script which does something with the form info:

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

I don't know if I need to hook into that or anything, since that's what's submitting information. Obviously I'm clueless. I feel like this is a fairly simple task, it's just my lack of javascript knowledge preventing me from crafting the necessary script.

Thanks ahead of time!

2个回答


如果您正在使用无线电选择多个值之一,则所有无线电元素必须具有相同的名称。 例如,如果您有:</ p>

  
男性</ label>


女性</ label>
</ code> </ pre>

您将只能选择“男性”或“女性”,但不能两者都选择。
考虑到这一点,使用Javascript访问所选值的方式应为:</ p>

  var元素= document.getElementsByName(“ sex”);

对于(i = 0; i <elements.length; i ++){
     var el = elements [i];

     如果(el.checked){
         alert(“检查值:” + el.value);
         打破; //因为将仅检查该组中的一个无线电,所以如果有更多的无线电,则没有必要检查其余无线电
     }
}
</ code> </ pre>

关于数据层,我一无所知,但是,如果我理解得很好,这听起来像是您在获取值时遇到问题。</ p>
     </ div>

展开原文

原文

IF you are using radios to select one of multiple values, all radio elements must have the same name. For example, if you have:

<input type="radio" name="sex" value="Male" id="radio_male">
<label for="radio_male">Male</label>

<input type="radio" name="sex" value="Female" id="radio_female">
<label for="radio_female">Female</label>

You will only be able to select "Male" or "Female", but not both. Taking that in consideration, the way to access the selected value, in Javascript, should be:

var elements = document.getElementsByName("sex");

for (i = 0; i < elements.length; i++) {
    var el = elements[i];

    if ( el.checked ) {
        alert("Checked value: " + el.value);
        break; // Because only one radio from the group will be checked, there's no point in checking the rest of them, if there are more
    }
}

About Data Layer, I have no clue, but it sounds like you are having problems getting the values, if I'm understanding it well.


如果您愿意使用jQuery,则更简单的方法是:</ p>

  var dataObj = {};

//获取选中的单选按钮的名称/值对
jQuery('input:checked')。each(
     function(){
         dataObj [$(this).attr(“ name”)] = $(this).val();
     }
);
</ code> </ pre>

等</ p>

您可以使用多种技术来按顺序遍历各个字段。 在问题中包含更多上下文(例如,从一个问题到下一个问题的行为是什么-例如,您可以从ajax调用中获取下一个元素ID吗?),更可靠的答案可以使您指向正确的位置 方向。</ p>
     </ div>

展开原文

原文

If you're open to jQuery, an even simpler method would be:

var dataObj = {};

// Get the name / value pair of the checked radio button
jQuery('input:checked').each(
    function() {
        dataObj[$(this).attr("name")] = $(this).val();
    }  
);

etc.

There's several techniques you could use to move through the fields in order. With a bit more context in the question (as in what the behavior is from one question to the next - can you get the next element ID from your ajax call, for example?), a more robust answer could get you pointed in the right direction.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐