Auto submit form on different page after query string is passed? - javascript

Is this possible?
So I have the code below on the first page:
<form method="get" action="http://webpage.com">
<input type="hidden" name="a" value="1">
<input type="hidden" name="b" value="2">
<input type="hidden" name="c" value="3">
<input type="submit" class="submit" value="submit">
</form>
And the form fields in the second page are prepoulated with 1, 2, 3. Would it be possible for me to auto-submit this second form on load using code from the first page if the pages are on different domains, or would the auto-submit have to be done from the second page?
I don't see how it would be done, but figured I would ask anyway.

Would it be possible for me to auto-submit this second form on load using code from the first page
No. Nothing you do on a page can influence the behaviour of the following page (other than by passing data to it that logic in the subsequent page triggers on).

Related

How to use getElementById on a link to pick up textfield value

I want use document.getElementById('YourElementId') to pick up the Textfield value and then send it to another page called request.php as URL parameter.
Example, if i type (3) on the Textfiled and click submit, the Link will pick up the form variable as url parameter just like the folowing (.../requst.php?=id=3) Onsubmit.
Bellow is my textfield and the submit link/button but it doesnt work. Someone please help me.
<input name="consigno" type="text" id="YourElementId" value="3">
ENTER
Actually you can do this by using html form. This will do same thing.
<form method="GET" action="remote.php">
<input name="nav" id="YourElementId" type="text" value="3">
<input type="submit" value="ENTER">
</form>

PHP - Pagination: $_POST or $_GET

I'm developing a search system(multiple filters) that uses pagination with php.
At first i was using the method POST with the main form. But, using POST i was unable to keep the pagination. Reason: when the user search by name, for example, as he clicks in the next pages the query get lost and return to the first page.
To fix this i use GET method instead.
But using GET, the url gets the parameters. And the users don't want that.
Example:
http://mysearch.com/search.php?name=joe&id=1
I just want to be
http://mysearch.com/search.php
I tried this workaround:
if(typeof window.history.pushState == 'function') {
window.history.pushState({}, "Hide", "http://mysearch.com/search.php");
}
But when i hit the "Previous Page/Back" in the browser, the URL with the parameters come back either.
Is there a solution for this? Use GET or POST with pagination and the parameters does not shows in the URL?
You can paginate with $_POST just as easily as with $_GET and without SESSION variables/cookies, you just need to pass the pagination variables as hidden values in your HTML form.
eg - for two buttons, one of which takes you to previous page, and one to next:
//prev button
<form action="paginate.php" method="post">
<input type="hidden" name="prev" value="0"/>
<input type="submit" value="Go to previous page"/>
</form>
//next button
<form action="paginate.php" method="post">
<input type="hidden" name="next" value="2"/>
<input type="submit" value="Go to next page"/>
</form>
//search form
<form action="paginate.php" method="post">
<input type="hidden" name="prev" value="0"/>
<input type="hidden" name="next" value="2"/>
<input type="text" name="search" value="User input goes here"/>
<input type="submit" value="Search the database"/>
</form>
The disadvantage is that POST will give 'page expired' errors when using the browser back button (but not the HTML buttons), which is not great. For that reason I'd prefer $_GET, and also because you can bookmark $_GET queries, but not $_POST.

Different Values in Form Inputs

I have a simple HTML form that works with a PHP script (to process the values).
For some reason it's not working correctly. After many tests, I inspect the mark-up for the form and I find:
<form id="delete_item_3_form" action="upload/delete_item.php" method="post">
<input type="hidden" value="4" name="item_id">
<input type="hidden" value="test" name="item_info">
</form>
As it should be. Please note that the values for the inputs are hard-coded.
However, if I go to the browser console (I am using Chrome) and write:
$('#delete_item_3_form');
I get:
<form id="delete_item_3_form" action="upload/delete_item.php" method="post">
<input type="hidden" value="4" name="item_id">
<input type="hidden" value name="item_info">
</form>
As you can see the value from the second input, item_info, is empty. Both inputs have a name.
I am not new to Form Handling but I have never seen this. The page mark-up shows one thing in a form, and a simple jQuery call to the same form shows another thing.
I have nothing, on my scripts, changing the value of the inputs.
The form is submitted by the press of a button. Here is the jQuery code:
$('#delete_item').click(function()
{
$("#delete_item_3_form").submit();
});
How is this happening?
I had another form in the page with the same ID.

Submit button values not being passed with Ajax

I have the following ajax code which submits name/email/message parameters to "messageaction.cfm" template and displays those same 3 parameters on original submission page (works fine):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
$.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}
</script>
<form id="ContactForm" onsubmit="return submitForm();">
Name: <input type="text" name="name" value=""><br>
Email: <input type="text" name="email" value=""><br>
Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
<br>
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
<div class="form_result"></div>
</form>
However, I have 2 submit buttons (corresponding values of "One" and "Two") and would like to be able to detect which one was pressed. In a normal submit form (without ajax), the variable "Choice" is diplayed correctly with the corresponding "One" or "Two" depending on which button I clicked. But in the ajax form, the "Choice" variable only displays the same "0" (default value) regardless of which button I press.
I have tried 2 other ajax form variations but cannot seem to pass the value of the input submit button value. There must be something really basic I'm doing wrong but have tried just about everything I can think of. Any suggestions would be highly appreciated!
Since id is unique and name attribute should be unique in the same form as well, you should change:
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
to:
<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">
and try again with your AJAX code. Make sure you target it properly this time :)
At the time of the submit event, jQuery.serialize() does not know which button was clicked, so it is likely skipping those buttons when generating the form data.
You'll have to process the click events for each button as well and manually pass the button value.
An alternative would be to set a hidden form field value when the user clicks a button since a button click event will get processed before the form submit.

jQuery Post data to next page

I'm programming a registration page where the user first selects one of three options in the first page and only then can move onto the second page because it displays content that is dependent on the previous selection. So this is my code:
<script>
$(document).ready(function(e) {
$("form").submit(function() {
var data= $(this).serialize();
$.post("/Registration_1.php",data);
alert(data);
});
});
</script>
<form id="frmtype1" name="frmtype1" method="post">
<input type="radio" name="Reg_type" value="1"/> option 1 <br/>
<input type="radio" name="Reg_type" value="2"/> option 2<br/>
<input type="radio" name="Reg_type" value="3"/> option 3 <br/>
<input type="submit" name="Submit" value="Submit" />
</form>
The problem is that after selecting an option and clicking submit it just stays on page 1. The alert displays the data, which is all correct but it just wont move to the next page. I'm brand new to jquery so i don't know if the $.post is syntactically correct. Can anyone see what the problem here is? Why won't it go to the next page? Thank you
Yo mate you need to define one more function which handles the success event of your post method. When your post is completed succesfully then you can change the URL like SomeKittens showed you.
$.post("/Registration_1.php",data,function(response){
window.location = ...
});
Do specify the action in the form like : action="your url"
for eg:
<body>
<form id="form1" action="http://stackoverflow.com/" method="post">
<input type="radio" name="Reg_type" value="1"/> option 1 <br/>
<input type="radio" name="Reg_type" value="2"/> option 2<br/>
<input type="radio" name="Reg_type" value="3"/> option 3 <br/>
<input type="submit" id="s" name="Submit" value="Submit" />
</form>
</body>
Modified script:
$(document).ready(function () {
$('input').on('click', function () {
window.location('http://stackoverflow.com/');
});
});
hope this helps :)
The problem is that $.post is sending the data, but not redirecting the user.
Here's a tutorial on how to redirect the user.

Categories

Resources