I have a table with a lot of rows, each row has 2 input fields and 1 submit button. When I click on the submit button the data is passed to a PHP script, the PHP script processes the data and returns some text.
Currently the submit button is replaced with the text that is returned by the PHP script. But I want that the returned text is being shown next to the button, so the button doesn't disappear.
I am not able to fix that, maybe somebody can help me with that?
<html>
<head>
<title>Add data with Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on('click', '#submitButton input[type=button]', function(){
var field1 = $(this).parent().parent().find(".field1").val();
var field2 = $(this).parent().parent().find(".field2").val();
var field3 = $(this).parent().parent().find(".field3").val();
var submitButton = $(this);
$.ajax({
type: "POST",
url: "add_data.php",
data: { field1: field1, field2: field2, field3: field3 }
})
.done(function(msg) {
submitButton.parent().html(msg);
});
});
</script>
</head>
<body>
<form method="POST">
<input type="hidden" class="field1" value="product 1">
<input type="text" class="field2" value="data1">
<input type="text" class="field3" value="data2">
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>
<form method="POST">
<input type="hidden" class="field1" value="product 2">
<input type="text" class="field2" value="data1">
<input type="text" class="field3" value="data2">
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>
<form method="POST">
<input type="hidden" class="field1" value="product 3">
<input type="text" class="field2" value="data1">
<input type="text" class="field3" value="data2">
<div id="submitButton">
<input type="button" name="submitButton" value="Add">
</div>
</form>
</body>
Well, instead of replacing the content:
submitButton.parent().html(msg);
append to the content:
submitButton.parent().append(msg);
Related
I'm using the script below to automatically add new lines in a form, but I do not see how to retrieve the values of each field under PHP with $_POST.
If someone has already had this problem with a table in a form, thank you for helping me!
what procedure to retrieve in test5.php the values of the fields.
I do not know how to get an array in a $_POST
thank you in advance
Here is my script
<html>
<head>
</head>
<body>
<form action="test5.php" method="post">
<div id="address">
<div id="1" name="address[]">
<input id="mail" type="text" />
<input id="type" type="text" />
<input id="comment" type="text" />
×
</div>
</div>
<input id="add_address" type="button" value="Ajouter" />
<input type="submit" value="Create PDF" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#add_address').click(function(event) {
var lastDiv = $('#address > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
</script>
</body>
</html>
1.) Remove the name-attribute from the div-element
2.) Build your input-elements like:
<div id="..">
<input type="..." name="address[1][mail]" />
<input type="..." name="address[1][type]" />
<input type="..." name="address[1][comment]" />
</div>
<div id="..">
<input type="..." name="address[2][mail]" />
<input type="..." name="address[2][type]" />
<input type="..." name="address[2][comment]" />
</div>
I modified my script as below and in test5.php, I can view the data with this script.
<? Php
// print_r ($ _ POST);
echo $ _POST ['mail'] [2];
?>
Thanks
-------------test5.php-------------
<div id="address">
<div id="1">
<input type="text" name="mail[]" />
<input type="text" name="type[]" />
<input type="text" name="comment[]" />
</div>
</div>
how can I get users input and print it into another text field input?
I'm using php. I have 2 input types of text and one submit button. i want to be able to print the results of input A into the input textbox B
example:
<form>
<input type="text" name="input"/> <!-- thiss is where the user enters text -->
<input type="text" name="output"/> <!-- I take that text out and output it here -->
<input type="submit" value="submit" <?php echo $input;/>
</form>
I keep trying to echo "$input" into output but not working.
hope this will help
<?php
$output= (isset($_POST['submit']))?$_POST['input']:'';
?>
pure php. <br>
try to input value in input field then submit.
<form method="post">
<input type="text" name="input"/> <!-- thiss is where the user enters text -->
<input type="text" name="output" value="<?php echo $output;?>"/> <!-- I take that text out and output it here -->
<input type="submit" name="submit" value="submit">
</form>
using javascript onchange.<br>try to input value in field input1
<form method="post">
<input type="text" id="input1" name="input1" onchange="clone();"/> <!-- thiss is where the user enters text -->
<input type="text" id="output1" name="output1" /> <!-- I take that text out and output it here -->
<input type="submit" name="submit1" value="submit">
</form>
<script>
function clone()
{
var x = document.getElementById("input1").value; document.getElementById("output1").value=x;
}
</script>
You cannot do this with PHP since PHP is a server side language. It does not support client side manipulation.
You will need something like this.
<script type="text/javascript">
$(document).ready(function () {
$(document).on('change', 'input[name="input"]', function () {
var contents = $(this).val();
$('input[name="outut"]').val(contents);
})
});
</script>
<!-- HTML -->
<form method="post">
<input type="text" name="input" />
<input type="text" name="output" value="" />
<input type="submit" name="submit" value="submit">
</form>
For more information about jQuery take a look at this W3Schools article
May be this what you are looking for using simple javascript events
function myFunction(){
var a=document.getElementById('a').value;
document.getElementById('b').value= a
}
<form>
<input type="text" name="input" onkeydown="myFunction()" onkeydown="myFunction()" id="a"/> <!-- thiss is where the user enters text -->
<input type="text" name="output" id ="b"/> <!-- I take that text out and output it here -->
<input type="submit" value="submit" >
</form>
I have one form with a few submit buttons. I want to submit the form via POST to itself to process the filled out form fields... does the jquery override the submit?
$('#myButton').click('myAction') <!-- not actual code, just for the idea -->
<input type="button" type="submit" id="myButton" value="do something">
you can use something like this:
html form:
<form id="myform" method="post" name="form" action="">
<input type="text" name="name" value="">
<input type="text" name="other" value="">
<input type="submit" type="submit" name="myButton" value="do something">
</form>
js:
$('#myform').on('submit',function(e){
e.preventDefault();
var addnew='&addnew=1234';//additional data
var _data = $('#myform').serialize();
_data = _data+addnew;
console.log(_data);
});
sample jsfiddle
JSfiddle: http://jsfiddle.net/NqaZ2/4/
I have two forms on a page, One posts fine but the other does not post anything:
<form id="comment-oa" action="" method="post">
<input type="hidden" name="key" value="coa" />
<input type="hidden" name="action" value="" />
<input type="hidden" name="value" value="" />
</form>
Its being submitted through jquery:
$('a[data-role="fc-delete"]').click(function(){
var id = $(this).parent().parent().parent().parent().attr('id'),
spl = id.split("-");
$('#comment-oa input[name="action"]').attr('value', "delete");
$('#comment-oa input[name="value"]').attr('value', spl[0]);
$('#comment-oa').submit();
});
and I'm simply just doing print_r($_POST) at the moment, but it just comes up with Array ( ).
I've checked whether jQuery puts values in and it does (firefox inspector pic):
EDIT:
The other form:
<form action="" method="post">
<textarea name="comment"></textarea>
<input type="hidden" name="reply-id" value="" />
<input type="submit" value="Post comment" />
<input type="button" value="cancel" style="display: none;" />
</form>
Update:
$('a[data-role="fc-delete"]').click(function(){
var id = $(this).parent().parent().parent().parent().attr('id'),
spl = id.split("-");
$('#comment-oa input[name="action"]').attr('value', "delete");
$('#comment-oa input[name="value"]').attr('value', spl[0]);
$('#comment-oa').submit();
});
to
$('a[data-role="fc-delete"]').click(function(e){
e.preventDefault();
var id = $(this).parent().parent().parent().parent().attr('id'),
spl = id.split("-");
$('#comment-oa input[name="action"]').attr('value', "delete");
$('#comment-oa input[name="value"]').attr('value', spl[0]);
$('#comment-oa').submit();
});
Your using a link without preventing it form well - linking.
i have input type and button, i need when insert into
<input type="text" name="bills_ID" id="bills_ID" value="2">
i will get id for this item and put it into here
BillsPrint.php?bills_ID=id
this is full code
<form id="wrapper">
<input type="text" name="bills_ID" id="bills_ID" value="2">
<input name="print" type="submit" id="print" value="print" class="css3buttonblue" onclick="window.open('BillsPrint.php?bills_ID='this.id, '_blank')" />
</form>
how can i put the id on this link BillsPrint.php?bills_ID=2 without refresh page
You could do this:
<form id="wrapper">
<input type="text" name="bills_ID" id="bills_ID" value="2">
<input name="print" type="submit" id="print" value="print" class="css3buttonblue" />
</form>
<script>
$(function(){
$('#print').click(function(){
window.open('BillsPrint.php?bills_ID='+$('#bills_ID').val(), '_blank')
});
});
</script>
<form id="wrapper">
<input type="text" name="bills_ID" id="bills_ID" value="2">
<input name="print" type="submit" id="print" value="print" class="css3buttonblue"
onclick="window.open('BillsPrint.php?bills_ID=' + $("#bills_ID").val(), '_blank')" />
</form>
Remove the onclick etc. And use get method. Use this simple code and the variables will come in URL as query string.
<form action="BillsPrint.php" method="get" id="wrapper">
<input type="text" name="bills_ID" id="bills_ID" value="2">
<input name="print" type="submit" id="print" value="print" class="css3buttonblue">
</form>
You forget to specify action of form. Use this code it will work. :)
Hope it will help.
Try this:
$(document).ready(function(){
$('form').submit(function(){
var id = $('input[name="bills_ID"]').val();
window.open('BillsPrint.php?bills_ID='+id, '_blank');
return false;
});
});
$("#print").click(function(){
var id = $("#bills_ID").val();
$.ajax({
url: 'BillsPrint.php?bills_ID=' + id,
success: function(data) {
$('.result').html(data);
alert(data); //alerts output from the BillsPrint.php page
}
});
});