We Keep Coding

Change Button Name="" and Form Action based on Select Option in Jquery

Hi I have form which contains three search criteria.
These search criteria are jobs, resume, recruitment consultant.
Based on the drop down, fields are updated accordingly.
Based on the select value I want to change the action on the form, and name of the submit button. Problem is putting values with hyphen in option select makes jquery not work.
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment Consultant">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Change the form action as per following
action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"
And the button name (NOT VALUE OR TEXT) as per following
name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"
I put these in option values accordingly
search-recruitment-consultant-results?
search-resume-results?
search-job-results?
and then used
<select name="search_for" onchange="this.form.action=this.value;">
but putting hyphen in option values makes the jquery show/hide not work

Try this code, see i have use hyphen in option and it works properly.
<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment-Consultant">Recruitment Consultants</option>
</form>
<script>
$(document).ready(function() {
$("#search_for").change(function(){
if($(this).val()=='Jobs')
{
$("#form").attr("action",'search-job-results?');
$("#search_submit").attr('name',"searchjobbutton");
}
else if($(this).val()=='Resume'){
$("#form").attr("action",'search-resume-results?');
$("#search_submit").attr('name',"searchresumebutton");
}
else if($(this).val()=='Recruitment-Consultant'){
$("#form").attr("action",'search-recruitment-consultant-results?');
$("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
}
});
});
</script>

i think this will help you
add id for your form 'formId'
$(document).ready(function(){
$('#search_for').change(function(){
var cur = $(this);
var search = cur.val();
if(search == 'job'){
$('#formId').attr('action', 'search-job-results?');
$("search_submit").attr('name', 'searchjobbutton');
} else if(search == 'Resume'){
$('#formId').attr('action', 'search-resume-results?');
$("search_submit").attr('name', 'searchresumebutton');
}else if(search == 'Recruitment Consultant'){
$('#formId').attr('action', 'search-recruitment-consultant-results?');
$("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
}
});
});

try this
Add data attribute with button name
only you need to add - onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));" in the select
and data-name="" in the option
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

Instead of writing multiple forms, just write one and use .change() and data-* attribute which is used to create custom tags. Store the button names inside <option data-name="button name"> then you can access this value with on change.
The data-* attributes is used to store custom data private to the page or application.
.change()
Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#search_for').on('change', function () {
$('form[name="search"]').attr('action', $(this).val()).find(':submit').attr('name', $(this).find(':selected').data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option data-name="searchjobbutton" value="search-job-results?">Jobs</option>
<option data-name="searchresumebutton" value="search-resume-results?">Resumes</option>
<option data-name="searchrecruitmentconsultantbutton" value="search-recruitment-consultant-results?">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

how do i redirect based on selection in jsp?

My form is :
<div>
<form name="redirect">
<select name="selection">
<option value="">--------service--------</option>
<option value="plumber.jsp">PLUMBER</option>
<option value="electrician.jsp">ELECTRICIAN</option>
<option value="carpenter.jsp">CARPENTER</option>
</select>
<select name="locality">
<option value="">--------select--------</option>
<option value="KOMMADI">KOMMADI</option>
<option value="MVP">MVP</option>
<option value="RTC">RTC</option>
</select>
<input type=submit value="Go!" onClick="WinOpen();">
</form>
and the javascript is
<script language="javascript">
function WinOpen() {
var url = document.redirect.selection.value;
document.location.href = url;
response.sendRedirect(url);
}
</script>
The above code is not working for me. The page just refreshes instead of redirecting. I want to redirect to page based on the selection value and also send the locality parameter to the other page.

Change your javascript like this.It will assign value of selection to the action attribute of form.
<script language="javascript">
function WinOpen()
{
document.redirect.action = document.redirect.selection.value;
document.redirect.submit();
}
</script>
It should work.
One more thing,you can access your locality paramter on the destination jsp by
String locality=request.getParameter("locality");

Get form values to create a custom URL

I have the following form:
<form>
<div>Adults</div>
<div>
<select name="adults">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Children</div>
<div>
<select name="children">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Check-in date</div>
<div>
<input name="date_from" value="16-04-2015" type="text"></div>
</div>
<div>
<div>Check-out date</div>
<div><input name="date_to" value="17-04-2015" type="text"></div>
</div>
<div>
<input value="Check Availability" type="submit">
</div>
</form>
Now I want to call a javascript function on above form submit. This function will get all form elements values and create the following URL to redirect.
online-reservation.html#!/Rooms/date_from:16-04-2015/date_to:17-04-2015/adults:1/children:0
How can I create this JS function?
Thanks.

How about the following:
# Serialize the data like we want it
function serialize (form) {
return [].slice.call(form.querySelectorAll('[name]'))
.reduce(function (carry, input) {
return carry + '/' + input.name + ':' + encodeURIComponent(input.value);
}, '');
}
function submitHandler (e) {
e.preventDefault();
window.location = '/online-reservation.html#!' + serialize(e.target)
}
# Bind handler to form submit
document.querySelector('form')
.addEventListener('submit', submitHandler);

Here's a fiddle that will give you exactly what you asked for: http://jsfiddle.net/9Le00jtw/
$("#formone").submit( function() {
document.location.assign( "http://onlinereservation.html#!" + "/" + $("input[name=date_from]").val() + "/" + $("input[name=date_to]").val() + "/adults:" + $("select[name=adults]").val() + "/children:" + $("select[name=children]").val() );
return false;
});
Here's a fiddle for the way that I would do it: http://jsfiddle.net/xLmsb1xo/1/
Now I realize that you want to use the backslash character to separate each value, however, probably the easiest way and, indeed, the most common/standard way is to use the syntax "?variable=", that's why this code is modeled after that. It makes it much easier to parse out variables from the url. You'll notice in the code that i set it up to display as a simple alert() message. In order to link to the page instead of alerting, you would replace alert() with document.location.assign()
JavaScript:
window.onload = function() {
$("#formone").submit( function() {
/* when user hits the submit button do following */
alert( window.location.href + "?datefrom=" + $("input[name=date_from]").val() + "?dateto=" + $("input[name=date_to]").val() + "?adults=" + $("select[name=adults]").val() + "?children=" + $("select[name=children]").val() );
*/get the window location and add "?variable=" then the value of
the input or select box for that variable a.e. ?dateto=04-17-2015 */
return false;
});
}
In the above code we get the location of the current window using window.location.href and then we append the variables to it, with a variable name and then the value of the appropriate input/select boxes using their name attributes. The selector syntax is tagname[attr=text] - so if we're trying to find an input box with the name bingo, we would use this selector in jQuery $("input[name=bingo]") and if we were looking for a selection box with the name banana we would do use this selector $("select[name=banana]")
HTML:
<form method="POST" id="formone">
<!-- we added the method="POST" so that the browser knows what to do with
the form when the submit button is tapped and the id so that we can identify
it -->
<div>Adults</div>
<div>
<select name="adults">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Children</div>
<div>
<select name="children">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Check-in date</div>
<div>
<input name="date_from" value="16-04-2015" type="text"></div>
</div>
<div>
<div>Check-out date</div>
<div><input name="date_to" value="17-04-2015" type="text"></div>
</div>
<div>
<input value="Check Availability" type="submit">
</div>
</form>
EDIT: I added "return false;" to the submit() function. The reason why is because we need to tell the form to stop trying to submit and to process the script as is, this will allow a redirect.

This is a string manipulation problem. Your function needs to output a string with the desired fields, yes?
If you have jQuery, you can extract the values from your fields like so:
var adult = $('.select[name=adults]').val();
var date_from = $('.input[name=date_from]').val();
etc...
Then you can add the strings together in your function and return the output.

You don't usually use form for redirect.
But you can create function, which collects data from form fields. It must iterate selects' and inputs' tags of form and generate key value strings, some sort of date_from:16-04-2015. After that you should join this strings with /. As a result you will have right side of url so you can combine it with static piece of url. In your case static piece will be online-reservation.html#!/Rooms/.
Now you can call document.location.href = <here your generated url> to change your location. At the same time if your function is form submission event handler you should remember to prevent default form submission event.
You can find working solution here

Change form action based on drop down selection

Need form to change it's action depending on the selection from a specific drop down menu.
On change should trigger the script and change the action before user submits. Easier said than done when you're new to JS.. thanks for any help!
Javascript:
<script type="application/javascript">
function chgAction(form1){
if( recipient=="jordachedotcom_Advertising" )
{document.form1.action = "/adv_contact.php";}
else if( recipient=="dept_Public_Relations" )
{document.form1.action = "/pr_contact.php";}
else if( recipient=="dept_Manufacturing" )
{document.form1.action = "/manuf_contact.php";}
else if( recipient=="dept_Brands" )
{document.form1.action = "/brands_contact.php";}
else if( recipient=="dept_Holdings" )
{document.form1.action = "/holdings_contact.php";}
else if( recipient=="dept_Vendor_Inquiry" )
{document.form1.action = "/vend_contact.php";}
else if( recipient=="dept_Other_Inquiry" )
{document.form1.action = "/misc_contact.php";}
}
</script>
FORM HTML:
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>

Your code is missing the part to get the selected item from the selectbox.
document.form1.recipient.selectedIndex
The rest should be ok and i have created a Fiddle

I'm guessing as to your full intent, but I think that the best way to accomplish what you're doing here would be via php on the server side. Have the form direct to one particular page and then using your server-side language redirect to the proper url. For example, if you're using php do something like this:
client-side (html)
(note how the action property of the form is one fixed location)
<form id="form1" name="form1" method="post" action="./form-handler.php">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
<select>
<input type="submit">
</form>
No javascript required!
server-side (php)
form-hander.php:
<?php
$recipient = $_POST['recipient'];
//Based on the value of the $recipient value redirect to the correct page
//using the header function
switch($recipient) {
case 'dept_Manufacturing':
header('Location: ./manuf_contact.php'); exit;
case 'dept_Brands':
header('Location: ./brands_contact.php'); exit;
case 'dept_Holdings':
header('Location: ./holdings_contact.php'); exit;
//... etc, etc
}

On your on change function, you can obtain your currently selected element using:-
var currentValue = $("#recipient option:selected").val();
And then apply these if checks as you specified on this currentValue var as shown below:-
if(currentValue == "dept_advertising"){
$("#form1").attr("action",customURL);
}

Try this
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option data-action="/adv_contact.php" value="dept_Advertising">Advertising</option>
<option data-action="/pr_contact.php" value="dept_Public_Relations">Public Relations</option>
<option data-action="/manuf_contact.php" value="dept_Manufacturing">Manufacturing</option>
<option data-action="/brands_contact.php" value="dept_Brands">Brands</option>
<option data-action="/holdings_contact.php" value="dept_Holdings">Holdings</option>
<option data-action="/vend_contact.php" value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option data-action="/misc_contact.php" value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
<script>
function chgAction(){
$('#form1').attr({'action':$('option:selected').attr('data-action')});
$('#form1').submit();
}
</script>

You could also just use the actual form action URLs as the option values and use a simple one line onchange attribute without any additional JS:
<form method="post" name="form1">
<select id="form_action" name="form_action" onchange="document.form1.action = this.value;">
<option value="https://url1.com">URL1</option>
<option value="https://url2.com">URL2</option>
</select>
</form>
Tested and working in Firefox. May possibly benefit from some measures to make it more cross-browser compatible.

Replace:
function chgAction(form1){...}
in
chgAction = function(form1) {....}
Code will work but it is not the ultimate dream. Better to use something like that:
(function(){
var form = document.querySelector('#form1'),
select = form.querySelector('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.addEventListener('change', function () {
var el = this, value = el.value;
if (action[value]) {
form.action = action[value];
}
}, false);}());
Like jQuery:
(function($){
var form = $('#form1'),
select = $('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.on('change', function () {
var el = $(this), value = el.val();
if (action[value]) {
form.attr('action', action[value]);
}
});}(jQuery));

jquery form plugin send/get disabled select value

I use the Jquery_Form plugin and i would like to get the value of disabled select box.
HTML form :
<form id="myform" method="post">
<select name="myselect" id="myselect">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="submit" value="send">
</form>
Javascript :
<script>
$('#myselect').val('2').attr('disabled', true);
$(document).ready(function() {
var options = {
target: '#response',
};
$('#myform').ajaxForm(options);
});
</script>
PHP :
if (isset($_POST['myselect']))
echo $_POST['myselect'];
else
echo "Oups nothing :(";
I always "get Oups nothing"

The value of a disabled input/select box is not transmitted. How about disabling all non-selected values instead?
$('#myselect option:not(:selected)').prop('disabled', true);

is method not methode (see the form) soo is not $_POST is Anything
<form id="myform" methode="post"> //NO
<form id="myform" method="post"> //YES

Finaly i think that i have to put a hidden input that contain the value.
example :
<select name="myselect" id="myselect" disabled>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="hidden" name="myselect" value="2">
Or just remove "disabled" before sending :
$('form').bind('submit', function() {
$(this).find(':disabled').removeAttr('disabled');
});

If you want to get a value from a particular selectList's item, can you try with:
$('#myselect option:contains(1)').val();
Cheers.