Posting an input to PHP with Ajax [duplicate] - javascript

This question already has answers here:
jQuery serializeArray doesn't include the submit button that was clicked
(5 answers)
Closed 6 years ago.
I have a series of input fields and I would like them to post their values to a php page for processing then return some data without reloading the page. Here is the what I have so far, however no data appears to be passing.
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(form) {
$.ajax({
type:"POST",
url:"catch.php",
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
console.log(data);
}
});
form.preventDefault();
});
});
</script>
</head>
<body>
<form method="post" name="form">
<input type="submit" name="event" value="1" />
<input type="submit" name="event" value="2" />
<input type="submit" name="event" value="3" />
<input type="submit" name="event" value="4" />
</form>
<div id="result"></div>
</body>
</html>
PHP:
<?php
if(isset($_POST["event"]))
{
echo $_POST["event"];
}
?>


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.event').on('click', function(){
$('#event').val($(this).val());
$('#event_form').submit();
});
$("form").submit(function(form) {
$.ajax({
type:"POST",
url:"catch.php",
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
console.log(data);
}
});
form.preventDefault();
});
});
</script>
</head>
<body>
<form method="post" name="form" id="event_form">
<input name="event" id="event" value="" type="hidden">
<input type="button" class="event" value="1" />
<input type="button" class="event" value="2" />
<input type="button" class="event" value="3" />
<input type="button" class="event" value="4" />
</form>
<div id="result"></div>
</body>
</html>

Related

How to jump focus to the next form field when input reaches the max length limit?

The following script does not work ... does anyone know what is the error? I am trying to jump focus to the next form field when input reaches the max length limit.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SECURITY</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3SECURITY</h3>
<fieldset>
<input id="focus1" placeholder="Barcode" type="text" tabindex="1" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<input id="focus2" placeholder="Identification Number" type="text" tabindex="2" maxlength="1" size="1" required>
</fieldset>
<input id="focus3" placeholder="Truck Number" type="text" tabindex="3" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>

Here is a version that works:
$(function() {
$('#focus1,#focus2,#focus3').keyup(function(e) {
if ($(this).val().length >= $(this).attr('maxlength')) {
$(this).parent().next('fieldset').find('input').focus();
}
});
});
and a demo of it.

Move your script section just before the ending body tag '</body>'.
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</body>

Convert iframe to textarea

I need some help. I want to convert this iframe into this textarea, so I can be able to write text in it. I try the below code, but it's not working.
Here are my code
$(document).ready(function () {
$(function () {
$("#richTextField").on("load", function () {
var str = $(this).contains().find('html').prop('outerHTML')
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/prof.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script src="script/Working.js"></script>
</head>
<body onLoad="iFrameOn();">
<div id ="addtext" class="panel">
<form action="my_parse_file.php" name="myform" id="myform" method="post">
<!-- <div id="rte" contenteditable="true" unselectable="off">Write here ....</div>-->
<div id="menu">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
<textarea style="display:none;" name="rte" id="rte" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<br /><input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
</iframe>
</div>
</div>
</body>
</html>
I was hoping that some can help me.

PHP submit an form only if checkbox checked

I have a form with a check box and an input text. Here is my form:
<form action="index.php?option=com_platiniumchristmas&view=success" method="post">
<label>
<input type="checkbox" name="termsConditions" id="chbx" value="Yes" onclick="foo()" />
<?php echo JText::_( 'COM_PLATINIUMCHRISTMAS_TERMSCONDITIONS_TEXT');?>
</label>
<input type="submit" value="Emitir Voucher" class="btn btn-success" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="friendName" style="width: 100%;" />
<input type="hidden" name="canal" value="<?php echo $_POST[" canal "]; ?>"/>
</div>
</form>
The idea is only to submit the form if the checked box value is checked. How can I go about this. I have tried using javascript but no success.
The javascript I tried to Use:
<script type=”text/javascript”>
var checkbox = document.getElementById("chbx");
function foo(){
if(checkbox.checked){
alert("meap");
};
};
</script>

You don't need JavaScript at all. Just use the required attribute for the constraint validation API.
<form action="index.php?option=com_platiniumchristmas&view=success" method="post">
<label>
<input type="checkbox" name="termsConditions" id="chbx" value="Yes" required />
<?php echo JText::_( 'COM_PLATINIUMCHRISTMAS_TERMSCONDITIONS_TEXT');?>
</label>
<input type="submit" value="Emitir Voucher" class="btn btn-success" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="friendName" style="width: 100%;" />
<input type="hidden" name="canal" value="<?php echo $_POST[" canal "]; ?>"/>
</div>
</form>
This will stop the form from submitting unless the checkbox is checked. Do remember, you still need backend validation as always to verify since requests can be forged if enough effort is put into it.

try complete example, it should work.
and then correct your code.
<!DOCTYPE html> <html> <head> <script> function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
} } </script> </head> <body>
<form name="myForm" action="index.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
</body> </html>
Thanks
Amit

$("#form").submit(function(e) {
if(!$('input[type=checkbox]:checked').length) {
alert("Please select the checkbox.");
//stop the form from submitting
return false;
}
return true;
});
<form id='form'>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" >
</div>
</form>
use this

You lose the context in your code. try:
<script type=”text/javascript”>
function foo(){
var checkbox = document.getElementById("chbx");
if(checkbox.checked){
alert("meap");
};
};
</script>

Send contents of fields in a form whit POST method jquery

I got this situation, this is my HTML page so far:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
On button click I need to send to another html page the content (value) of those two text input. I took a look to many solutions that i found online, but I'm very new to this and i can't accomplish my task. Can anyone provide me whit the right, step-by-step code in javascript/jquery?
Thanks in advance

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
$.post("demo_test_post.asp",
{
campoA: $('#campoA').val(),
campoB: $('#campoB').val()
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>

You need a server tecnology, this is an example using PHP on server.
Page land.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.php">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="submit" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
Page land.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
CampoA: <?php echo $_POST['campoA'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoA'] ?><br/>
</div>
<div>
CampoB: <?php echo $_POST['campoB'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoB'] ?><br/>
</div>
</body>
</html>

You could use JQueries AJAX like below:
$("#send").click(function(e){
e.preventDefault;
var val1 = $("campoA").val();
var val2 = $("campoB").val();
$.ajax({
method: "POST",
url: "url",
data: { value1: val1, value2: val2 }
}).done(function(){
// do something
});
});

Try this:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
$('#send').click(function(evt) {
evt.preventDefault();
evt.stopPropagation();
$.ajax({
url: "./proba.html",
method: "POST",
data: $('#Form').serialize(),
success: function(html) {
console.log(html);
}
});
});
});
</script>

Ajax form submission reloads the page

Page reloads after form submission, and i want it not to reload.
Update: With answers below i came up With the code below. What happens is form submits correctly, but the page reloads.
Before, this line of code worked fine:
$(document).ready(function() {
$('#poll').ajaxForm(function() {
$("#polling_id").load("poll_results.php");
});
});
Today i have added .htaccess to remove .php extensions. Could that have affected this someway?
HTML
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></SCRIPT>
</head>
<div class="polling" id="polling_id">
<br><br>
<form id="poll_form" method="POST" action="process-vote.php" />
<div class="poll_objects">
<input type="hidden" name="o1" value="<?php echo $option1; ?>" />
<input type="hidden" name="o2" value="<?php echo $option2; ?>" />
<input type="hidden" name="o3" value="<?php echo $option3; ?>" />
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option1;?>" id="radio" /><label for="radio"><?php echo $option1;?></label> </span><br><br>
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option2;?>" id="radio2" /><label for="radio2"><?php echo $option2;?></label></span><br><br>
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option3;?>" id="radio3" /><label for="radio3"><?php echo $option3;?></label></span><br><br>
<div class="float_buttons">
<input type="submit" name="submit_vote" value="Vote!" class="button" />
<input type="submit" name="results" value="Poll Results" class="button"/>
</div>
</div>
</div>
</form>
jQuery:
<script>
$(document).ready(function() {
$.ajax({
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
$("#polling_id").load("poll-results.php");
});
});
});
</script>

It doesn't look like you are capturing an event.
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
// now do your ajax stuff here.
});

You can also put :
<script>
function validate()
{
...
blablabla
...
return false; // This cause the submit function to be stopped.
}
</script>
<form onClick="validate()">

Categories