I would like to have a form that can submit to two different action pages based on a select box.
Meaning if I select in the select box Products, the action would be products.html, and if I select Users, the action would be users.html
I have found many examples that have two submit buttons, but I need only one submit button.
Any ideas on how to do it?
you can use jQuery for that ...
if selected value equals something
set form attribute action to the other thing not initial action
this is pseudo code of course ..
here is a working solution :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#selectList").change(function(){
if($('#selectList').val() == 1){
$("#yourform").attr("action","secondaryaction");
}
});
});
</script>
</head>
<body>
<select name="dummy" id="selectList">
<option value="0">foo</option>
<option value="1">bar</option>
</select>
<form id="yourform" action="primaryaction">
bla bla
</form>
</body>
</html>
Try something like this (assuming a form named "myForm"):
document.myForm.onsubmit = function() {
if (this.mySelector.value == 'products') {
this.action = 'products.html';
}
// the "else" isn't necessary: leave it at "users.html" as a default.
};
read about new attributes
Attributes for form submission that may be specified on submit buttons. The attributes are: formaction, formenctype, formmethod, formnovalidate, and formtarget
Works in IE >= 11
my example for will be demonstrated point :
<form action="1.php">
<input type="text" >
<button value="go"> GOOOOOOOOOOOO</button>
<button value="go" formaction="2.php"> DONNNNNNNNNNNNNNNNOOOO</button>
</form>
if(condition==products)
document.forms[0].action = 'products.html;
else
document.forms[0].action = 'users.html;
Related
Can anyone help me with this script I'm trying to get working? I need a text box with a submit button, when a certain id is entered I need them to be re-directed to a certain site (below examples in the script are are yahoo, bing, etc).
This below is what I have so far, but the submit button doesn't show up and when the submit button is hit it doesn't seem to execute the script.
I just get a #? added to the url... I'm working in opencart so I think part of the problem might be with opencart.
<html>
<head>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap={
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
id=document.getElementById("siteid").value;
if (id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
event.preventDefault()
});
</Script>
</Head>
<Body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
</Body>
</Html>
Thanks for any help on this!
You should add your script at the end of the body.
You are calling document.getElementById("gobutton").addEventListener too early, at this point the button is not yet present in the page DOM, so no event is attached to it.
Working code :
<html>
<body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap = {
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
var id = document.getElementById("siteid").value;
if(id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
});
</script>
</body>
</html>
PS : try to indent your code prior to posting it !
I think if you remove that form tag ,it will solve all your problems.
I think there's no need for it be of submit type and have a form at all
Just remove those and the event.preventDefault()
So I am facing a very annoying issue. I have a form with all empty field initially. Now user has a option to use default set of values by choosing a radio button 'yes' option.
If the user chooses to use default set of values then I fill all the form fields with default set of values using script. Everything goes fine till now.
The problem is my select drop-down not getting set with the default value. After debugging I found out that it is getting set but then On Change event of JS gets fired which is populating the drop down with the dataset from a ajax response.
How to stop on-change event to be fired if the user not clicked on the drop down and changed something.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" value="1" name="rdChoice"> Yes! Set Default Value
<input type="radio" value="0" name="rdChoice"> No! I have to fill data
<hr>
First Name : <input type="text" name="txtFirstName" id="txtFirstName"><br>
Last Name : <input type="text" name="txtLastName" id="txtLastName"><br>
Country :
<select onchange="getState()" id="selCountry">
<option>Choose</option>
<option>India</option>
<option>Japan</option>
<option>US</option>
</select>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getState()
{
console.log("get state");
}
$(function()
{
$( 'input[name="rdChoice"]:radio' ).change(
function()
{
if(this.value==1)
{
$("#txtFirstName").val("Paresh");
$("#txtLastName").val("Gami");
$("#selCountry").val("India");
}
else
{
}
}
);
});
</script>
If user click on select box then and only getState is called.
I need to dynamically create and submit HTML form.
I join many forms into one AJAX request so I clone them and send by jQuery. Code in the link shows the not working part. The problem is that jQuery is sending original HTML code instead of generated/user changes code.
What do I wrong?
http://ajax.dev.brown.sk/test1.html
Whole example:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").text($clone[0].outerHTML);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
// data contains output of <?php print_r($_POST) ?>
$("pre:last").text(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<select name="select">
<option value="a">aaa</option>
<option value="b" selected="selected">bbb</option>
<option value="c">ccc</option>
</select>
<input type="submit" />
</form>
<hr />
<pre></pre>
<hr />
<pre></pre>
</body>
</html>
EDIT:
I think the problem is with serialization of cloned form. Check this example:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
// copy inputs and take it to form element
$clone = $(this).clone();
// display the serialized values below
$("pre").text($clone.serialize());
return false;
});
});
</script>
</head>
<body>
<form>
<select name="select">
<option value="a">aaa</option>
<option value="b" selected="selected">bbb</option>
<option value="c">ccc</option>
</select>
<input type="submit" />
</form>
<pre></pre>
</body>
</html>
You need to make it response to the delegate since it not with the initial DOM
$(document).ready(function(){
$("form").on('submit',function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").append($clone[0].outerHTML);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
$("pre:last").append(data);
});
return false;
});
});
Edit
You are only getting the outerHTML and you need everything
$(document).ready(function(){
$("form").on('submit',function(){
// copy inputs and take it to form element
$clone = $(this).clone(true,true);
// display the code to below
$("pre:first").append($clone);
// ajax form submit
$.post("/post.php", $clone.serialize(), function(data){
$("pre:last").append(data);
});
return false;
});
});
I hope this can help :)
SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you
Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>
My form will not submit through AJAX to show the return of the PHP page, 'myscript.php'.
This is the HTML I'm using:
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="{{submit-text}}" />
</form>
Here is the javascript earlier in the page:
jQuery(document).ready(function($) {
$('#city').change(function() {
$(this).parents("form").submit();
});
$('#myform').submit(function() {
$.post(
'myscript.php',
$(this).serialize(),
function(data){
$("#mydiv").html(data)
}
);
return false;
});
});
Here is the myscript.php:
<?php
if ($_POST['city'] == "atlanta") {
echo "Div contents 1";
}
if ($_POST['city'] == "miami") {
echo "Div contents 2";
}
?>
The submit button won't respond at this point or make an attempt to access the 'myscript.php' file. Help is appreciated. Thanks in advance!
It is better to use .closest() rather than .parents() in this case.. As parents selector gets all the ancestors that match the selector.
$('#city').change(function() {
$(this).closest("form").submit();
});
And to stop the Default action use e.preventDefault instead of return false
$('#myform').submit(function(e) {
e.preventDefault();
// Your code here
});
In you HTML code, I think you should change input type=button to input type=submit
<input class="srch_btn" type="submit" value="{{submit-text}}" />
Then when you click that button, the form will be submitted to your php page.
Also, about select change event in your jQuery code, I think you can just try following selector, as you have the name/id attribute available in your HTML.
$('#city').change(function() {
$('#myform').submit();
});
One issue with your code is that it does not actually stop the form from being submitted. return false; does not exactly work in jQuery in the way that you think it does. Instead, to stop the default action, you would have to do something like this.
$('#myform').submit(function(event) {
event.preventDefault();
http://api.jquery.com/event.preventDefault/
On top of that, if you don't want the form submit to take place, and you want to replace it with your own AJAX submition, why are you calling form submit at all in this code? Why not just put the AJAX directly into your change code?
dqhendricks was right - why use form submit when you can just access ajax directly? In the below example, I added a div (#responder) below the form to show the output. Try it -- you'll see that it works perfectly.
You really don't need the button, although I left it there, because the data is sent/received the moment the drop-down is changed. You will see your messages appear in the div I included below the form.
REVISED HTML:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="Go" />
</form>
<div id="responder"></div>
REVISED JAVASCRIPT/JQUERY:
$(document).ready(function() {
$('#city').change(function() {
//var cty = $('#city').val();
$.ajax({
type: "POST",
url: "myscript.php",
data: "city=" + $(this).val(),
success:function(data){
$('#responder').html(data);
}
});
});
});