jQuery Forum

In a recent previous post (here ) I wanted to know how to update an "input" field using jQuery by first finding it in the row that was dragged and dropped into place - so that the sequence was recorded properly.

I thought I could than hit Submit and $_post the information to the database as normal.  However, I found that I could not.  In fact the "LAST" item I moved never recorded the information and I had two records with the exact same sequence.

I tried it moving it to the first position, to a position somewhere in the middle, or at the end.  In every case it acted as though the value was never stored.

My question (based on this JSFiddle ) is how do I make sure all the values I input with (":input").val(count) where count is the sequential counter are actually available in the DOM for the HTML submit function will $_post the newest values instead of the old value?

Can you help me?

Thanks in Advance.

I created a JSFiddle to help explain the change I wish to make.

1. <tr>
   
2.             <td class='priority'>
   
3.                 <input name="sequence" value="1" size="6" />
   
4.             </td>
   
5.             <!--Added INPUT field  in the td class priority-->
   
6.            
   
7.             <td>George Washington</td>
   
8.             <td>Apple</td>
   
9.             <td>N</td>
   
10.             <td><a class='btn btn-delete btn-danger'>Delete</a>
11. </td>

This would be generated from a php call to a database that is currently working well.

At the end of the drag and drop I'm trying to re-number the value of the sequence in the input field.

The original example was easier because it used the <td> element and used the HTML handler to replace it with the new number.

1. $(this).find('.priority').html(count);

I'm trying to replace that line to find the "sequence" and replace the value with the new "count".

Can you help me?

Thanks in advance for your help.

We are developing a site and I'm learning jQuery [not necessarily the best way to do things on my part].  This is something I found online that allows the "hint" to be included inside the <input type="text"> box.  This is much cleaner than to put a phone hint to the right with xxx-xxx-xxxx or 123-456-7890.

However, in testing I've had it several times leave the hint inside the textbox and change from the "#aaa" color that I defined, to the solid color of the site (in this case black).

The code that I picked up from the plugin is:

1. <script type="text/javascript" charset="utf-8">
2. // http://github.com/maca/jquery-watermark-hints
   
3. 
   
4. jQuery.fn.hint = function(text, color) {
5.   if(!color)
6.     color = "#aaa";
7.    
   
8.   return this.each(
9.     function(){
10.       var input = jQuery(this);
11.       var defaultColor = input.css("color");
12. 
    
13.       var checkInput = function() {
14.         if(input.val() == '' || input.virgin){
15.           input.val(text).css("color", color).virgin = true;
16.         } else {
17.           input.css("color", defaultColor).virgin = false;
18.         }
19.       };
20.      
    
21.       var clearMessage = function() {
22.         if(input.virgin)
23.           input.val('').css("color", defaultColor).virgin = false;
24.       };
25.      
    
26.       input.bind('blur change', checkInput);
27.       input.bind('click focus', clearMessage);
28.       checkInput();
29.      
    
30.       input.closest('form').bind('submit', clearMessage);
31.     }
32.   );
33. };
34. 
    
35. </script>
    

Then I have the text box code:

1. <td>Phone:</td>
                   <td><input class="myHint" name="phone" type="text" id="phone" value="<?php if (isset($error)) {echo $phone; } ?>" /></td>
   

and under it put the script to call it

1. <script type="text/javascript" charset="utf-8">
2.     $(function (){
3.        $(".myHint").hint ('(XXX) XXX-XXXX')
4.     });
5. </script>
   

If it would help, I can post the link to the working development page.

How do I stop the hint from becoming a permanent part of the text box?  Is there a better plugin that I should be using.

Thanks for helping and curing my ignorance...

Paul

Good Afternoon,

 I have a problem created by my complete [rookie] status – only second time venturing into jQuery.

 I created a simple shopping cart using php and the PayPal buttons (1: buy now, 2: add to cart).  The php back end does it great, it generates the table and the buttons and everything works just like it’s supposed to; Except, I forgot to add sizes.

 So I found out what I need to add, and I realize that the way the buttons work, I will have two different text boxes for size.  Not very visually appealing, and since I’m not submitting this to the server before it goes to PayPal to pay, I cannot modify it with php the way I normally would.  jQuery / javascript are my only hope of making this work.

 What I want to do:

1)    Have a single textbox where [size] is entered by the user.

2)    Copy the value from the [correct] text box to the Value=”” section of the now hidden field in the PayPal form

 

That way, no matter whether they [BUY NOW] or [ADD to CART] the right size is submitted to the PayPal shopping cart.

Greetings to all,

I’m a complete newbie to jquery.  I started out of GREAT necessity as I’m writing a meal plan function where I want to post a particular food to “my favorites” and found that while PHP is truly powerful, it has one limitation – I have to send things to the server to process them (yes, that was my attempt at humor).

I wrote my first jquery driven $.post that calls a PHP page, that actually does the store for me.  This works great.  However, the “ignorance” I’m hoping someone will cure from me comes from the fact that my button, only posts the “first” row of information.

The table I generate from a search for foods.  It lists all the foods that match the description.  Then I added, like I do in PHP a form button to Post the data from that row to my Favorite’s table.  However, this does not work with the way I wrote my function.

The function I wrote is this:

1. <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
2. <script type="text/javascript">
3.                 function fav_store() {
4.                                 $('#stored').hide();
5.                                 $.post('meal_fav_post.php', {
   
6.                            NDB_No: $('form[name=favorites] input[name=NDB_No]').val(),
7.                              user_id: $('form[name=favorites] input[name=user_id]').val(),
8.                          MM_insert: $('form[name=favorites] input[name=MM_insert]').val() 
9.                                                                                                                    },
10.                                                                 function(result) {
11.                                                                                 $('#stored').html(result).show();
12.                                                                 });
13.                 }
14. </script>

 

The button is part of a DO WHILE loop in PHP and here’s the code:

1. <?php do { ?>
2.       <tr>
3.         //lots of stuff here then       
   
4.             <td>
5.               <form name="favorites" id="fav_form">
6.                 <input type="hidden" name="NDB_No" value="<?php echo $row_test_food_selection['NDB_No']; ?>" />
7.                <input type="hidden" name="user_id" value="1" /> (Note user_id = 1 for testing only)
   
8.                <input type="hidden" name="MM_insert" value="form1" />
9.                 <input type="button" value="Add To Favorites" onclick="fav_store();" />
10.               </form>  
11.                 <div id="stored">This is where I want to display my results</div>
12.                 </td>
13.     </tr>
14.       <?php } while ($row_test_food_selection = mysql_fetch_assoc($test_food_selection)); ?>