Javascript 使用div id如何将值文本输入到另一个div

我得到了长度和宽度的警报值，但是我无法在我使用jquery的下一个div类中打印文本

Html:

Jquery提交的完整代码：

<script type="text/javascript">
  $(window).load(function()
   {
        $('.green').hide();
        $('.red').show();
        });
         $(document).ready(function(){
          $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red")
             {

    $(".box").not(".red").hide();
        $(".red").show();
       $(document).ready(function() {
       $('#lenbredth').validate({
        rules: {
        length: {
        required: true,
        number: true,
        range: [48, 84]
        },
        breadth: {
        required: true,
        number: true,
        range: [24, 78]
        }
        },enter code here
        messages: {

        length: {
        required: 'Please select a template'
        },
        breadth: {
        required: 'Please select a template'
        }
        },
        submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div4").show();
        var dataString = $(this.currentForm).serialize();
        var lenbreath = dataString.split('&');
         var bed1= lenbreath[0];
         var len = bed1.substr(7,9);
         alert(len);
          $("#len").val(len);
         var bed2= lenbreath[1];
         var bre = bed2.substr(8,10);
         $("#bre").val(bre);
         return false;
        }

        });
        $("#summer5").click(function() {
        $("#lenbredth").submit();
        });
        $("#length").change(function(){
        var length =$(this).val();
        $("#breadth").change(function(){
        var breadth =$(this).val();
        var lenbre= length * breadth;
        //alert(lenbre);
        var result =length.concat(breadth);
        var len = (length * breadth) ;
        });
        });
        });
    }
    if($(this).attr("value")=="green")
    {
        $(".box").not(".green").hide();
        $(".green").show();

          $(window).load(function()
        {
        $('.dimension').hide();
        $('#d1').show();
        });


        $('.bed_type ul li ').click(function()
        {
        var i = $(this).index();
        $('.dimension').hide();
        $('#d' + (i+1)).show();
        var type  ='b' + (i+1);
        document.getElementById(type).addEventListener("click", bedtype);
         });
        $('.dimension ul li').click(function () {
        var i = $(this).index();
        var single  ='single' + (i+1);
        //alert(single);
        var doubles  ='doubles' + (i+1);
        var queen  ='queen' + (i+1);
        var king  ='king' + (i+1);

        document.getElementById(single).addEventListener("click", price);
        document.getElementById(doubles).addEventListener("click", price);
        document.getElementById(queen).addEventListener("click", price);
        document.getElementById(king).addEventListener("click", price);


        });
        function price() 
        {
        $(document).ready(function() {
         $('#radioselection').validate({
         submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div4").show();
        var dataString = $(this.currentForm).serialize();
             var lenbre = dataString.substr(22,27);
             var arr = lenbre.split('*');
             var len= arr[0];
            $("#len").val(len);
           var bre= arr[1];
           $("#bre").val(bre);

         return false;
        }
        });
        $("#summerss").click(function() {
        $("#radioselection").submit();
        });
        var price_btn=this.id;

        var price_value = document.getElementById(price_btn).value;
        var arr = price_value.split('*');
        });
        }
        }
        });
       });
      $(document).ready(function()
       {
      $('#plainpattern').validate({
          rules: {
           plainpattern:{
                required: true
            }
        },
        messages: {
           plainpattern:{
                required: 'Please select the image plain or pattern'
             }
           },
        submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div5").show();
        var len = ($('#len').attr('value'));
        $('#length').text($('#len').val());
        var bre =($('#bre').attr('value'))
        $('#breadth').text($('#bre').val()); 
        var dataString = $(this.currentForm).serialize();
        var plainpattern = dataString.substr(13,16);
        $("#mattersplainpatters").text(plainpattern + ' "');
        return false;
        }
        });
        $("#summer7").click(function() {
        $("#plainpattern").submit();
        });
        $('li').click( function(){
        $('li').removeClass('selected');
       $(this).addClass('selected');
        var legend = $(this).children("input[type=radio]").val();
        });
        });

$（窗口）。加载（函数（）
{
$（'.green'）.hide（）；
$（'.red'）.show（）；
});
$（文档）.ready（函数（）{
$（'input[type=“radio”]”）。单击（函数（）{
如果（$（此）.attr（“值”）=“红色”）
{
$（“.box”）.not（“.red”）.hide（）；
$（“.red”）.show（）；
$（文档）.ready（函数（）{
$（'#lenbredth'）。验证({
规则：{
长度：{
要求：正确，
数字：对，
范围：[48,84]
},
宽度：{
要求：正确，
数字：对，
范围：[24,78]
}
}，在此处输入代码
信息：{
长度：{
必需：“请选择一个模板”
},
宽度：{
必需：“请选择一个模板”
}
},
submitHandler:function（）{
$（'div[id^=div]'）。hide（）；
$（“#div4”）.show（）；
var dataString=$（this.currentForm）.serialize（）；
var lenbreath=dataString.split（'&'）；
变量bed1=lenbreath[0]；
var len=bed1.substr（7,9）；
警报（len）；
$（“len”）.val（len）；
变量bed2=lenbreath[1]；
var bre=bed2.substr（8,10）；
$（“bre”）.val（bre）；
返回false；
}
});
$（“#summer5”）。单击（函数（）{
$（“#lenbredth”）.submit（）；
});
$（“#长度”）.change（函数（）{
var length=$（this.val（）；
$（“#宽度”）.change（函数（）{
var宽度=$（this.val（）；
var lenbre=长度*宽度；
//警惕（lenbre）；
var结果=长度。混凝土（宽度）；
变量len=（长度*宽度）；
});
});
});
}
如果（$（this.attr（“值”）=“绿色”）
{
$（“.box”）.not（“.green”）.hide（）；
$（“.green”）.show（）；
$（窗口）。加载（函数（）
{
$（'.dimension'）.hide（）；
$（'#d1'）.show（）；
});
$（'.bed_type ul li'）。单击（函数（）
{
var i=$（this.index（）；
$（'.dimension'）.hide（）；
$（'#d'+（i+1））.show（）；
var type='b'+（i+1）；
document.getElementById（type）.addEventListener（“单击”，bedtype）；
});
$（'.dimension ul li'）。单击（函数（）{
var i=$（this.index（）；
var single='single'+（i+1）；
//警报（单一）；
var doubles='doubles'+（i+1）；
变量queen='queen'+（i+1）；
变量king='king'+（i+1）；
document.getElementById（单个）.addEventListener（“单击”，价格）；
document.getElementById（双倍）。addEventListener（“单击”，价格）；
document.getElementById（queen）.addEventListener（“单击”，价格）；
document.getElementById（king）.addEventListener（“单击”，价格）；
});
函数价格（）
{
$（文档）.ready（函数（）{
$（“#选举”）。验证({
submitHandler:function（）{
$（'div[id^=div]'）。hide（）；
$（“#div4”）.show（）；
var dataString=$（this.currentForm）.serialize（）；
var lenbre=数据字符串substr（22,27）；
var arr=lenbre.split（'*'）；
var len=arr[0]；
$（“len”）.val（len）；
var-bre=arr[1]；
$（“bre”）.val（bre）；
返回false；
}
});
$（“#summers”）。单击（函数（）{
$（“#选举”）.submit（）；
});
var price_btn=this.id；
var price_value=document.getElementById（price_btn）.value；
var arr=价格与价值分割（'*'）；
});
}
}
});
});
$（文档）.ready（函数（）
{
$（“#plainpattern”）。验证({
规则：{
平面图案：{
必填项：true
}
},
信息：{
平面图案：{
必需：'请选择普通图像或图案'
}
},
submitHandler:function（）{
$（'div[id^=div]'）。hide（）；
$（“#div5”）.show（）；
var len=（$（'#len'）.attr（'value'）；
$（'#length'）.text（$（'#lent'）.val（））；
var bre=（$（'#bre'）.attr（'value'））
$（'宽度'）.text（$（'宽度'）.val（））；
var dataString=$（this.currentForm）.serialize（）；
var plainpattern=dataString.substr（13,16）；
$（“#mattersplainpatters”）.text（plainpattern+”）；
返回false；
}
});
$（“#summer7”）。单击（函数（）{
$（“#plainpattern”）.submit（）；
});
$（'li'）。单击（函数（）{
$（'li'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
var legend=$（this）.children（“输入[type=radio]”）.val（）；
});
});

试试这个

$('#length').text($('#len').val());
$('#breadth').text($('#bre').val());

---

在包含jquery并将jquery代码写入

$（document）.ready（）

或

$（function（）{}）

$（函数（）{
var len=（$（'#len'）.attr（'value'）；
$（'长度'）.text（len）；
var bre=（$（'#bre'）.attr（'value'））
$（'宽度'）。文本（bre）；
})

我没有得到解决方案。当我提交时，没有在另一个分区中打印。tanqs rply..请分享完整的代码，说明你是如何提交的，以及当你没有得到值时，我得到的值无法传递给其他分区ids@VallavanJ你们有并没有看控制台有并没有任何错误。因为我觉得它是正确的。这将是最好的如果你能做一把小提琴

var len = ($('#len').attr('value'));
$('#length').text(len);
var bre =($('#bre').attr('value'))
$('#breadth').text(bre);

<script type="text/javascript">
  $(window).load(function()
   {
        $('.green').hide();
        $('.red').show();
        });
         $(document).ready(function(){
          $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red")
             {

    $(".box").not(".red").hide();
        $(".red").show();
       $(document).ready(function() {
       $('#lenbredth').validate({
        rules: {
        length: {
        required: true,
        number: true,
        range: [48, 84]
        },
        breadth: {
        required: true,
        number: true,
        range: [24, 78]
        }
        },enter code here
        messages: {

        length: {
        required: 'Please select a template'
        },
        breadth: {
        required: 'Please select a template'
        }
        },
        submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div4").show();
        var dataString = $(this.currentForm).serialize();
        var lenbreath = dataString.split('&');
         var bed1= lenbreath[0];
         var len = bed1.substr(7,9);
         alert(len);
          $("#len").val(len);
         var bed2= lenbreath[1];
         var bre = bed2.substr(8,10);
         $("#bre").val(bre);
         return false;
        }

        });
        $("#summer5").click(function() {
        $("#lenbredth").submit();
        });
        $("#length").change(function(){
        var length =$(this).val();
        $("#breadth").change(function(){
        var breadth =$(this).val();
        var lenbre= length * breadth;
        //alert(lenbre);
        var result =length.concat(breadth);
        var len = (length * breadth) ;
        });
        });
        });
    }
    if($(this).attr("value")=="green")
    {
        $(".box").not(".green").hide();
        $(".green").show();

          $(window).load(function()
        {
        $('.dimension').hide();
        $('#d1').show();
        });


        $('.bed_type ul li ').click(function()
        {
        var i = $(this).index();
        $('.dimension').hide();
        $('#d' + (i+1)).show();
        var type  ='b' + (i+1);
        document.getElementById(type).addEventListener("click", bedtype);
         });
        $('.dimension ul li').click(function () {
        var i = $(this).index();
        var single  ='single' + (i+1);
        //alert(single);
        var doubles  ='doubles' + (i+1);
        var queen  ='queen' + (i+1);
        var king  ='king' + (i+1);

        document.getElementById(single).addEventListener("click", price);
        document.getElementById(doubles).addEventListener("click", price);
        document.getElementById(queen).addEventListener("click", price);
        document.getElementById(king).addEventListener("click", price);


        });
        function price() 
        {
        $(document).ready(function() {
         $('#radioselection').validate({
         submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div4").show();
        var dataString = $(this.currentForm).serialize();
             var lenbre = dataString.substr(22,27);
             var arr = lenbre.split('*');
             var len= arr[0];
            $("#len").val(len);
           var bre= arr[1];
           $("#bre").val(bre);

         return false;
        }
        });
        $("#summerss").click(function() {
        $("#radioselection").submit();
        });
        var price_btn=this.id;

        var price_value = document.getElementById(price_btn).value;
        var arr = price_value.split('*');
        });
        }
        }
        });
       });
      $(document).ready(function()
       {
      $('#plainpattern').validate({
          rules: {
           plainpattern:{
                required: true
            }
        },
        messages: {
           plainpattern:{
                required: 'Please select the image plain or pattern'
             }
           },
        submitHandler: function(){
        $('div[id ^=div]').hide();
        $("#div5").show();
        var len = ($('#len').attr('value'));
        $('#length').text($('#len').val());
        var bre =($('#bre').attr('value'))
        $('#breadth').text($('#bre').val()); 
        var dataString = $(this.currentForm).serialize();
        var plainpattern = dataString.substr(13,16);
        $("#mattersplainpatters").text(plainpattern + ' "');
        return false;
        }
        });
        $("#summer7").click(function() {
        $("#plainpattern").submit();
        });
        $('li').click( function(){
        $('li').removeClass('selected');
       $(this).addClass('selected');
        var legend = $(this).children("input[type=radio]").val();
        });
        });

$('#length').text($('#len').val());
$('#breadth').text($('#bre').val());