How to submit a form using jQueryMobile - javascript

I'm unable to submit a form using method post.
The first error that occured was a 405 but I was able to solved it using this solution.
Now occurs a 403 error, how can I solve it?
JS
$(document).ready(function () {
$('#loginForm').submit(function () {
//some business logic...
$.mobile.changePage($('#menuPage'));
});
});
HTML
<div data-role="page" id="loginPage">
<div data-role="header"><h1>Login</h1></div>
<div data-role="content">
<form method="post" id="loginForm">
<fieldset>
<label for="utilizadorText">Inserir Utilizador</label>
<input type="text" id="utilizadorText" name="utilizadorText" />
<label for="palavraChaveText">Inserir Palavra Chave</label>
<input type="password" id="palavraChaveText" name="palavraChaveText" />
<input type="submit" id="loginAnchor" class="submit" value="Login" />
</fieldset>
</form>
</div>
</div>
<div data-role="page" id="menuPage">
<div data-role="header"><h1>Menu</h1></div>
<div data-role="content">
Menu
</div>
</div>

It appears as though you are trying to submit the form to the loginPage and than change the page to menuPage. This doesn't make sense to me. What actions are you trying to perform here? If you want to be able to take form data from the context of the loginPage and than apply business logic to it than the solution below might help.
Possible Solution #1

Related

How to Enable and Disable Submit Button Using Jquery/Javascript

this is my code i want to have disable submit button after page load and enabled button when im typing in the textbox. pls help thanks
<div class="container" id="frmtoken">
<form method=POST action="authorize.php">
<div class="featured-desc-left">
<p>Enter token and wait to be connected.</p>
<p><strong>note: Only one device per token is allowed</strong></p>
</div>
<div class="two columns featured-desc-left">
<p><input type="text" name="token"></p>
</div>
<div class="featured-desc-left">
<p>
<input name="tconnect" type="submit" value="Connect"
onClick="this.form.submit(); this.disabled=true; this.value='Sending...';"/>
</p>
</div>
</form>
</div>
jQuery
$(document).ready(function(){
$("input[type=submit]").attr("disabled","disabled");
});
$("input[type=text]").on("keydown",function(){
$("input[type=submit]").removeAttr("disabled");
});
Bearing in mind this will apply to all submit inputs on the page when any text inputs on the page are typed in so you probably should assign classes/ids.

HTML submit onclick not firing in chrome extension [duplicate]

This question already has answers here:
onclick or inline script isn't working in extension
(5 answers)
Closed 5 years ago.
I'm trying to get some simply things going but can't seem to get a JS function to run following a click event.
Relevant HTML and JS:
function addSite() {
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form action="">
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
Full HTML and JS here and here.
function addSite()
{
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form action="">
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite()" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
you need to include the parenthesis when you call the function, which is missing in your html.
It should be
onclick="addSite()"
instead of
onclick="addSite"
EDIT:
As #wOxxOm pointed out, you should not use not onclick attribute to fire a event when working with chrome extension. Instead bind event listener to that particular DOM element using addEventListener.
function addSite() {
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form>
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite()" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
Since you have set action attribute to empty string, do read this:
In HTML5, you can actually specify an action on the submit button itself. If there isn't one, it uses the form's action and if that is not set, it defaults to the empty string (note you cannot explicitly set the action to an empty string in HTML5).
Ref.: Is action really required on forms?

How to get around the FormSpree redirect?

I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.
Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo
Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;
You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.

HTML Form Submit does not open new site/doesn't open a site at all

after several hours looking for answer, I still haven't found a solution for my problem. I have a very basic form with some checkbox inputs. But the Submit Button doesn't open the php Script for processing the data.
Here's the form:
<form name="request" action="request.php" method="get">
<h2 id="sum">5.99€</h2>
<h6>Per Month</h6>
<input type="hidden" name="hide">
<!--The Hidden Input is there for testing purposes-->
<input type="submit">
</form>
And here's the full code of the section:
<section id="contact">
<div class="container">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Ordering Form</h2>
<p class="text-muted">Choose some web essentials and add them to your plan
<br><a class="page-scroll">Get to know the essentials</a></p><br>
<form name="request" action="request.php" method="get">
<h2 id="sum">5.99€</h2>
<h6>Per Month</h6>
<input type="hidden" name="hide">
<!--The Hidden Input is there for testing purposes-->
<input type="submit">
</form>
<script type="text/javascript">
//Some JavaScript which doesn't have anything to do with the form
</script>
</div>
</div>
</section>
When i click the submit button its just doesn't do anything. No Error message, no 404, no PHP error.
Hope you can help me!

Will splitting a form using jQuery UI Tabs affect the posting of the form to PHP?

Will splitting up the <form></form> using the jQuery UI tabs() method affect the posting of the form to PHP?
Such as:
<script type="text/javascript" >
$('#Tabs').tabs();
</script>
<form method="post" action="form.php" >
<div id="Tabs">
<ul>
<li>content1
<li>content2
</ul>
<div id="#content1>
<input type="text" name="field1" />
</div>
<div id="content2">
<input type="content'' name="field2" />
<input type="sumbit" /></div>
</div>
</div>
</form>
No. The form will still contain all of the <input> elements, even if they're not currently visible. As such they'll all be submitted when the form is.
However, there's an issue with your example, in that the jQuery code will execute before the <div id="Tags"> element exists. Wrap it in a document ready call:
<script>
$(document).ready(function() {
$('#Tabs').tabs();
});
</script>

Categories