Submit GET form and another POST form with one button - javascript

I'm trying to submit a POST and a GET form with one submit button. I tried using the following php code:
echo "<html>\n<head>\n<title>Params</title>";
echo "<script type='text/javascript'>";
echo "function submitForms(){
document.getElementById('form1').submit();
document.getElementById('form2').submit();
}";
echo "</script>";
echo "</head>";
echo "<body>";
echo "<form action='' method='get' id='form1'>";
echo "<label>First Name </label>";
echo "<input type='text' name='first'><br/>";
echo "<label>Last Name </label>";
echo "<input type='text' name='last'><br/>";
echo "<label>Age </label>";
echo "<input type='text' name='age'><br/>";
echo "<label>Telephone </label>";
echo "<input type='text' name='phone'><br />";
echo "</form>";
echo "<form action='' method='post' id='form2'>";
echo "<label>Username </label>";
echo "<input type='text' name='username'>";
echo "<label>Password </label>";
echo "<input type='password' name='password'>";
echo "</form>";
echo "<input type='submit' value='Send' onclick='submitForms();'>";
echo "</body></html>";
What I get is only the POST params, while the GET request is not loading at all.
How can I fix this?
Thanks in advance.

You should take only one form all fields in that and after getting all input data after submit you can do whatever you want to do..
The way you are doing this is not possible reason being when form is submitted control goes to server to handle http request. hence only one form can be submit at a time. You can't submit two forms at once.. try changing order of form submit and other form will start submitting..

You should use AJAX (jQuery). Something like this should do the trick:
//Onclick for any button you wish to submit the forms
$('#form2 input[name="submit"]').click(function(e) {
e.preventDefault();
var formOne = $("#form1"),
formTwo = $("#form2");
//Post first form
$.post( formOne.attr('action') , formOne.serialize(), function() {
alert('Form one posted!');
});
//Post second form
$.post( formTwo.attr('action') , formTwo.serialize(), function() {
alert('Form two posted!');
});
});
Not tested yet, but this should work. More information for the $.post method can be found here.

Related

how to send selected html row data to PHP backend script

I have a PHP form as below. Once user selects a particular row/rows I need to send the corresponding data to my PHP backend script. Here the externalID is unique. I face two issues in my code
Currently I get the entire form data to my PHP backend script,I need to data corresponding to only the rows I selected.
I have two buttons in the page and how can I call different php scripts on click of the button. Currently the click of "send MTDATA" calls the php script in form action.
src code:
<form target="iframe_b" action="/php_src/first.php" method="POST"
echo "sending data">
<fieldset>
<br><br>
<input type="button" id="activate_device" name="activatedevice" value="Activate_device">
<input type="submit" value="SEND MTDATA">
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>External ID</th>
<th>Status</th>
</tr>
<?php
$dbhost = 'localhost:3036';
$dbuser = 'root';
$dbpass = 'xxxx';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ApplicationServer") or die(mysql_error());
// Get all the data from the "example" table
$result = mysql_query("SELECT EXTERNAL_ID,CONNECTION_STATUS FROM DEVICE_DETAILS") or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
$extID = $row['EXTERNAL_ID'];
$conStatus = $row['CONNECTION_STATUS'];
echo "</tr><tr>";
echo "</td><td>";
echo "<input type=\"checkbox\" class=\"case\" name=\"checkBox".$extID."\" />";
echo "</td><td>";
echo "<input type=\"text\" class=\"classextID\" value=\"$extID\" name=\"textExID".$extID."\" />";
echo "</td><td>";
echo "<input type=\"text\" class=\"classConnection\" value=\"$conStatus\" name=\"textcon".$extID."\" />";
}
?>
</table>
</fieldset>
</form>
output:
array(9) { ["checkBox123456#mydomain_com"]=> string(2) "on" ["textExID123456#mydomain_com"]=> string(19) "123456#mydomain.com" ["textcon123456#mydomain_com"]=> string(16) "request accepted" ["checkBox1234#mydomain_com"]=> string(2) "on" ["textExID1234#mydomain_com"]=> string(17) "1234#mydomain.com" ["textcon1234#mydomain_com"]=> string(16) "request accepted" ["checkBox53278#mydomain_com"]=> string(2) "on" ["textExID53278#mydomain_com"]=> string(18) "53278#mydomain.com" ["textcon53278#mydomain_com"]=> string(16) "request accepted" }
All html inputs - except unchecked checkboxes - are sent to the server so the only way to avoid that is to use javascript to remove the unselected rows from the form completely before the form is sent.
However, if the total amount of data is not the problem but you just want to be able to easily select the checked rows, you should use arrays in your html:
echo "<input type=\"checkbox\" class=\"case\" name=\"checkBox[".$extID."]\" />";
^ array ^
echo "</td><td>";
echo "<input type=\"text\" class=\"classextID\" value=\"$extID\" name=\"textExID[".$extID."]\" />";
echo "</td><td>";
echo "<input type=\"text\" class=\"classConnection\" value=\"$conStatus\" name=\"textcon[".$extID.]"\" />";
Now your $_POST['checkBox'], etc. variables will be arrays in php as well so you can easily loop over them as the key is your $extID value. And as I mentioned before, only the checked checkboxes are sent to the server:
// Loop over the sent-in / selected checkboxes
foreach (array_keys($_POST['checkBox']) as $key) {
var_dump($_POST['textExID'][$key]);
// etc.
}
Also note that your html is probably not valid as you are not closing the last row but I don't think that would be causing any problems with the form.
One way is to collect the input in an array.
<?php
echo "</tr><tr>";
echo "</td><td>";
echo "<input type='checkbox' class='case' name='$extID[ checkBox ]' />";
echo "</td><td>";
echo "<input type='text' class='classextID' value='$extID' name='$extID[ textExID ]' />";
echo "</td><td>";
echo "<input type='text' class='classConnection' value='$conStatus' name='$extID[ textcon ]' />";
?>
Then if you check the $_POST you will find an array within an array, loop the first array and collect the details for each $extID.
As for the two buttons, you could name the submit button and then check to see which has been pressed.
<input type="button" id="activate_device" name="activatedevice" value="Activate_device">
<input type="submit" value="SEND MTDATA" name="submit_button">
<?php
if( isset( $_POST[ 'submit_button' ] ) )
{
// Process submit
}
elseif( isset( $_POST[ 'activatedevice' ] ) )
{
// Process device
}

How to call javascript function reset() from PHP?

I am trying to call JavaScript reset() function by using button onclick method. The code is embedded in PHP as follows :
<?php
echo "<form>";
echo "<input type='text' name='keyword'>";
echo "<input type='button' value='Clear' onclick='<script>reset();</script>'>";
echo "</form>";
?>
The clear button is not working.
One solution would be to replace input button line with following:
echo "<input type='button' value='Clear' onclick='javascript:reset()'>";
try this:
<?php
echo "<form>";
echo "<input type='text' name='keyword'>";
echo "<input type='button' value='Clear' onclick='reset()'";
echo "</form>";
This should work - But i would try to get away from putting event handlers inline like this. Perhaps you could use jquery instead.
Below however is a 'Vanilla javascript" solution as you requested...
<?php
echo "
<form>
<input type='text' name='keyword'>
<input type='button' value='Clear' onclick='this.parentNode.reset()' >
</form>
";
?>
You can do this if you want :
<?php
echo "<form>";
echo "<input type='text' name='keyword'>";
echo " <input type='button' value='Clear' onclick='reset();'>";
echo "</form>";
?>
Another way to show HTML code in PHP :
Instead of using echo you can just put any HTML or Javascript code in side this ?> HTML | JAVASCRIPT CODE <?PHP
If you want to put PHP code inside that HTML code you can do the normal procedure which is this :
Example :
<?php
// Here it can be any PHP code
?>
<form>
<input type="hidden" name="<?php echo 'phpinsidehtml';?>"> //This is an example
<input type='text' name='keyword'>
<input type='button' value='Clear' onclick='reset();'>
</form>
<?php
?>

Getting form field values in php and then disabling it

i am using form in my page like this
<form method='post' action='' class='myform'>
<input type='text' name='name'>
<input type='text' name='email'>
<input class='btn' type='submit' name='submit' >
</form>
what i want i will get the values of form and then disable all its fields , now this is my code to disable all fields when form is submitted
$(document).on('click', '.btn', function(event) {
var currentForm = $(this).closest('form');
currentForm.find('input').prop('disabled', true);
});
and before this i'm trying to get values from $_POST like this
if(isset($_POST["submit"])){
$name= $_POST["name"];
$email= $_POST["email"];
}
but problem is that as i press submit button fields get disabled and i dont get any posted values , how do i get values first and then disable fields ?
Your mistake - You are disabling the input field by
currentForm.find('input').prop('disabled', true);
So when you submit the form, the field will be in disabled state and will not be posted.
Solution - please change the line to
currentForm.find('input').prop('readonly', true);
look this example or try with it....
if(isset($_POST["submit"]))
{
$name= $_POST["name"];
$email= $_POST["email"];
}
?>
<form method='post' action='' class='myform'>
<?php
if($name != '' && $email != '')
{
?>
<input type='hidden' name='name' value="<?php echo $name?>">
<input type='hidden' name='email' value="<?php echo $email?>">
<?php
}
?>
<input type='text' name="<?php echo ($name != ''?'hidden_name':'name')?>" <?php echo ($name != ''?'disabled':'')?> value="<?php echo $name?>">
<input type='text' name='<?php echo ($email != ''?'hidden_email':'email')?>' <?php echo ($email != ''?'disabled':'')?> value="<?php echo $email?>">
<input class='btn' type='submit' name='submit' >
</form>
You can use ajax for that like this:
$('.btn').bind('click', function() {
$.ajax({
url: "your page url here",
type: 'POST',
async:false,
success: function(response) {
$('input').prop('disabled', true);
}
});
});
you don't pass submit parameter to formdata, that's why you can't get it.
try this
<?php if(isset($_POST['name'])){ echo $_POST['name'] }?>

my SetTimeout is not auto submitting my button

I have a code like
<SCRIPT LANGUAGE="JavaScript">
setTimeout('document.test.submit()',1000);
</SCRIPT>
I follow the tutorials on how to do a settimeout function but it is not working with my php code.. my Whole code looks like this..
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<SCRIPT LANGUAGE="JavaScript">
setTimeout('document.test.submit()',1000);
</SCRIPT>
</head>
and my php looks like this..
echo "<form name=\"asd\" id=\"form1\" action=\"PostTest1.php\" method=\"post\" >";
echo "<tr><td>";
echo $row['Description'] . "<br>";
echo "<input type=\"radio\" name=\"Answer\" value=\"A\"> A.)" . $row['Ans1'];
echo "<br>";
echo "<input type=\"radio\" name=\"Answer\" value=\"B\"> B.)" . $row['Ans2'];
echo "<br>";
echo "<input type=\"radio\" name=\"Answer\" value=\"C\"> C.)" . $row['Ans3'];
echo "<br>";
echo "<input type=\"radio\" name=\"Answer\" value=\"D\"> D.)" . $row['Ans4'];
echo "<br>";
echo "<input type=\"submit\" value=\"submit\" name=\"submit\">";
echo "</td></tr>";
echo "</form>";
My button is not auto clicking.. Thank you for the advance help.. :)
(Sorry for my grammar)
Try this:
setTimeout(document.getElementById("form1").submit(),1000); alternatively, you could also do this: setTimeout(document.asd.submit(),1000); since you've named your form.
You need to find the correct element to submit, document.test is not valid in your supplied scenario.
EDIT: You need to remove the name attribute from your submit button as when you call .submit() it is finding that element, rather than submitting the form like you'd expect.
Fiddle: http://jsfiddle.net/KyleMuir/yKG3U/
setTimeout needs a function to call and the timeout.
you can do:
setTimeout(my_func(), 1000);
function my_func(){
document.getElementById("id_form").submit();
}
That way should work.

javascript: I want radio button action change according to the loop that fetch from database

My code is fetch data from database (suppose there are 4 records). Only first loop that effected when i changed radio button. Below is my code:
PHP CODE
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";
echo "<p><input type='checkbox' name='content_type' value='1' /></p>";
echo "<p><input type='checkbox' name='content_type' value='2' /></p>";
echo "<p><input type='checkbox' name='content_type' value='3' /></p>";
//content_a
echo "<div id='content_a' style='display:none;'>";
echo "<textarea name='text' id='textarea0'><textarea>";
echo "</div>";
//content_b
echo "<div id='content_b' style='display:none;'>";
echo "<textarea name='text' id='textarea1'><textarea>";
echo "</div>";
//content_c
echo "<div id='content_c' style='display:none;'>";
echo "<textarea name='text' id='textarea2'><textarea>";
echo "</div>";
//button
echo "<div class='button'>";
echo "<a class="tweet1" href="#" onclick="return false;">Alert</a>";
echo "</div>";
echo "</div>";
}
Javascript
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$(this).parents('.loop').find('#content_a').show(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '2':
$(this).parents('.loop').find('#content_b').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '3':
$(this).parents('.loop').find('#content_c').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
break;
}
});
I want radio button action change according to the loop that fetch from database. My code above, only first loop that effected. How to solve this problem?
that is beacuse id should always be unique...here (in your code ) you have multiple elements with same id id='content_a' (since it is inside a loop) . change this to class and use class selector
try this
html
echo "<div class='content_a' style='display:none;'>";
//---^^^^^ here
jquery
$(this).parents('.loop').find('.content_a').show(1000);\
//-------^-----here
change likewise to all other id selector
and while parents('.loop') works.. i recommend to use closest() for better performance
$(this).closest('.loop').find('.content_a').show(1000);
and yes.. you can reduce your code to two lines if you chnage your html properly..
first change you content to match with the checkbox value..
echo "<div class='content_1' style='display:none;'>"; //here class='content_' + value of checkbox
.....
echo "<div class='content_2' style='display:none;'>";
... //so on
try this
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
$('div[class^="content_"]').hide(); //hide all div
$(this).closest('.loop').find('.content_' + n).show(1000); //so particular div
});

Categories