jquery form plugin send/get disabled select value - javascript

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.

Related

Using a PHP input field to fill another [duplicate]

I am trying to call a javascript function from the onchange attribute of the select tag ! My issue is that I am passing the name attribute of the select to the function which always go null.
<body>
<form action="" method="post">
<select name="slct" id="name" onchange="rohan('measurement_conversion', '<?php echo isset($_POST["slct"])?$_POST["slct"]:"null" ?>')">
<option value="yes" selected="selected"> yes </option>
<option value="nopes"> nopes </option>
<option value="may be"> May be </option>
<option value="dont know"> dont know </option>
</select>
</form>
<div id="abc">
</div>
</body>
And here my javascript function
<script>
function rohan(var1, var2)
{
document.getElementById("abc").innerHTML=var1 + " " + var2;
}
</script>
It always prints null..
Any help will be appreciated !
HTML:
<body>
<form action="" method="post">
<select name="slct" id="name" onchange="rohan(this.value)">
<option>Select</option>
<option value="yes" selected="selected"> yes </option>
<option value="nopes"> nopes </option>
<option value="may be"> May be </option>
<option value="dont know"> dont know </option>
</select>
</form>
</body>
JS:
<script>
function rohan(value)
{
//you can get the value from arguments itself
alert(value);
}
</script>
PHP is run on the server before JavaScript is ever run in the browser. It doesn't get re-evaluated when the user changes the selected item.
No put in tag HTML attribute javascript, onchange is better in the script:
<script>
var b=document.getElementById('name');
b.onchange=function (){
var a=document.getElementById('name').value;
console.log(a);
}
</script>

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>

save previous value from posted select

I am having problem passing two select to $_POST
i have two select and when i post from the first the value is not been saved ,so when i post from the second select doesn't remember the first select value ,I want to pass the first select and save the value to select.
<form method="post" action="index.php">
<select id="city" name="city" class="styled-select">
<option value="all" selected="selected">all</option>
<option value="Van">Vancouver</option>
<option value="vic">Victoria</option>
</form>
<form method="post" action="index.php">
<select id="dept" name="dept" class="styled-select">
<option value="all" selected="selected">all</option>
<option value="1">First</option>
<option value="2">Second</option>
</form>
and i am using jquery to submit the form in change
when first form submitted select does not save the value of the selected option
$(document).ready(function() {
$('#city').change(function() {
$(this).find("option[selected='true']").removeAttr('selected');
$(this).find('option:selected').attr('selected', 'true');
this.form.submit();
});
$('#dept').change(function() {
$(this).find("option[selected='true']").removeAttr('selected');
$(this).find('option:selected').attr('selected', 'true');
this.form.submit();
});
});
I noticed you were missing some commas and that you didn't pass any data. Try this instead.
$("#city").change(function()
{
var selected = $("#city").find(':selected').val();
$.ajax({
url: "index.php",
type: 'POST',
data: {
"city": selected
},
success: function(data) {
console.log("success");
}
});
});
Also, you should be able to get the value of a select via val() e.g. $("#city").val().
For normal submit:
<form method="post" action="index.php">
<select id="city" name="city" class="styled-select">
<option value="all" <?php echo $_POST['city']==="all" ? "selected" : "" ?>>all</option>
<option value="Van" <?php echo $_POST['city']==="Van" ? "selected" : "" ?>>Vancouver</option>
<option value="vic" <?php echo $_POST['city']==="vic" ? "selected" : "" ?>>Victoria</option>
</form>

submitting a HTML form using JavaScript

i want to have a button to submit a form, but it doesnt seem to work. when the button is clicked, nothing happens.
HTML
<form method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
JavaScript
function FormSubmit() {
document.getElementById("taskOption").submit();
}
PHP
<?php
$option = isset($_POST['taskOption2']) ? $_POST['taskOption2'] : false;
if ($option) {
header("Location: $option");
}
else {
echo "Venligst velg en side.";
exit;
}
?>
Your function is wrong.
document.getElementById("taskOption").submit();// this is wrong
taskOption it is the id of select box not your forms
<form name="F1">// give a name to your form
.....
</form>
function FormSubmit() {
document.F1.submit();
}
or
<form id="formid">// give a id to your form
.....
</form>
function FormSubmit() {
document.getElementById('formid').submit();
}
You must write id of Form, like instead of below:
<form method="post" action="process.php" id="taskOption2">
<select name="taskOption" >
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
Use:
Javascript:
function FormSubmit() {
document.taskform.submit();
}
HTML:
<form method="post" name="taskform" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
first you gave a name to form here form1 is name
then onclick you call the form
<form method="post" name="form1" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
function FormSubmit() {
document.form1.submit();
}
Seems to me you just want a submit button in a form:
In that case, by far the easiest solution is move the <button> to inside the form tags, and make its type="submit". There's no Javascript required at all:
<form method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
<button type="submit" class="button button1 button1:hover">Take me there</button>
</form>
Try this
function submitMyForm()
{
alert("Test");
document.getElementById("myForm").submit();
}
<form id="myform" method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="submitMyForm()">The time is?</button>
It will not work because you forgot to add the id in the form and you are calling submit function on a form with id taskOption.
<form method="post" action="process.php">
there is no id in the form tag, add the id as:
<form method="post" action="process.php" id="taskOption">
You have wrong call submit , only form id or element can use submit() . So call form element first
function FormSubmit() {
document.getElementById("taskOption2").parentNode.submit(); //must call id not name (parentNode is getting for parent form element)
}
In your php you have wrong access with select id ,the correct thing is access by element name
$option = isset($_POST['taskOption']) ? $_POST['taskOption'] : false; //element name is valid call

How to prevent form submission if there is not any option selected from dropdown

I am using Rails 4 and in my app I have one form where I am passing form action via dropdown box. Now I want if there is not any option selected then form should not be submitted.
below is my code
= form_for #store, {:url => remove_multiple_store_path} do |f|
= f.select(:name, [['Delete', 'delete'], ['Change Status', 'changestatus']],{:include_blank=> 'Select Action'})
..........
..........
..........
= f.submit 'Submit'
I am getting in browser
<form method="post" action="/remove_multiple_store" accept-charset="UTF-8">
....
......
<select id="store_name" class="select1" name="store[name]">
<option value="">Select Action</option>
<option value="delete">Delete</option>
<option value="changestatus">Change Status</option>
</select>
</div>
<input type="submit" value="Submit" name="commit">
I wish if there is not any option selected or Select Action is selected then form should not be submitted.
For this I have searched but everything is I am getting as result its for PHP and I don't know ajax. So its very difficult for me to understand
If you need more details then just inform me I will post...
Can any one please help me... thanks in advance :)
Got the solution
Fiddle
$("#frm").submit(function(event){
// var valDDL = $(this).val();
//event.preventDefault();
var valDDL = $("#store_name").val();
if(valDDL=="")
{
event.preventDefault();
alert("select dropdown option");
}
});
HTML
<form method="post" id="frm">
<select id="store_name" class="select1" name="store[name]">
<option value="">Select Action</option>
<option value="delete">Delete</option>
<option value="changestatus">Change Status</option>
</select>
<input type="submit" value="Submit" name="commit"/>
</form>

Categories