Multiple forms using ajax on one page failing to get input data about chibi HOT 7 CLOSED

Would it be possible for you to share some sample HTML? One gotcha that's bitten me more than once is not having unique input names between forms. Chibi sends them all but servers expect unique fields, take the value of last unique.

from chibi.

The two forms, similar with the addition of a textarea on the ask a question form. The input "id" were for using chibi .val() to build a data string when I used vanilla js ajax previously (have always had a hard time getting your ajax to work ;-)

<form name="mlist" id="mlist" action="https://www.mydomain.com/send.php" method="post">
<input type="hidden" name="webpage2" id="mlwebpg" value="index">
<input type="hidden" name="form2" value="mlist">
<input type="hidden" name="subject2" id="mlsubject" value="Newsletter Sign Up">
<input type="text" name="name2" id="mlname" placeholder="Your Name">
<input type="email" name="email2" id="mlemail" placeholder="Your Email">
<input type="submit" class="btnmd btnwht" id="mlist2" value="Sign Me Up">
</form>



<form name="asktom" id="asktom" action="https://www.mydomain.com/send.php" method="post">
<input type="hidden" name="webpage" id="hdwebpg" value="index">
<input type="hidden" name="form" value="headqstn">
<input type="hidden" name="subject" id="hdsubject" value="Ask Tom a Question">
<textarea name="message" id="hdmessage" style="height:145px;" placeholder="Hey Tom, I have a question about..."></textarea>
<input name="name" id="hdname" required="required" type="text" placeholder="Your Name">
<input name="email" id="hdemail" required="required" type="email" placeholder="Your Email">
<input type="submit" class="btnmd btnnav" id="headform2" value="  SEND  ">
</form>

The two javascript calls using chibi ajax() functions:

$("#mlist2").on('click', function(a) {
   $('form').post('https://www.mydomain.com/send1.php',function(data,status){
      success: $('#m-list').html("some html copy about success");
   },true);
   a.preventDefault();
});


$('#headform2').on('click', function(a) {
   $('form').post('https://www.mydomain.com/send2.php',function(data,status){
      success: $('.hdfrmmsg').html("some copy about success");
   },true);
   savVstr();
   a.preventDefault();
});

As I look at the network traffic, submitting the #asktom form (the last one within the html code) it sends all of the inputs on the page (both forms). When submitting the mlist form, the first one to appear in the html, it sends only the inputs from the asktom form, not its own.

I have tried using the form ids $('#asktom') in lieu of the generic $('form'), with that the asktom form submits only its own inputs and the mlist sends no data at all. (this is what I was doing when I first posted this)

from chibi.

@mrcycling I've added a fix to 3.0.4 were some non-get ajax could be sent at JSON-P. Tested your form on my local environ with $('form').post('http://localhost:8080/ajax',function(data){console.log(data)}); and data from both forms was posted successfully.

If 3.0.4 doesn't resolve the issue for you, can you let me know your browser and version.

from chibi.

Thanks, but alas the same problem still exists. I am testing with both Chrome and Firefox (up to date versions) on Windows10.

from chibi.

@mrcycling Thanks for sharing your code. I think I've found the problem: clicking the #mlist2 button first replaces #m-list content with the gears.svg (nice, BTW) then calls Chibi post but as #m-list form data has been replaced with gears, there is no form data to submit from this area. Alternative approach would be to hide the form and show gears on submit.

from chibi.

Its a thing of beauty. Thanks for spotting my mistake. I switched it to an overlay same as is used on the asktom form and she runs great. Guess you can delete this as an issue ;-)

If you get down to SE Asia from Japan let me know and I will buy you a beer or three, chibi is a great little javascript framework.

from chibi.

@mrcycling Thanks, will do!

from chibi.