I've tried to read similar postings. Couldn't get a clue on my code about why mine is still going to the php page displaying messages and not showing on the original html page.
Here is the code snippet.
In javascript
$(document).ready(function(){
$("#myForm").submit(function(){
var url = $(this).attr("action");
var str=$(this).serialize();
$.post(url,str,function(msg){$('msg_div').show();$('msg_div').html(msg);});
return false;
});
});
in html
<form name="myForm" action="abc.php" method="post" enctype="multipart/form-data">
...
<input type="submit" name="Submit" id="Submit" value="Submit" onClick="return validateForm()"/>
in PHP
if (mail($to, $subject, $msg, $headers)) echo "<p>hank you for your query.</p>";
else {
echo "<p>Error: email failed."; die('Error!');
}
What has gone wrong with this code? Thank you in advance.
Have a good day and All the best,
Allison
I see that you tried to stop the behaviour of submitted forms (with return false, which seems fine), I did this once too but don't now in which project that was, so I don't have any sample right now.
Maybe this helps (but didn't test it yet):
$("#myForm").submit(function(e){
e.preventDefault();
var url = $(this).attr("action");
var str=$(this).serialize();
$.post(url,str,function(msg){$('msg_div').show();$('msg_div').html(msg);});
return false;
});
The e.preventDefault(); should stop the submit process. How does your validateForm() look like?
Related
I'm working on a WordPress site. Basically, I publish download links (PDFs), and would like to stop web crawlers from accessing this content. This led me to Google's reCAPTCHA. Can I use this alone, so that when a user clicks/answers correctly, the links on the page will be made active? I'm having trouble editing a page in WordPress to do this. Thanks.
-Rudy.
I understand that you want to show link dynamically after the verification of the recaptcha.
You can create a an ajax that fetches the link after the verifcation of recaptcha passes.
To do this, we will use WordPress ajax requests, wp-ajax:
First, you register the ajax handler the request in the server side
add_action( 'wp_ajax_get_hidden_pdf_link', 'search_hidden_pdf_link' );
// add this line to handle requests of non logged in users
add_action( 'wp_ajax_nopriv_get_hidden_pdf_link', 'search_hidden_pdf_link' );
function search_hidden_pdf_link() {
// the response will be ajax response
header('Content-Type: application/json;charset=utf-8');
if(recaptcha_fails()){
// writing the failure response
echo json_encode(array('object' => 'error'));
wp_die();
}
$secret_pdf_link = generate_pdf_link();
// writing the succcess response
echo( json_encode( array('object' => 'success', 'link' => $secret_pdf_link)));
wp_die();
}
and in the front end, you create an ajax form, which asks and displays the link.
PDF Link
<form id="pdf-link-form" action="<?php echo admin_url('wp-ajax.php'); ?>">
<!-- some input that tells the backend which pdf to fetch -->
<input type="hidden" name="public_pdf_id" value="<?php echo $pdf_id; ?>">
<!-- the ajax request identifier, it is the suffix inside the action -->
<input type="hidden" name="action" value="get_hidden_pdf_link">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
</form>
<script>
$(document).ready(function () {
$('#pdf-link-form').submit(function (event) {
event.preventDefault();
form = $(this);
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serializeArray()
}).done(function (result) {
if(result.object == 'success'){
$('#hidden-pdf-link').attr('href', result.link);
form.remove();
alert('you can access the pdf')
} else {
alert('you are not allowed to access my pdf!!');
}
})
});
});
</script>
The following code is in a wordpress page.
<form action="action_page.php" method="post">
Name:<br>
<input type="text" name="name" value="Mickey">
<input type="submit" value="Submit">
</form>
action_page.php
<?php $name=$_POST['name']; echo $name;?>
I would like to diplay the output(Mickey) in a wordpress page, instead of php page. Please help me.
You can achieve it via AJAX, see the codex
Add this to functions.php
add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );
function prefix_ajax_add_foobar() {
// Handle request then generate response using WP_Ajax_Response
// In a real world scenario, apply all the validation,
// sanitization and black magic to POSTed variables before using them
$name=$_POST['name'];
echo $name;
}
Now the following could go in footer.php inside of <script> tags or in a separate JS file.
jQuery.post(
ajaxurl,
{
'action': 'add_foobar',
'data': jQuery("form").sanitize()
},
function(response){
alert('The server responded: ' + response);
}
);
All things being equal you should see an alert with the value that was posted.
I am a newbie in AdobeCQ5. I am facing some trouble in posting form. Here is my Structure -
/apps/<myproject>/components/mytestcomponent
mytestcomopnent.jsp has following code -
<form id="myForm" action="<%=resource.getPath()+".html" %>">
<input type="text" id="t1" class="input-small" placeholder="Temprature F" />
<input type="text" id="t2" class="input-small" placeholder="Temprature C" readonly/>
<button type="button" id="cbtn" class="btn">Convert</button>
</form>
<script>
$(document).ready(function() {
$('#cbtn').click(function () {
var URL = $("#myForm").attr("action");
alert(URL);
var t1=$("#t1").val();
var t2=$("#t2").val();
$.ajax({
url: URL,
data:{'t1':t1},
type:"post",
success: function(data, status) {
$("#t2").val(data);
},
error: function( xhr, txtStat, errThrown ) {
alert("ajax error! " + txtStat + ":::" + errThrown);
}
});
});
});
</script>
This is giving my response code 200 (Success) but the output is not desired. My mycomponent.POST.jsp has following code -
<%
// TODO add you code here
String t1=request.getParameter("t1");
%>
<%= t1 %>
It gives the following output
Content modified /content/imobile/en/jcr:content/social.html
Status
200
Message
OK
Location /content/imobile/en/_jcr_content/social.html
Parent Location /content/imobile/en/_jcr_content
Path
/content/imobile/en/jcr:content/social.html
Referer http://example.comt:4502/content/imobile/en.html
ChangeLog
<pre></pre>
Go Back
Modified Resource
Parent of Modified Resource
Please help to resolve this.
The JSP file handling the POST method for your component should be named POST.jsp rather than mycomponent.POST.jsp.
Please notice that if you intercept all POST requests to your component, you won't be able to edit it on the author instance using a dialog (as the dialog simply POSTs data to the component URL). To avoid it, consider using a custom selector (like form). Your form should look be declared like this:
<form id="myForm" action="${resource.path}.form.html">
and the script handling POST request should be called form.POST.jsp.
The second important thing is that you should use Java classes rather than JSP files to store business logic. In this case it means that the form.POST.jsp script can be replaced with a Sling servlet declared as follows:
#SlingServlet(
resourceTypes="myproject/components/mytestcomponent",
methods="POST",
selectors="form")
I was just playing around a bit with Meteor.js when I ran into this strange issue, I have a form with two textfields, but somehow my event is not listening to the submit.
When I remove one textfield, everything works fine ...
Below is my template for the form:
<template name="new_timer">
<div class="timer timer--empty">
<form id="new_timer">
<input type="text" name="timer__name" class="timer__name" placeholder="Timer name">
<input type="text" name="timer__description" class="timer__description" placeholder="Timer description">
</form>
</div>
</template>
And on the client side:
Template.new_timer.events({
'submit form': function(e) {
console.log('new timer');
e.preventDefault();
}
})
This doens't seem to work, however when I change my template to the following, it works
<template name="new_timer">
<div class="timer timer--empty">
<form id="new_timer">
<input type="text" name="timer__name" class="timer__name" placeholder="Timer name">
</form>
</div>
</template>
Am I just overlooking something very basic here?
You might add an event like
'keyup form': function(e) {
if (e.keyCode === 13) {
// do something
}
}
Basically using a submit in a single page application is not adapted. In this kind of application everything is event based, you never reload a page so you never really 'submit' a form.
The 'form' tag becomes useless, most of developers (including me) are keeping it by habit but it is not required.
It is a bit late for an answer, I hope it can help somebody else!
I had similar problem, submit event does not work with more inputs without this:
<input type="submit" hidden="hidden">
I have a aspx page that I need to call without going directly on that page.
I have tried to make POST from form but it opens this action url in browser.
<form method="POST" action="http://mysite/actionpage.aspx">
<input type="submit" value="Submit" />
</form>
You could use curl if you're on a *nix system.
Here is a reference on how to post data to a page. The result will be returned through the command line.
What is the curl command line syntax to do a post request?
Here is the syntax for reference:
curl -d "param1=value1¶m2=value2" http://example.com/resource.cgi
or
curl -F "fileupload=#filename.txt" http://example.com/resource.cgi
If jQuery is allowed to use in your case, You may use jQuery ajax to call that page
$("form").submit(function(e){
e.preventDefault();
$.post("yoursecondpage",function(data){
//do whatever with the response from that page
});
});
You can do it via ajax.
For example, if you add a script reference to jQuery things will get much easier, and you can do the following:
<script type="text/javascript">
function postIt()
{
$.post(
"http://mysite/actionpage.aspx"
, function(data)
{
// data was returned from the server
alert("data posted in the background");
} );
}
</script>
The processing you be done via background.
Your final HTML woul be :
<form method="POST" action="http://mysite/actionpage.aspx">
<input type="submit" value="Submit" onclick="postIt();" />
</form>
I haven't tested , but looks like you are navigating to .aspx means server page, i.e. you need to use runat="Server" in your tags like this