Link click and button click in one HTTP request - php

I was developing on my localhost and came across this question.
Consider there is such HTML code:
<form action="" method="POST">
<input type="submit" name="submitButton" id="submitButton">
</form>
<a onclick="clickButton('submitButton');" href="guestbook/index.php?pageNumber=1">
The <a> click triggers submit button click event. The Javascript function looks like this:
function clicktButton(id) {
if (id != "")
document.getElementById(id).click(); // this will trigger the click event
}
My question is: is something like this possible? To send a HTTP request with link press and button press simultaniously?
Because by pressing an <a> link I already send a HTTP request with $_GET['pageNumber'] parameter. But I also want to send the $_POST['submitButton'] data at the same time.
Thanks in advance!

What you want is possible, but not so much with the code I see before me..
<form action="guestbook/index.php?pageNumber=1" method="post">
<input type="submit" name="submitButton" id="submitButton">
<input type="button" name="submit">
</form>
This would essentially post the contents of the form, with a get request attached.
An <a> would not really work, because it generates a new HTTP request and would presumably skip JavaScript execution of the currently loaded page.
On the other hand, you can simulate the effects of an <a> click with JavaScript, by making a post request with the form data to guestbook/index.php?pageNumber=1. But if you do this I would recommend jQuery as it will make things easier for you by adding this to the click event.
$.ajax({
url: "guestbook/index.php?pageNumber=1",
data: {'field':'value'},
async: false
});

Related

How can a submit button made to be act as a link too?

I'm doing a Quiz project: The idea is to implement almost 25 questions in which each question occupies each HTML page with 4 radio buttons and a submit button and a reset button as well.On clicking the submit button it should take the user to the next page as well as submit the data to the server. How to achieve this dual behaviour?
I tried this:
<form action="cba.php" method="post">
<a href="abc.html">
<input type="submit" value="submit">
</a>
</form>
But this does only one purpose: Acting as a link without submitting the data.
If you just want to redirect the user after submitting the form, you can use :
header("Location: yourlink");
in the php script you called cba.php.
Otherwise, i'm not sure it is possible to redirect the user before sending him the php script page.
As mentioned, it would be a smoother experiance to handle this via ajax, but it can be acheived in just php by creating a redirect in the form processing code (as mentioned in comments and a current answer).
I believe your issue is with the fact that the same proccessing code (cba.php) will be called every step of the way, so you need a way for each quiz section to define the next section.
This can be done with a hidden field instead of the link code you tried:
<form action="cba.php" method="post">
<input type="hidden" name="next-page" value="abc.html">
<input type="submit" value="submit">
</form>
Then i cba.php, you redirect to the value contained in this hidden field:
//save the data from the form, then
header("Location: " . $_POST['next-page']);

Onsubmit anchor linking

When my contact form is not sent because of blank fields it reloads the site and shows an error message before the form. A "success" message is shown when everything is ok.
The problem is that the contact form is in the footer and you can't see either message without scrolling down yourself after sending the form.
I've tried this in the submit button, though it doesn't work.
<input type="submit" value="Send" onsubmit="location.href='#footer';">
Footer is the id where I want the user to be sent after submitting.
Any ideas?
Thanks!
EDIT
Using "index.php?#footer" instead of the id alone seems to work in the case of the error message, not in the case of success for some reason....
You can add #footer to the form's action value
<form action="/some_path/#footer">
<input type="submit" value="Send">
</form>
I think you want to get the position of your element first.
Call it the following:
<input type="submit" value="Send" onsubmit="anchorfunction('#footer');">
Then your JS function should look like this:
function anchorfunction(elem) {
var top = document.getElementById(elem).offsetTop;
window.scrollTo(0, top);
}
This way you will get the top of your element and scroll within the current window to it.

How do I submit my form using href?

Am using this onclick='document.forms['form_name'].submit(); return false;' but this doesn't work as am having href=results.php?page_no=1 etc, has dynamic links, examples show to make this work I need to use href="#" but any idea how I can submit the form and than navigate to page2? Because I want to save the check box values in a session
Add class to your hrefs (class="pagination") and id (id="form") to your form. Then you can use Jquery framework for this stuff.
$(".pagination").click(function(){
// get page id, set form action with params
$("#formId").submit();
return false;
});
You have a bad design.
You can't perform multiple competing actions on a form click and expect it to work.
You need to either let the link be clicked and let it load another page, or if you are just setting some session variable (although it would be far better to set this with a querystring parameter or a cookie), you can use an Ajax request to send that off asynchronously.
Here I substituted page2 with Google just for test
Submit
<form method="get" action="https://www.google.com/search?q=test" name="test">
<input name="Checkbox1" type="checkbox" />
</form>
edit:
Submit
<form method="get" action="" name="test">
<input name="Checkbox1" type="checkbox" />
</form>
without encodeURIComponent(this.getAttribute('href') the parameters are missed.
Some options:
1) Use jQuery AJAX, serialize and post the form data and then redirect (location.href) on the onSuccess callback. Something like this:
$.post("submitform.php",
$("form").serialize(),
function(data){location.href='results.php?page_no=2';}
);
2) Post the form to a named hidden iFrame using "target" on the form tag. If this is really just a best effort sort of recording you shouldn't need to wait for the page to load, the request should be enough and you can continue to the next page. Something like this:
<iframe="targetname" style="display:none;" />
<form name="myform" target="targetname" method="post" action="submitform.php">
....
</form>
<a href="page2.php" onClick="document.forms['myform'].submit(); return true;">
Click Here
</a>

Submitting a form with jQuery/Ajax only works every other time

I'm trying to submit a form which includes a file upload via Ajax/jQuery, process the form through a PHP script, and return the result in the div that the form originally resided in.
My current form code is:
<section id="content-right">
<form name="uploader" id="uploader" method="POST" enctype="multipart/form-data">
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="10485760" />
<input type="file" name="fileselect" id="fileselect" />
<input type="submit" name="submit" id="submit" value="Upload" />
</form>
</section>
And my current Ajax/jQuery script is:
<script>
$(function() {
$('#uploader').submit(function() {
$(this).ajaxSubmit({
type: $(this).attr('method'),
url: 'upload-song.php',
success: function(response) {
$('#content-right').html(response);
}
});
return false;
});
});
My PHP script is "upload-song.php" (the details don't matter).
I also have YUI.Pjax running to handle normal navigation (a href) links and load those in #content-right (if a user clicks anything, I want it loading in #content-right).
With this set up, navigating through normal links works perfectly, everything loads in #content-right, but the uploader only works every other time.
For example, the uploader will load upload-song.php in #content-right and process everything perfectly, then if I navigate away from the page and try to upload another item, it won't work, it'll just refresh the page (if I put action="upload-song.php" in the form tag it'll load upload-song.php as a full page, not in #content-right). After it refreshes the page I can upload another item and it will work perfectly.
I think it has to do with how I'm attaching my Ajax script to the form submit (because if I refresh the page it works perfectly), but I don't have a lot of experience with these languages so I'm not sure how to fix it.
In addition, if I disable YUI.Pjax it fixes the uploader but obviously breaks my links, so I'm looking for a work around.
Any ideas?
Try this:
$(document).on("submit", "#uploader", function() ...
This syntax will let the submit event bubble up to the document. That way, when the #content_right section reloads, the document retains the event listening response set up in the DOM ready function.

HTML Javascript forms, and a php script - Simple question, help! what does this code do?

So I have this simple form:
<form action="includes/process.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<button onclick="dofunction(); return false;">Do it!</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
</form>
So what happens really when the button is clicked ?
Is it that the php file is called ? does it not ? the javascript is called before ?
Anyone can shed some light on this ?
Thanks !
Well, when you hit the button the following events occurs:
You send a REQUEST to the server
The php codes evaluates the request and runs some codes
Finally it returns back a RESPONSE which you see as a web page
Javascript is a client-side script which means that whenever you make an action on the page, the code runs. For instance, when you click the button, before sending the request javascript will work. You may, for instance, place a function that will be triggered when you hit the button which checks the form and either approves the form or shows the error messages
EDIT
As far as your comment is concerned:
Yes, javascript runs first when you hit the submit button. Php runs only when you submit the form and make a request to the server.
Consider this example: (I am better at explaining things with examples:)
<form action="somepage.php" onsubmit="return checkMe()" method="POST">
<input name="firstname" id="fn" value="" type="text" />
<input type="submit" value="Submit" />
<script type="text/javascript">
function checkMe(){
var tb = document.getElementById("fn")
if(tb.value == "Alex") return true;
else return false;
}
</script>
</form>
So basically, when you hit the button and try to submit the form, the javascript will first check whether the name provided in the textbox is Alex or not, if it is not then it will not submit the form. If it is Alex then it will submit the form and then the form will redirect the user to somepage.php. Finally, the php codes will work in somepage.php and the page will be rendered again.
What happens is that only doFunction() javascript function is invoked and nothing more.
However, it might be possible that this javascript function invokes "submit" event on the form and the request is sent (what you described as "php file is called").
Your code just trigger javascript event and your function. To submit a form you need an
<input type="submit" value="Submit" />
or a button, which default type is submit (thx davin)
<button value="Submit" />
However as far as you return false in your javascript code your form won't be submitted even with the submit button.

Categories