I want to get the dropdown value based on class name
<select name="changeStatus" class="changeStatus1" id="changeStatus1" onChange="business_type('1')">
Because of some reason i don't want to get the value through the name($_POST['changeStatus'];).
I want to get through class name.
Here is how I would do it, add a hidden input field and when the form is submit, modify the value of the hidden input field.
<form id="myForm">
<input type="hidden" name="hidden_input" id="hidden_input">
</form>
jQuery
$('#myForm').on('submit', function(){
$('#hidden_input').val($('#changeStatus1').attr('class'));
});
Then on the backend, you can get the class of the posted input (PHP for example)
$className = $_POST['hidden_input'];
switch($className){
// do Stuff...
}
Related
Is there a way to get submitted form's attribute value using PHP, when the submit button is clicked?
I have a form which has attribute data-id: someid, I need to get this value.
There is no direct way to get the data attribute value in PHP.
You have to first get data-attribute, set this value to hidden field and then use PHP to get it.
If You Wants Data id on submit
$(document).ready(function(){
$('#formid').on('submit', function(){
var id = $(this).data("id")
alert(id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" name="myformName" id="formid" data-id="someid">
<input type="submit" name="submit">
</form>
You can achieve this in php with two ways:
1. Either pass your 'someid' in input with hidden type
<input type="hidden" name="data-id" value="someid" />
2. Just pass your 'someid' in action attribute
<form name="" action="filename.php?data-id=someid">
I want to ask how i can get value of input ONLY ON SUBMIT in Javascript from HTML form when i have many forms with same name on one page.
It's looking like this:
First printed HTML form:
<div id="addCommentContainer3">
<form class="add-comment-form" id="addCommentForm3" method="post" action="">
<input type="hidden" value="3" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
Second printed:
<div id="addCommentContainer2">
<form class="add-comment-form" id="addCommentForm2" method="post" action="">
<input type="hidden" value="2" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
And like this there are many more .
I must take the value of comentonpost because i need it in my Javascript so when i post comment it wil appear before addCommentContainer of the submited form.
And there is the whole Javascript:
$(document).ready(function(){
var name_element = document.getElementById('comentonpost');
var x = name_element.value;
/* The following code is executed once the DOM is loaded */
/* This flag will prevent multiple comment submits: */
var working = false;
/* Listening for the submit event of the form: */
$('#addCommentForm'+x).submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
$('#submit').val('Working..');
$('span.error').remove();
/* Sending the form fileds to submit.php: */
$.post('comment.submit.php',$(this).serialize(),function(msg){
working = false;
$('#submit').val('Submit');
/*
/ If the insert was successful, add the comment
/ below the last one on the page with a slideDown effect
/*/
$(msg.html).hide().insertBefore('#addCommentContainer'+x).slideDown();
},'json');
});
});
And in this way when i press the Submit button it's working only for the first form printed in the page.
My question is how i can fix this? How i can make it get the comentonpost value only of the submited form not the first printed, is there any better way this script may work?
Thanks in advance!
This will do what you need:
$(document).ready(function(){
/* Watch OnSubmit for all forms */
$('form').submit(function(e){
e.preventDefault();
/* Show the 'commentonpost' for the submitted form */
alert($(this).children('#comentonpost').val());
});
});
This works, but you should keep in mind that your document is not valid because you have elements that have the same IDs. IDs must be unique within a document for it to be valid.
You may only need to change this part:
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
/* This flag will prevent multiple comment submits: */
var working = false;
/* Listening for the submit event on all the forms: */
$('form[id^=addCommentForm]').on('submit', (function(e) {
var submitted_form = $(this);
//etc...
when you use jquery to select an ID, it will return 0 or one elements that match, and it will match the first one it finds. from http://api.jquery.com/id-selector/
Calling jQuery() (or $()) with an id selector as its argument will
return a jQuery object containing a collection of either zero or one
DOM element.
whenever you use $("#submit") its parsing through the DOM and finding the first instance of <input type="submit" id="submit" value="Submit" /> and returning that element. what you really want to do in your to scope your search down. you know you want the input from the form that was submitted, so you should try
$(this).find("#submit")
this will start at the form element, and search only elements contained inside the form for the first element with an ID of submit.
update
didnt realize your event was only tied to the first form, this whole things needs some work.
you've got a generic form template, and when you've got multiple forms like this, you really shouldnt be giving them all the same ID. instead, start binding event handlers to classes, and use the dom to store whether a form is 'working' or not as well
http://jsfiddle.net/neKdz/3/
I would suggest something like this
$(document).ready(function(){
$(".add-comment-form").submit(function(e){
var x = $(this).find("#comentonpost").eq(0).val();
// now you have number x of submitted form and you can do the rest
});
});
Edit:
To prevent page reloading because of form submission, add onSubmit="return false;" on form elements, e.g.:
<form class="add-comment-form" id="addCommentForm3" method="post" action="" onSubmit="return false;" >
But because of this we have to follow another approach using click event:
$(document).ready(function(){
$("#submit").click(function(e){
var x = $(this).parent(".add-comment-form").eq(0).find("#comentonpost").eq(0).val();
// now you have number x of submitted form and you can do the rest
});
});
Combination of click event and cancelling submit event should work. But just for the record (you should already know this, but I can imagine you might have a reason for doing it) using same id on multiple html elements is not a good strategy.
I have a hidden field in form. On form submit I call a database function to add the inputs to database and return result of query. I wish to set the value returned to hidden field. But when I am not able to assign a value to it
<form name="frmAddBook" id="frmAddBook" method="post">
<input type="hidden" name="actionResult" id="actionResult">
PHP
echo '
<script type="text/javascript">
alert("hello");
document.getElementById("actionResult").value=1;
alert("2222222");
alert(document.frmAddBook.getElementById("actionResult").value);
</script>';
you need to specify the value of that hidden input field, so if you wanted to do this in PHP it'd look like this:
<input type="hidden" name="actionResult" id="actionResult" value="<?php echo $result; ?>"/>
I have a form with lots of boxes. I want to add a field of checkbox as the values come from a php file via Ajax call. How to handle a form within another form?
<form action="result.php" method="post">
<input ...
-------Inner form (imaginary form to perform Ajax call)
TYPE YOUR COUNTRY AND POPULATE CITY
(here user types a country and we populate cities from city.php?q=typed-country.
City will return by the output of city.php file. In other words, output of
city.php is exactly list of cities, which can be formatted with required
CHECKBOX codes)
List of cities as CHECKBOX; e.g.
<input type="checkbox" name="city" value="city1" />
<input type="checkbox" name="city" value="city2" />
<input type="checkbox" name="city" value="city3" />
--------
<input type="submit" value="Submit" />
</form>
There are example of two select field for capturing cities for selected country; but here I need TYPE INPUT for country and CHECKBOX for resulting cities.
var ajax = new XMLHttpRequest();
ajax.open('GET','cities.php?q='+document.getElementById('country').value,true);
ajax.send();
citiesList = new Array();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
citiesList = ajax.responseText.split(',');
}
}
for(var i=0;i<citiesList.length;i++){
document.getElementById('citiesListContainer').innerHTML+='<input type="checkbox" value="'+citiesList[i]+'" /> '+citiesList[i]+'<br>';
}
Use the above code where your query returns a list of cities, with each city being separated by a comma. In your HTML, you have a div, with the id citiesListContainer.
You could also use the appendChild method to add each individual checkbox, but mine is the lazy man's answer.
Demo
You can't have a form inside of a form. You can make the entire form submit (and just use necessary data) or separate the two forms.
use .change on the country
$("#country").change(function () {
$("select option:selected").each(function () {
var value = $(this).value()
ajax to your php, return info you need
modify/build your city information
});
})
that would example would be for a select box, however the principle of using .change would be the same for any type, though you wouldn't need the select option:selected.each bit
I want to email the value of the slider along with some things they entered into my form to my php email script. This is how the form looks that will pass data to the POST method of mailer.php:
<form method="POST" action="mailer.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<input type="hidden" name="slider_value" size="19" value=document.getElementById('sliderValue').value><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
document.getElementById('sliderValue').value is the call I make to get the value of the slider but when I pass this to the value of my hidden input slider_value I get back "document.getElementById('sliderValue').value" in the email that is sent by my php script. How would I pass the value instead?
document.getElementById is a Javascript function. It probably won't do what you want it to unless you put it in a place where Javascript is accepted.
One way to pass the slider value is by putting the sliderValue element in the form that you are submitting.
If that is not an option, you can set the value of the slider_value element with Javascript. Either set an onsubmit attribute to the form like this:
<form method="POST" action="mailer.php"
onsubmit="this.slider_value.value = document.getElementById('sliderValue').value">
or add an event listener to do it:
var form = document.forms[0]; //this may need to be changed depending on your form
function addSliderValue() {
this.slider_value.value = document.getElementById('sliderValue').value;
}
if (form.addEventListener) { //most browsers
form.addEventListener("submit", addSliderValue, false);
} else if (form.attachEvent) { //IE
form.onsubmit = addSliderValue;
}
Bind a function to the sliders "onSlide/onChange/whatever it's called" event that will update the hidden input field with the slider value. Also set the input value to the initial slider value on slider init. That should do the trick.