0

I have a two forms which conflicts with each other i want to change the form id in "var form = $('form');" such as "var form = $('myForm');" please let me know if i change id form as myForm, in that case in below code how i can incorporate:

 $(document).ready(function(){
        var form = $('form');
        var submit = $('#submit');

        form.on('submit', function(e) {
            // prevent default action
            e.preventDefault();
            // send ajax request
            $.ajax({
                url: 'ajax_comment.php',
                type: 'POST',
                cache: false,
                data: form.serialize(), //form serizlize data
                beforeSend: function(){
                    // change submit button value text and disabled it
                    submit.val('Submitting...').attr('disabled', 'disabled');
                },
                success: function(data){
                    // Append with fadeIn see http://stackoverflow.com/a/978731
                    var item = $(data).hide().fadeIn(800);
                    $('.comment-block').append(item);

                    // reset form and button
                    form.trigger('reset');
                    submit.val('Submit Comment').removeAttr('disabled');
                },
                error: function(e){
                    alert(e);
                }
            });
        });
    });

HTML code:

<form class="form-horizontal" role="form" id="form" method="post">
                    <!-- need to supply post id with hidden fild -->
                    <input type="hidden" name="filmId" value="<?php echo $row['filmId']?>">
                    <div class="form-group">                        
                        <div class="col-sm-2">
                            <label>Name *</label>
                        </div>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="name" id="comment-name" placeholder="Your Name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label>Email *</label>
                        </div>
                        <div class="col-sm-10">
                            <input class="form-control"type="email" name="mail" id="comment-mail" placeholder="Your Email" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label>Comment *</label>    
                        </div>  
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="5" name="comment" id="comment" placeholder="Type your comment here...." required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" class="btn btn-primary" id="submit" value="Submit Comment">
                        </div>
                    </div>
                </form>
RRPANDEY
  • 235
  • 4
  • 15
  • 2
    What exactly is the conflict? Right now you are using a selector that would select any form elements in the DOM regardless of ID. If you want to target a specific form then target the ID. – APAD1 Dec 03 '14 at 15:35

2 Answers2

2

Give each form an id like so

<form id="firstForm" method="post">
    ..... form data
</form>

<form id="secondForm" method="post">
    ..... form data
</form>

and then select the form as so

var formOne = $("#firstForm"),
    formTwo = $("#secondForm");
Last1Here
  • 1,099
  • 2
  • 10
  • 21
  • plz let me know how i can change the id from form to firstForm in my javascript code above – RRPANDEY Dec 03 '14 at 15:40
  • Take a look at the top snippet of code in my answer, the id of your form is not `form` that is the tag, you need to give it an id in the html by adding the id attribute to your form tag `id="firstForm"` – Last1Here Dec 03 '14 at 15:43
  • so in the case of your html it would be `
    `
     – Last1Here Dec 03 '14 at 15:43
  • yes i understand but how i can change the same in abobe Javascript code? – RRPANDEY Dec 03 '14 at 15:44
  • You're being a bit unclear as to what your try to achieve here, are you trying just to submit the form with the id `#form` via ajax ? in that case you would change your JavaScript to `var form = $('#form');` or are you trying to submit both forms via ajax but when you submit one its actually submitting both? – Last1Here Dec 03 '14 at 15:46
  • yes i have two forms one is search and other is comment form, but when i click on search form both getting submitted, so i want to touch this comment form and fix it, i am quite new in js if i change form to form1 exactly how many places in above js code i need to change? – RRPANDEY Dec 03 '14 at 15:55
  • you just need to change it when assigning the `var form` so that would be `var form = $("#form1");` – Last1Here Dec 03 '14 at 15:57
2

You have to use the Id selector of jquery

$("#formId")

and not the class 'form' that you use.

Your simplified HTML:

<form id="form1">                 
<input type="submit" id="submit1"/>                    
</form>

<form id="form2">                
<input type="submit" id="submit2"/>               
</form>

The simplified JS:

var form1 = $('#form1');
var submit1 = $('#submit1');
form1.submit(function(e) {
    alert('hey1');
    // prevent default action
    e.preventDefault();
    // send ajax request
});

var form2 = $('#form2');
var submit2 = $('#submit2');
form2.submit(function(e) {
    alert('hey2');
    e.preventDefault();
});

The result in JSFIDDLE: http://jsfiddle.net/jzb2hn9j/

clement
  • 4,204
  • 10
  • 65
  • 133