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
I'm just trying to make a contact form with ajax, failing so hard. :(
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) })
What class should the button have? I can only fire from this, sorry im js noob --- $$('.submit').on('click', function () { ---
Button's class doesn't matter, but it probably should be <input type="submit"> to trigger form submit
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"/> ---
Will check radios, but as i remember they were fine. Do you have "checked" attribute on some of radios by default?
And do you use POST method, right?
I removed the checked value and test, still same. I can send you the code for view, it's too long to post here.
I don't need whole code. Can you just post here full HTML of your form?
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); }); } ---
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) }); }