get jquery output to html output

Question

I am passing some values from html to javascript method and I want to get content to an html element.

$('#qtyorder span').each(function(){
         var id =($(this).prop('id'));
         var thenum = id.replace(/^\D+/g, ''); 
         var qty=$("#qty_ordered_"+thenum).html();

          if($("#qty_rec"+thenum).val() == ''){                
                $("#qty_rec"+thenum).val(qty);
                jQuery('#ordDate'+thenum).val($.datepicker.formatDate('d/mm/yy', new Date()));
                $("#ordDate"+thenum).trigger('click');

                 }

My html form is this, where I want to pass values by using id

<form
    class="overlay_form width_control_473 receive_autofil_popup padding_control_bottom_20"
        <input type="hidden" id="qty_rec" value="" /> <input type="hidden"
            id="qty_rec" value="" /> <input type="hidden" id="dateRcvd"
            value="" /> <input type="hidden" id="p_on" value="" /> <label
            class=" label_break_b verd12dgray">Item Code</label>
        <div class="clear_fix"></div>
        <input
            class="input_md_rd radious_all innershadow padding_control width_control_168"
            name="" type="text" id="code">
    </div>

    <div class="pur_field_container float_left">
        <label class=" label_break_b verd12dgray">Quantity Ordered</label>
        <div class="clear_fix"></div>
        <input
            class="input_md radious_all innershadow padding_control width_control_168"
            name="" type="text" id="qty_rec">
    </div>
    <div class="pur_field_container ">
        <label class=" label_break_b verd12dgray">Quantity Received</label>
        <div class="clear_fix"></div>
        <input
            class="input_md radious_all innershadow padding_control width_control_168"
            name="" type="text" id="qty_rec"
            onkeyup="cancelOrderAutofilNotification()">
            <input
            class="input_md radious_all innershadow padding_control width_control_168"
            name="" type="text" id="qty_rec"
            onkeyup="confirmOrderAutofilNotification()">
    </div>
    <div
        class="field_container_b width_control_317 margin_control_top float_left">
         <input
            type="button" value="Cancel"
            class="close button_gray_md1 radious_all verd12dgray float_left margin_control_top_10 "
            name="">
    <input  type="button" value="Confirm"
            class="confirm button_gray_md1 radious_all verd12dgray float_left margin_control_top_10 "
            name="" onclick="confirmOrderAutofilNotification();">

    </div>
</form>

How to pass javascript values to this form?

tried creating element and $(parent).append() or $(element).html(html)? — Shreedhar
– Shreedhar, Commented May 12, 2016 at 8:53

Majid Abbasi · Accepted Answer · 2016-05-12 09:00:31Z

1

In javascript we have 2 method for set value to elements .val() and .html(). you can use .val() for input elements like text input or select input. .html() use for elements like span, div, p, labels and in this case you should use from .html().

answered May 12, 2016 at 9:00

Majid Abbasi

1,5313 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jdoe Over a year ago

you mean like this? var it=$("#qty_rec"+thenum).val(qty); console.log(it); $('#qtyrcd').html=it;

Majid Abbasi Over a year ago

if "it" has data, use from $('#qtyrcd').htm(it);

jdoe Over a year ago

this what i get in console.log input#qty_rec0.input_md.radious_all.innershadow.width_control_95.margin_control_0.qty_rcvd property value = "2" attribute value = ""

Majid Abbasi Over a year ago

Also var it=$("#qty_rec"+thenum).val(qty); is incorrect because you want to get value of $("#qty_rec"+thenum) and you should use form var it=$("#qty_rec"+thenum).val();

Majid Abbasi Over a year ago

use from var it=$("#qty_rec"+thenum).val(); it should log value which input has

|

Wild Widow · Accepted Answer · 2016-05-12 08:58:48Z

0

Say you want to update a div with the output from your javascript

 <div id = "content"></div>

with plain javascript you can fill in the div like this

document.getElementById('content').innerHTML = "Your HTML here";

since you are already using jQuery, you could use

$('#content').html("Your HTML here");

answered May 12, 2016 at 8:58

Wild Widow

2,5794 gold badges23 silver badges34 bronze badges

3 Comments

jdoe Over a year ago

ok in my case i have a $("#qty_rec"+thenum).val(qty); lets say i want to get qty how can you pass it to this $('#content').html("Your HTML here");? i am bit confuse

Wild Widow Over a year ago

@jdoe do this $("#qty_rec").html(qty);

Wild Widow Over a year ago

@jdoe make sure qty is not empty. you won't see anything in the console.log. you would see the changes in your html itself.

Manjeet Barnala · Accepted Answer · 2016-05-12 10:24:04Z

Here is the Live example to to change the html and input value using jquery..

Use $('element').val() for changing input value and $('element').html() for html content change...

$(document).ready(function(){
  $('#change').click(function(){
    $('#myInput').val('XYZ'); /// element.val() for inputs
    $('#myDiv').html('Div content changed'); //// element.html() for changing html content
  })
  
  $('#reset').click(function(){
    $('#myInput').val('ABC');
    $('#myDiv').html('Here is div content');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=myDiv>Here is div content</div>

<br>

First Name: <input type="text" id="myInput" name="firstname" value="ABC" />

<br><br>

<button id="change">Change Content</button>
<button id="reset">Reset Content</button>

Trimantra Software Solution · Accepted Answer · 2016-05-12 10:33:09Z

0

Use of HTML value in Jquery:

//tags who uses value attributes
var jqVar = $('#HTML-tag-id').val();
//other HTML tags
var jqVar = $("#HTML-tag-id").html();

Setting jquery value in HTML:

var jqVar = $('#HTML-tag-id').val();

//putting jqVar value to some other textbox 
$('#HTML-tag-id2').val(jqVar);
//using it in other HTML tag
$('#HTML-tag-id2').html(jqVar);

answered May 12, 2016 at 10:33

Trimantra Software Solution

3,3273 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

get jquery output to html output

4 Answers 4

8 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related