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.
Related
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).
I'm trying to select a radio button with an id (lets say the ID is "radio") and then automatically click a button with a type of submit inside of a form with an id of "multifee". I want these two things to automatically happen upon page load. Any suggestions on how to do this with javascript?
<form method="post" action="#" id="multifees" onsubmit="feeForm.submit(this); return false;">
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name">
<button type="submit" class="button">Add</button>
</form>
So far I have no javascript started because I'm not even sure where to begin.
When declaring your radio button, you can add the attribute checked so that it is autoselected even when the page loads.
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name" checked>
If you want to auto-submit, you can just make Javascript click for you.
<script type="text/javascript">
document.getElementById('sumbit').click();
</script>
If you want the script to work, you have to place the script after <body> so that the element can been loaded onto the page or else it won't know what button to look for since it may not have been loaded yet. Make sure to give your submit button an id as well.
$('#radio').check();
$('#submit').click();
EDITS: with javascript
document.getElementById('radio').checked=true;
document.getElementById("multifees").submit();
In pure Javascript try this in a window.onload handler:
document.getElementById('radio').check();
document.getElementById('submit').click();
Based on what you're asking for, there are really only a couple things you need.
A radio list which one is preselected:
<form name="thisForm" id="thisForm" method="post" action="[your destination]">
<input type="radio" name="choice1" value="choice1" checked /> choice<br />
<input type="radio" name="choice1" value="choice2"/> choice2<br />
<input type="radio" name="choice1" value="choice3"/> choice3<br />
</form>
And a Javascript function to submit the form:
<script type="text/JavaScript" language="JavaScript">
function submitForm() {
document.getElementById("thisForm").submit();
}
// submitForm();
</script>
I have the call to the function commented out on purpose, or you would throw you page into an infinite loop.
You can check the radio button (#radio) like so:
document.getElementByID("radio").checked = true;
Or actually within the html using the checked property:
<input type="radio" checked>
To auto-submit:
document.getElementsByClassName("button").click();
Or:
document.getElementByID("multifees").submit();
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.
Let's assume, a database contains entries for cars in many models, colours and with 2, 4 and 5 doors.
The task: Create a search form which lets the user pick both model, colour and number of doors, using only radio buttons. Every time the user selects a radio button, the search result should be updated. No Submit-Button.
The HTML-Code:
<form id="searchform">
<div>
<input id="car_model1" type="radio" name="model" value="bmw"> BMW
<input id="car_model2" type="radio" name="model" value="peugeot"> Peugeot
<input id="car_model3" type="radio" name="model" value="fiat"> Fiat
</div>
<div>
<input id="car_colour1" type="radio" name="colour" value="white"> White
<input id="car_colour2" type="radio" name="colour" value="red"> Red
<input id="car_colour3" type="radio" name="colour" value="blue"> Blue
</div>
<div>
<input id="car_door1" type="radio" name="door" value="2"> Two
<input id="car_door2" type="radio" name="door" value="4"> Four
<input id="car_door3" type="radio" name="door" value="5"> Five
</div>
</form>
<div id="searchresult"></div>
Now, I thought, I could use the jQuery change() function to catch the users click and then send a request via post() to the database. But somehow I can't make it work. Here is my attempt:
The Javascript-Code
$("[id^=car]").change(function() {
var data = $("#searchform").serialize();
$.post("process_data.php", data, function(response) {
$("#searchresult").html(response);
});
});
Of course there is PHP-Code to process the request, but the problem is that the Javascript is not executed. The change-Event does not work. I also tried it with click() and keyup(). Same negative result.
I am quite new to jQuery and Ajax and right now I have no idea what is wrong. Maybe you can tell me where my error is.
Just try this,
$("input[id^=car]").change(function() {
I will not say that your selector is wrong. But using an element name before the attribute selector is a good practice.
Fiddle : DEMO
Another day and after a good sleep I tried it again and this time I found the source of the problem: I load the script in the <head> part of my HTML. Therefore I need to make sure, the document is fully loaded, using the ready() function, otherwise the change() function does not work:
$(document).ready(function() {
$("input[id^=car]").change(function() {
var data = $("#searchform").serialize();
$.post("process_data.php", data, function(response) {
$("#searchresult").html(response);
});
});
});
This code has two links with same name but different values. If i click first link, i want to get value 10. Is it possible using javascript with link submit()??
<form name="listpages" action="page.php" method="post">
<input type="hidden" name="pgnum" value="10">
<input type="hidden" name="pgnum" value="20">
</form>
thanks in advance
No. But you can use this code to achieve the desired results.:
<form name="listpages" action="page.php" method="post">
<input type="submit" name="pgnum" value="10">
<input type="submit" name="pgnum" value="20">
</form>
EDIT
The JavaScript way. I don't see why you want to stick to JS. Your code will be broken when a user has disabled JavaScript (by using NoScript, for example);
<form name="listpages" action="page.php" method="post">
<input type="hidden" id="pgnum1" value="10">
Option 1
<input type="hidden" id="pgnum2" value="20">
Option 2
</form>
Why not use a single hidden input and set it's value via the hyperlink:
<form name="listpages" action="page.php" method="post">
<input type="hidden" name="pgnum" value="10">
10
20
</form>
You could use a single form and combine it with some javascript code to submit the form with the appropriate page number:
<form name="listpages" action="page.php" method="post">
<input type="hidden" name="pgnum" value="1">
</form>
<script type="text/javascript">
function submitPageForm(pageNo) {
var form = document.forms.namedItem("listpages");
form.elements.namedItem("pgnum").value = pageNo;
form.submit();
}
</script>
...
But be reminded that for websites it is actually recommended to use GET parameters to switch pages, content items etc.
Here is a very good guide on choosing between GET and POST: http://www.w3.org/2001/tag/doc/whenToUseGet.html
Finally, if you decide to switch to GET, you no more need the form at all. I.e. you can simply write:
...