framework7

Open full view…

Can You make a Ajax form post example

king-of-questions
Mon, 12 May 2014 03:45:28 GMT

Have been try many times but still getting one error, im bad in js Uncaught ReferenceError: $ is not defined my-app.js:9 (anonymous function) $$(document).on('pageInit', function (e) { var page = e.detail.page; if (page.name == 'contact') { $('.submit').submit(function() { <----- line 9 var message = $('#message').val(); var receiver = $('#receiver').val(); $.ajax({}); }); } });

Vladimir Kharlampidi
Mon, 12 May 2014 07:44:38 GMT

That is probably because "$" is not defined in your code:) It seems to be like you try to use jQuery but you haven't include it to your app. If you use 0.8.2 version then just replace "$" with "$$" in your code, otherwise you need to include jQuery (or similat lib) to make custom Ajax calls

king-of-questions
Mon, 12 May 2014 08:01:05 GMT

I'm just trying to make a contact form with ajax, failing so hard. :(

Vladimir Kharlampidi
Mon, 12 May 2014 08:21:45 GMT

In Framework7 from version 0.8.2 you can use automatic Ajax forms, just add "ajax-submit" class to form and it will submit automatically: --- <form id="contacts-form" method="POST" action="contacts-form-handler.php" class="ajax-submit"> ... form fields goes here --- And Framework7 will send all fields values to contacts-form-handler.php file using Ajax on submit. To handle Ajax response (if required) you can use "submitted" event: --- $$('#contacts-form').on('submitted', function (e) { //Here is your Ajax response: console.log(e.detail.data) })

king-of-questions
Mon, 12 May 2014 08:41:41 GMT

What class should the button have? I can only fire from this, sorry im js noob --- $$('.submit').on('click', function () { ---

Vladimir Kharlampidi
Mon, 12 May 2014 09:42:30 GMT

Button's class doesn't matter, but it probably should be <input type="submit"> to trigger form submit

king-of-questions
Mon, 12 May 2014 09:49:01 GMT

Will try again, thanks. Also I found that it cannot read radio value correctly, this will return only the first value 'noreply', or error 'not defined' --- <input type="radio" name="reply" value="noreply"/> <input type="radio" name="reply" value="byemail"/> <input type="radio" name="reply" value="byphone"/> ---

Vladimir Kharlampidi
Mon, 12 May 2014 09:54:30 GMT

Will check radios, but as i remember they were fine. Do you have "checked" attribute on some of radios by default?

Vladimir Kharlampidi
Mon, 12 May 2014 09:54:54 GMT

And do you use POST method, right?

king-of-questions
Mon, 12 May 2014 09:55:20 GMT

I removed the checked value and test, still same. I can send you the code for view, it's too long to post here.

Vladimir Kharlampidi
Mon, 12 May 2014 09:56:46 GMT

I don't need whole code. Can you just post here full HTML of your form?

king-of-questions
Mon, 12 May 2014 10:00:12 GMT

html code --- <form id="contacts-form" method="POST" action="contacts-form.php" class="ajax-submit"> <input type="text" name="name" id="name" placeholder="name"/> <input type="email" name="email" id="email" placeholder="email"/> <input type="tel" name="phone" id="phone" placeholder="phone"/> <textarea name="message" id="message" placeholder="message"></textarea> //the radio part <input type="radio" name="reply" value="noreply"/> <input type="radio" name="reply" value="byemail"/> <input type="radio" name="reply" value="byphone"/> <input type="button" value="cancel" class="button button-big button-cancel" onClick="this.form.reset()"/> <input type="submit" value="submit" class="button button-big button-submit submit"/> </form> --- js part --- if (page.name == 'contact') { $$('#contacts-form').on('submitted', function (e) { var name = $$('input[name=name]').val(); var email = $$('input[name=email]').val(); var phone = $$('input[name=phone]').val(); var message = $$('textarea[name=message]').val(); var reply = $$('input[name=reply]').val(); myApp.alert(name+email+phone+message+reply); }); } ---

Vladimir Kharlampidi
Mon, 12 May 2014 10:12:13 GMT

I see now, in this part: --- var name = $$('input[name=name]').val(); var email = $$('input[name=email]').val(); var phone = $$('input[name=phone]').val(); var message = $$('textarea[name=message]').val(); var reply = $$('input[name=reply]').val(); myApp.alert(name+email+phone+message+reply); --- These values are not the same what actually posted to "contacts-form.php" file and doesn't reflect actual POST data. --- var reply = $$('input[name=reply]').val(); // should be: var reply = $$('input[name=reply]:checked').val(); --- So if you check these values in your php script, everything will be fine there. You can check it by "echo" them in php, and check in JS like: --- if (page.name == 'contact') { $$('#contacts-form').on('submitted', function (e) { // This will return what you "echo" in php console.log(e.detail.data) }); }