well today I want to learn how to grab multiple input type button value compare to original value and last submit to php script! How can I do that with Jquery?
<html>
<body>
<div id="leftDiv" class="container">
<form action="" method="get">
<fieldset>
<p>Something 0</p>
<lable>Yes</label>
<input type="radio" name="Group0" value="1" >
<lable>No</label>
<input type="radio" name="Group0" value="0" >
</fieldset>
<fieldset>
<p>Something 1</p>
<lable>Yes</label>
<input type="radio" name="Group1" value="1" >
<lable>No</label>
<input type="radio" name="Group1" value="0" >
</fieldset>
<fieldset>
<p>Something 2</p>
<lable>Yes</label>
<input type="radio" name="Group2" value="1" >
<lable>No</label>
<input type="radio" name="Group2" value="0" >
</fieldset>
<fieldset>
<input type="submit" name="update" class="button" value="Submit">
</fieldset>
</form>
</div>
</body>
</html>
the above values are generated by php script (can be 1 or 100)
the easiest method is actually to set the correct values as selected in the HTML and tie a .onChange event to them. otherwise, have a hidden field with the original value, and onChange compare them like this
//a hidden input field with the original value
<input type='hidden' id='Group0' value='0'/>
// a set of radio fields that reference the original field we will be comparing with in their 'rel' attribute for easy jQuery selection
Off<input type='radio' name='Group0' rel='#Group0' class='compareOnChane' value=0/><br/>
On <input type='radio' name='Group0' rel='#Group0' class='compareOnChane' value=1/>
<script>
$(document).ready(function(){
$('.compareOnChange').live('change',function(){
if($($(this).attr('rel')).val()!=$(this).val(){
//the value currently is different than the original value, fire our action
}
});
});
</script>
This is a pretty good tutorial that will teach you the basics of this:
http://trevordavis.net/blog/ajax-forms-with-jquery
You can get the values of the radio buttons in a JSON like so:
var radios = {};
$('input[type="radio"]').each(function() {
radios[$(this).attr('name')] = $(this).attr('value');
});
Related
<form id="test" method="post" action="getValue.php">
<input type="submit" name="sample" value="A" customizedValue1="1" customizedValue2="X"/>
<input type="submit" name="sample" value="B" customizedValue1="2" customizedValue2="Y"/>
</form>
I want to know how to get the value of customized attributes of between several radio buttons like example above by using php.
How can i get the value of customizedValue1 and customizedValue2 in php?
Thanks
You can't access directly from PHP to this values, you need to pass them as AJAX POST values to the PHP file like this:
FORM
<form id="test" method="post" action="getValue.php">
<input type="radio" name="sample" value="A" customizedValue1="1" customizedValue2="X"/>
<input type="radio" name="sample" value="B" customizedValue1="2" customizedValue2="Y"/>
<button type="submit"> Submit </button>
</form>
JS
$('#test').on('submit',function(){
var customizedValue1 = $('#test input[name=sample]:checked').attr('customizedValue1');
$.post('getValue.php',{'customizedValue1':customizedValue1});
});
On getValue.php you can access to the value:
echo $_REQUEST['customizedValue1'];
If they are connected to eachother somehow. You can also use the values as an array in html form
<form id="test" method="post" action="getValue.php">
<input type="text" name="data[A][customizedValue1]" value="value1" />
<input type="text" name="data[A][customizedValue2]" value="value2" />
<input type="submit" name="submit" value="Submit" />
</form>
<?php
if(isset($_POST['submit'])){
$customizedValue1 = $_POST['data']['A']['customizedValue1'];
$customizedValue2 = $_POST['data']['A']['customizedValue2'];
echo $customizedValue1;
echo $customizedValue2;
}
?>
Is there a way to send exactly same variables to another page different from action of the form? I tried this structure but the second submit button did not work;
<form name="2" action="page2" method="post" >
<form name="1" action="page1" method="post" >
<input type="radio" name="radio" value="value1" >
<input type="radio" name="radio" value="value2" >
<input type="radio" name="radio" value="value3" >
<input type="submit" value="Submit1">
</form>
<input type="submit" value="Submit2">
</form>
The form 1 shows the information of inputs on the page1 and updates database also.
I want form 2 to show the information of inputs on the page2 only (no update of database).
Is that possible?
You cannot have form inside another form , change your code like this.
<form name="2" action="page2" method="post" >
<input type="radio" name="radio" value="value1" >
<input type="radio" name="radio" value="value2" >
<input type="radio" name="radio" value="value3" >
<input type="submit" value="Submit1" name="submit1">
<input type="submit" value="Submit2" name="submit2">
</form>
Give different name for each submit button.
in php
if(isset($_POST['submit1'])){
// submit1 is pressed
}
if(isset($_POST['submit1'])){
// submit2 is pressed
}
Changing action dynamically.
add class to submit buttons say, class="submit". ANd add id to form say id="my-form"
$(".submit").change(function() {
var action = $(this).val() == "submit1" ? "submit1.php : "submit2.php";
$("#my-form").attr("action", action);
});
Why not alert 0 and 1 and 0 and 1 when press submit button on this function ?
When press submit, it's will alert 1,1, null , null.
Why not alert null,1,null,1 ?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<?PHP
include("connect.php");
?>
<?php
if(isset($_POST["submit"]))
{
for($i=0;$i<count($_POST["a_text"]);$i++)
{
$a_check = mysql_real_escape_string($_POST['a_check'][$i]);
?>
<script>
alert("<?PHP echo $a_check; ?>");//
</script>
<?PHP
}
}
?>
<form name="f_name" method="post" action="">
<input name="a_text[]" type="text">
<input name="a_check[]" type="checkbox" value="1">
<br>
<input name="a_text[]" type="text">
<input name="a_check[]" type="checkbox" value="1" checked >
<br>
<input name="a_text[]" type="text">
<input name="a_check[]" type="checkbox" value="1">
<br>
<input name="a_text[]" type="text">
<input name="a_check[]" type="checkbox" value="1" checked >
<br>
<input type="submit" name="submit" value="OK"/>
</form>
When you post array of checkbox then it only post Selected checkbox. So, In your case first
and third not selected and second and fourth is selected that's why it return null,1,null,1
If you are select second and fourth checkbox then it will post checkbox like as follow
a_check = [null,1,null,1];
You want to access all four checkBox through loop actually which is not posted If you are not checked.
<?php
echo $_POST['textvalue'];
echo $_post['radiovalue'];
?>
<div id="hidethis">
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</div>
http://jsfiddle.net/Bjk89/2/ here is it with the jQuery.
What i try to do is to hide the <div id="hidethis"> when it's clicking submit.
I know i can make another page where i can recieve the values without the <form> section, but i want to put both in one page, make the <div id="hidethis"> hidden after submit.
So i'll be able to get echo $_POST['textvalue']; and echo $_post['radiovalue']; as results
RESULT MUST BE LIKE
A Text // This is the value you input into Tekst Value
autogivevalue // This is the value from the radio button
----- INVISIBLE -----
<form is hidden because we set it in jQuery so>
</form>
Try this. No need to use jQuery here.
<?php
if($_POST) {
echo $_POST['textvalue'];
echo $_post['radiovalue'];
} else {
?>
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</form>
<?php
}
?>
Try adding '#' in your jquery code. Your version does not have # next to submit. Also your form is missing a closing tag here and in your JSFiddle code.
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submit').click(function () {
$('form').submit();
$('#hidethis').hide();
});
});
</script>
<form method='post' id="hidethis" name='form'>
<input type="text" name="textvalue">
<input type="radio" name="radiovalue" value="1">
<input type="button" id="submit" name="submit" value="submit">
</form>
<form action="here.php" method="POST">
<input type="text" name="text">
<div id="one">
<input type="hidden" name="aaa" value="one">
<input type="submit" value="Send">
</div>
<div id="two">
<input type="hidden" name="aaa" value="two">
<input type="submit" value="Send">
</div>
</form>
Now if i click on Send of div ONE or div TWO i have always in $_POST['aaa'] = 'two';
Is possible make one form with two submit with different values?
If i click on div one submit i would like reveice $_POST['aaa'] = 'one' and if i click on div two submit i would like receive $_POST['aaa'] = 'two'.
How can i make it?
I can use for this PHP and jQuery.
EDIT:
I dont want create two form - i dont want showing two many times <input type="text" name="text">
EDIT: maybe i can instead button submit ? but how?
It seems that what you actually want to do is have a value in each of the buttons, see this, for example:
<form action="demo_form.asp" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
You'd need two different forms:
<div id="one">
<form ...>
<input type="hidden" name="aaa" value="one">
<input type="submit" value="Send">
</form>
</div>
<div id="two">
<form ...>
<input ...>
<input ...>
</form>
</div>
Standard practice is that when two fields have the exact same name, to use only the LAST value encountered in the form and submit that.
PHP does have a special-case notation (name="aaa[]") to allow submitting multiple values with the same name, but that wouldn't help you here, as that'd submit ALL of the aaa values, not just the one closest to the submit button.
HTML form:
<form ...>
<input type="text" name="textfield">
<div id="one">
<input type="hidden" name="one_data" value="aaa" />
<input type="submit" name="submit_one" value="Submit" />
</div>
<div id="two">
<input type="hidden" name="two_data" value="bbb" />
<input type="submit" name="submit_two" value="Submit" />
</div>
</form>
server-side:
if (isset($_POST['submit_two'])) {
$data = $_POST['two_data'];
} else if (isset($_POST['submit_one'])) {
$data = $_POST['one_data'];
} else {
die("Invalid submission");
}
Instead of showing two submit button, you can show a radio list with two options and one submit button.
Try this:
in html-
<input id="PreviousButton" value="Previous" type="submit" />
<input id="NextButton" value="Next" type="submit" />
<input id="Button" name="btnSubmit" type="hidden" />
in jOuery-
$("#PreviousButton").click(function () {
$("#Button").val("Previous");
});
$("#NextButton").click(function () {
$("#Button").val("Next");
});
then you can see in the form results - what "Button" contains.