I have one form that works perfectly and changes the action of the form based on radio buttons:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
I tried
onChange="if(this.checked)
first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?
You need to change it slightly.
Your onchange events should be bound to the select not the individual options.
I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.
This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".
See - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>
Related
I am have three servers in three different domains. For example,
google.com
oracle.com
sap.com
I have a combo box with the same values as above. How can I change the form action to change to respective site once it is selected in the combo box?
Here is the code i have tried.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#serverName").on("change",function(){
alert($(this).val());
if($(this).val().toString===("google"))
$("#dataform").attr('action',"http://google.com");
if($(this).val().toString===("oracle"))
$("#dataform").attr("action","http://oracle.com");
if($(this).val().toString===("sap"))
$("#dataform").attr("action","http://sap.com");
});
});
</script>
My form is like :
<form action="anyaction" name="dataform" method="post" >
<img src="logo.png"><br/>
<label for="email" class="boldtext">Triggered By</label><br>
<input type="text" id="email" name="email" placeholder="Enter your mail id"
required><br/>
<label for="serverName" class="`boldtext`">Server Name</label>
<select id="serverName" name="serverName" >
<option value="selectServer">Select the Server</option>
<option value="google">Google</option>
<option value="oracle" >Oracle</option>
<option value="sap">SAP</option>
</select><br/>
<label for="Clients" name= "Clients"
class="boldtext">Clients</label><br>
<input type="text" id="count" name="count"
placeholder="Enter No Of clients" required>
<br/>
<label for="items" name="items" id="items"
class="boldtext">Items</label>
<textarea id="items" name="items" required rows="3"> </textarea><br/>
<button type="submit">Submit</button>
</form>
Looks like there is some value represented by the name for the form i used "dataform".
Once i change it to dataform123 it worked. also the comparison i have changed from tostring.equals to == / === both of them worked.
Thanks for being there to keep me trying !!
I have this javascript/ajax code that I have been tweaking for half a day now to just add a div response that was echoed by php script. Any help would be much appreciated.
<form id="form1" name="form1" method="post" enctype="multipart/form-data">
<select id="machine" name="machine" class="field" >
<option value="" selected="selected">Choose..</option>
<option value="machine1.php">Machine 1</option>
<option value="machine2.php">Machine 2</option>
</select>
</fieldset>
<fieldset>
<legend><strong>Select a file to upload</strong></legend>
<input type="file" id="files" name="files[]" size="40" multiple="multiple" />
<br />
<p></p>
<input type="submit" value="Upload File" id="upload" />
<br />
<br />
</form>
<div id="information"></div>
</fieldset>
<fieldset>
<legend><strong>Uploaded Files</strong></legend>
<div id="uploaded"></div>
</fieldset>
<script type="text/javascript">
function addaction(actionvalue){
$("#form1").attr("action",actionvalue);
};
</script>
As GHOST93 said, there's no AJAX call in your code.
But to me it seems like you're trying to change the action attribute based on what is selected in the select box. That by itself doesn't need an Ajax call.
Try adding something like this into your script
http://jsfiddle.net/W4Km8/7431/
$("#machine").change(function(){
$("#form1").attr("action", $(this).val());
});
And you can probably drop your addaction() function.
I am trying to send data through ajax to a PHP script. I know I can use form.serialize() but this will send the entire form, which is not what I want.
My form looks like this:
<form method="POST" action="timesheets/new" accept-charset="UTF-8" id="timesheet">
<input name="_token" type="hidden" value="xxx">
<input name="template_id" type="hidden" value="1">
<input name="user_id" type="hidden" value="1">
<fieldset>
<legend>New Timesheet</legend>
<fieldset>
<legend>Date/Hours Worked</legend>
<label for="work_type_0">Work Type</label>
<select class="work_type" id="work_type" name="row[0][work_type]">
<option value="Hours Worked">Hours Worked</option>
<option value="Day Rate">Day Rate</option>
<option value="On Call">On Call</option>
<option value="Paid Holiday">Paid Holiday</option>
<option value="Unpaid Holiday">Unpaid Holiday</option>
</select>
....
I only want to send the value of the _token field and the value of the work_type select field.
How can I achieve this?
Try to do this
$("[name='token'],.work_type").serialize()
How can I reset multiple select boxes in a form with jquery?
there are multiple select boxes
they are dynamically generated & we don't know what they will be
some of the boxes option tags will be marked as selected
fiddle: http://jsfiddle.net/Qnq82/
I have this so far, it resets everything but the selects.
$('button#reset').click(function(){
$form = $('button#reset').closest('form');
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
$form.find('select').selectedIndex = 0;
});
Added some markup:
<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">
<div class="form-group">
<label for="grade">Grade</label>
<select name="grade" class="form-control input-sm" onchange="this.form.submit();">
<option value="">Any</option>
<option value="opt1">opt1</option>
<option value="opt2" selected="selected">opt2</option>
</select>
</div>
<!-- there are 6 more select controls -->
<div class="form-group">
<label> </label>
<button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
</div>
<div class="form-group">
<label> </label>
<button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
</div>
</form>
This will work:-
$form.find('select').prop('selectedIndex',0);
I deselect all html selects in the form with this code succesfuly:
$("#form1").find('select').prop('selectedIndex', -1);
I tried and searched a lot on StackOverFlow but didn't get any solution to reset multiselect.Then i found This Link. That solved my Problem.
Here is the code sample.
$("#yourcontrolid").multiselect('clearSelection');
Change the last line to this:
$form.find('select')[0].selectedIndex = 0;
selectedIndex is a property of HTMLElement and not jQuery object.
If you know the value, then you can do $form.find('select').val('value');
Below code worked for me:
$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');
$form.find('select').each(function(){
$(this).val($(this).find('option:first').val());
});
This one works for me...
I'm new to JavaScript, and seeking for some help. I have a form with a select drop down with 5 options.
<form accept-charset="UTF-8" action="" method="post" onclick="javascript:location.href = this.value;">
<input id="name" name="name" size="30" type="text" value="Type your name">
<select id="option" name="Region" >
<option value="value1.html">Option1</option>
<option value="value2.html">Option2</option>
<option value="value3.html">Option3</option>
<option value="value3.html">Option4</option>
<option value="value3.html">Option5</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
And this Javascript:
<script type="text/javascript">
window.onload = function(){
location.href=document.getElementById("option").value;
}
</script>
I tried this and doesn't work to redirect to the page I want after I submit the form! Any ideas? I need that form to work, doesn't matter if I can do it with PHP or JavaScript.
Your window.onload is executed instantly before you even get a chance to make a choice.
<form onsubmit="return mysubmit();">
<select id="option" name="Region" >
<option value="value1.html">Option1</option>
<option value="value2.html">Option2</option>
<option value="value3.html">Option3</option>
<option value="value3.html">Option4</option>
<option value="value3.html">Option5</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
<script>
function mysubmit(){
//you can return false; here to prevent the form being submitted
//useful if you want to validate the form
window.location.href=document.getElementById('option').value;
}
</script>