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()
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 a drop-down form on a landing page that needs to change the Submit button URL upon form submission. See screen shot below:
Drop Down Screeshot
Here is the code for the form:
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
<option value="">Select One</option>
<option value="Tire Dealer">Tire Dealer</option>
<option value="Auto Service Dealer">Auto Service Dealer</option>
<option value="Tire Wholesaler">Tire Wholesaler</option>
<option value="Auto Parts Shop">Auto Parts Shop</option>
<option value="Warehouse Distributor">Warehouse Distributor</option>
<option value="Jobber">Jobber</option>
<option value="Other">Other</option>
</select>
</div>
</fieldset>
</form>
I've found a few codes that seem like they could work, but I'm not experienced enough to a) alter the code for a dropdown menu and b) add more than one or two URLs (there are six or so options). Can anyone help?
Many thanks in advance :)
ETA: I'm not actually able to edit the form code, as it's drag-and-drop in my editor.
As I understand your code, the pageId is the important information. So I would put this as the value of your dropdown (below is just dummy data, needs to be replaced with actual pageIds) and set the value in the onchange method.
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company"
class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
<option value="">Select One</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
</select>
</div>
</fieldset>
</form>
<script>
function(selectedPageId){
document.getElementById('pageId).value = selectedPageId
}
</script>
Use a listener on the select element to capture the selected value and append or use it to modify the form action. The following example appends the selected value to the form action:
HTML:
<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
</div>
</fieldset>
</form>
Javascript:
function updateFormAction() {
var selectedVal = document.getElementById('which_best_describes_your_company').value
var form = document.getElementById('form')
form.setAttribute('action', form.action + '&company='+selectedVal)
}
Here is the fiddle to test it : https://jsfiddle.net/h23g6o3x/
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>
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>
So I have a page that has a dropdown list and form. And what I want to do is depending on the option selected in the dropdown list I want to hide and show different parts of the form.
<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>
So if Option_1 is selected then show input_1 and input_3, while hiding input_2
Plain JS
window.onload=function() {
document.getElementById("myselect").onchange=function() {
document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
}
document.getElementById("myselect").onchange(); //trigger
}
i managed to get your issue resolved by adding a 'value' attribute to your option tags:
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>
and using the jquery .change() event:
$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide();
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});
jsfiddle