CODEWITHSUNDEEP
javascript
ArlopA
ArlopA

Reputation: 15

.val() and .text() don't work?

I want to email div contents via php and form tag. I have 2 divs with these classes:

.simpleCart_items
.simpleCart_total

I want to fetch contents from these divs and insert their contents in inputs or textareas, then submit the form to my php file.

I wrote this JQuery code:

$('#shopform').submit(function(){
  var items = $('.simpleCart_items').text();
  var tprice = $('.simpleCart_total').text();
  $('#itemsinfo').val(items);
  $('#totalprice').val(tprice);
});

and these are my inputs:

<textarea id="itemsinfo" style="width:320px; height:160px"></textarea>

<input type="text" id="totalprice"/>

but it doesn't work. The contents didn't move to the input tags.

Upvotes: 1

Views: 601

Answers (5)

jfriend00
jfriend00

Reputation: 708146

It must be something else in your HTML or script that you are showing us because when I set up a simple test using your code, it works fine here: http://jsfiddle.net/jfriend00/7q6DP/.

This works perfectly fine for me (in Chrome, Firefox, Safari and IE):

HTML:

<button id="submitForm">Submit</button>
<div class="simpleCart_items">simpleCart items text</div>
<div class="simpleCart_total">simpleCart total</div>

<textarea id="itemsinfo" style="width:320px height:160px"></textarea><br>
<input type="text" id="totalprice"/>

Javascript (after page is loaded):

$('#submitForm').click(function(){
  var items = $('.simpleCart_items').text();
  var tprice = $('.simpleCart_total').text();
  $('#itemsinfo').val(items);
  $('#totalprice').val(tprice);
});

Please show the rest of your code and HTML.

The things to check are:

  1. Are there any javascript errors showing in the error console or in the debugger console?
  2. Are you initializing your event handlers after the page has loaded?
  3. Do any javascript errors show in the debug console when you press the submit button?
  4. Is your submitForm event handler getting called? If you set a breakpoint or put an alert in their, does it get hit?
  5. Can you set a breakpoint in your submit handler and see what's happening with the values of items or tprice?
  6. Make sure your class names don't have the leading period on them when you put them in your HTML. It should be class="simpleCart_items", not class=".simpleCart_items".

Upvotes: 2

Guffa
Guffa

Reputation: 700860

Your code works just fine when I put it in a page:

http://jsfiddle.net/Guffa/krYQh/

When you click the submit button, the fields are populated with the data. (I added a return false in the submit event handler just to keep the form from posting.)

Some possible errors in your code:

  • You have used class=".simpleCart_items" instead of class="simpleCart_items".
  • The form doesn't have id="shopform".
  • You have use the ids shopform, itemsinfo or totalprice on any other elements.

Upvotes: 2

sirmdawg
sirmdawg

Reputation: 2579

You should be able to use the .val() to get the value for the text areas instead of using .text().

Try using alert(items); before you set the div's contents just to make sure you are actually getting data.

Upvotes: 0

Raouf Athar
Raouf Athar

Reputation: 1813

I suppose you should use .innerHTML instead of .text()

Upvotes: 0

Praveen
Praveen

Reputation: 1449

I guess you should use ".html()" instead of ".text" something like below.

  $('#shopform').submit(function(){   
  var items = $('.simpleCart_items').html();   
  var tprice = $('.simpleCart_total').html();   

    $('#itemsinfo').html(items);   
    $('#totalprice').val(tprice); 
  });

Upvotes: 0

Related Questions