CODEWITHSUNDEEP
phpjqueryajaxforms
Mubarak
Mubarak

Reputation: 183

fetching value from multiple forms and displaying in the appropriate field based on form id

I have 2 forms on a page with structures 

<div id="tabs-7">
    <form action="/admin/languages" id="1" class="mainForm" method="POST">
        <fieldset>
            <div class="widget">

                <input type="hidden" maxlength="40"class="autoF" name="base" id="base" value="<?php echo base_url(); ?>" />
                <input type="hidden" maxlength="40"class="autoF" id="lang_id" name="lang_id" value="1" />


                <div class="rowElem">
                    <label>Calender</label> 
                    <div class="rowElem noborder" >
                        <label>Date:</label>
                        <div class="formLeft">
                            <input type="text"  name="date" class="datepicker date" value="<?php echo isset($data['1']['date']['text']) ? $data['1']['date']['text'] : ""; ?>" />
                        </div>
                    </div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note:</label>
                    <div class="formLeft">


                        <?php
                        if (!empty($data['1']['calender_contents'])) {
                            $text = preg_replace('/\s+/', ' ', $data['1']['calender_contents']['text']);
                        }
                        ?>
                        <textarea name="calender_contents"  class="auto limit calender_contents" style="min-width: 600px;max-width: 600px;min-height:80px;max-height: 80px;"><?php echo isset($data['1']['calender_contents']['text']) ? $text : ""; ?></textarea>
                    </div>
                    <div class="rowElem "><input type="button" value="Add Note" class="blueBtn left addnote"></div>
                </div>


                <div class="rowElem "><input type="submit" value="Save" class="greenBtn right"></div>

            </div>
        </fieldset>
    </form>
</div>

<div id="tabs-8">
    <form action="/admin/languages" id="2" class="mainForm" method="POST">
        <fieldset>
            <div class="widget">

                <input type="hidden" maxlength="40"class="autoF" name="base" id="base" value="<?php echo base_url(); ?>" />
                <input type="hidden" maxlength="40"class="autoF" id="lang_id" name="lang_id" value="2" />


                <div class="rowElem">
                    <label>Calender</label> 
                    <div class="rowElem noborder" >
                        <label>Date:</label>
                        <div class="formLeft">
                            <input type="text"  name="date" class="datepicker date" value="<?php echo isset($data['2']['date']['text']) ? $data['2']['date']['text'] : ""; ?>" />
                        </div>
                    </div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note:</label>
                    <div class="formLeft">


                        <?php
                        if (!empty($data['2']['calender_contents'])) {
                            $text = preg_replace('/\s+/', ' ', $data['1']['calender_contents']['text']);
                        }
                        ?>
                        <textarea name="calender_contents" class="auto limit calender_contents" style="min-width: 600px;max-width: 600px;min-height:80px;max-height: 80px;"><?php echo isset($data['2']['calender_contents']['text']) ? $text : ""; ?></textarea>
                    </div>
                    <div class="rowElem "><input type="button" value="Add Note" class="blueBtn left addnote"></div>
                </div>


                <div class="rowElem "><input type="submit" value="Save" class="greenBtn right"></div>

            </div>
        </fieldset>
    </form>
</div>

and javascript :

 $(".datepicker").datepicker({
        defaultDate: +7,
        autoSize: true,
        appendText: '(yyyy-mm-dd)',
        dateFormat: 'yy-mm-dd',
        onClose: function(dateText, inst) {
           var form = $(this).closest("form");
             var formID = $(form).attr("id");
             console.log(formID);
             if(formID == "1"){
                  formID = 1;
                   }
                   else{
                     formID = 2;  

                   }
            var lang_id = formID;
            var date = $(".date").val();
            console.log(lang_id);
            console.log(date);

            $.ajax({
                type: 'POST',
                url: "/admin/getnote",
                dataType: "json",
                data: {"date": date, "lang_id": lang_id},
                success: function(data) {

                    console.log(data.arr[0]);

                     if(data.arr[0] != undefined){
                    $('.calender_contents').val(data.arr[0].note);
                    $('.date').val(data.arr[0].date);
                     }
                      else {
                         $('.calender_contents').val("");                         
                     }
                }

            });

        }
    });

I am able to get the value from the database in the first tab that is tab 7 fine and value but when use the date picker in the second form to its value also gets displayed in the first table so was looking for some advise as how i can combine $(this).closest("form"); with these fields 

$('.calender_contents').val(data.arr[0].note);
                        $('.date').val(data.arr[0].date);

so that i could get value in the specific form field . Thank you.

Upvotes: 0

Views: 233

Answers (2)

Chibani
Chibani

Reputation: 790

You select #calendar_contents. If you use the same "id" for 2 elements, first you're doing it wrong (an id must be unique), then jQuery will only return you the first element that has the requested id.

Try using a class and "locate" the tab you're using.

Upvotes: 1

OJay
OJay

Reputation: 4921

You can't have html elements on the same page that have the same id, even if they are in different forms. The id attribute must be unique on the whole page

Upvotes: 0

Related Questions