Develop Reference

Stop page reload while Posting data

I have to post data to php but when I do, the page reloads. I have tried fixing this using answers given in similar questions but none of them yield proper results. Thanks for your help.
<!--HTML-->
<form method="post" action="index.php" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
Another way that I was recommended was by using ajax:
<form id="form" >
<input style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">
<input type="submit" href="#" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" onclick =" sendForm(event);" value="Enter">
</form>
<script>
$('#form').on('click', function(e){
e.preventDefault();
var name = $(#code).val(),
$.ajax({
type: 'post',
url: 'header_php.php',
});
});
</script>

Try to add onclick = "sendForm(event);" in button instead of form

you could change onsubmit instead of onclick in the form
function sendForm(e) {
e.preventDefault();
}
<form method="post" action="index.php" onsubmit="sendForm(event);"><!--changes-->
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>

Change button type="submit" to button Type="button" and
Use jquery ajax
$("#btnid").click(function(){
$.ajax({
method: "POST",
url: "some.php",
data: { name: $('#code').val()}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
})
Also remove action from form

Add onsubmit="return false;" to your form. In you js function e is clickEvent not is SubmitEvent, submitEvent make page reload.
<!--HTML-->
<form method="post" action="index.php" onsubmit="return false;" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>

send data to php JSON way from html form

I'm trying to send POST data using JavaScript. I have data in HTML form :
<form name="messageact" action="">
<input name="name" type="text" id="username" size="15" />
<input name="massage" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
after press submit key i want to send name and massage to my PHP file ! a wrote this for my JavaScript in html : post.php , with post method
$(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
and for my php i wrote this :
if(isset($_SESSION['name'])){
$text = $_POST['text'];
....
....
but in PHP i couldn't receive anything ! please help me to solve this problem ! and how can i change it to JSON way ?

You don't need javascript for send data to server just submit the form and add the destination php in action
<form name="messageact" action="post.php">
<input name="name" type="text" id="username" size="15" />
<input name="massage" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
for testing post.php you could use this code
<?php
if(isset($_POST['name'])){
echo $_POST['name'] . <br />;
echo $_POST['massage'] . <br />;
echo $_POST['submitmsg'] . <br />;
?>
if you want ajax behavior try this
$(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {submitmsg: clientmsg});
$("#usermsg").attr("value", "");
return false;
});

Why do you need to store name in the $_SESSION?
If you have used $_SESSION by mistake change this
if(isset($_SESSION['name'])){
$text = $_POST['text'];
....
....
to this and it should work
if(isset($_POST['text'])){
$text = $_POST['text'];
....
....
The $_POST and $_SESSION are 2 different variables. You might wanna take a look at this and this

Try this:
<form name="messageact" method="post" action="post.php">
<input name="name" type="text" id="username" size="15" />
<input name="message" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
$("#submitmsg").click(function(e){
var name = $("#username").val();
var usermsg = $("#usermsg").val();
$.post("post.php", {'name': name,'usermsg':usermsg});
return false;
});

i do it for java :
//If user submits the form
$('#edit').submit(function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'post.php',
dataType:'json',
data:$('#edit').serialize(),
success:function(data) {
console.log("success");
$('#feedback').html(data).fadeIn().delay(3000).fadeOut();
},
error: function( jqXHR,textStatus,errorThrown ){
console.log(textStatus);
}
});
});
and for form :
<form id="edit" action="" method="POST">
<input type="text" name="name" >
<input type="text" name="phone" >
<input type="text" name="address" >
<input type="submit" name="submit" value="Send">

need help, 2 submit forms in 1 ajax send post to 1 file.php

hello i need to post 2 forms using single ajax or jquery to 1 commun file, the code i have is this
<form id="filter-group1" class="form" target="remember" autocomplete="on" method="post">
<input pattern="[0-9]*" value="" name="ch1" maxlength="10" size="10" autofocus="" autocorrect="off" id="client-nbr" class="form-control numeric" rv-value-reactive="form.idTelematique" type="tel">
<a class="reset-input" href="#" id="initClient" onclick="change()"></a>
<input value="" id="memoriser" name="memoriser" type="checkbox">
<button type="submit" id="remember_button" class="hidden"></button>
</form>
<form id="filter-group2" method="post" class="form">
<div class="field-password">
<input rv-value="form.password | starPassword" readonly="" maxlength="6" name="staredPassword" id="secret-nbr" class="form-control" type="password">
<a class="reset-input" href="#" id="initPass" onclick="change1()"></a>
</div>
</form>
<div class="cell-password">
<div class="field-valid">
<button type="button" href="#" class="btn-primary btn-block" onclick="filterBy()" id="submitIdent" rv-text="config.app.identification.boutonTitle" >submit</button>
</div>
</div>
JS
function filterBy() {
// Construct data string
var dataString = $("#filter-group1, #filter-group2").serialize();
// Log in console so you can see the final serialized data sent to AJAX
console.log(dataString);
// Do AJAX
$.ajax( {
type: 'POST',
url: 'filter.php',
data: dataString,
success: function(data) {
console.log(data);
$('#message').html(data);
}
});
}
<button type="button" need to submit 2 the forms using ajax to post in single file php
problem not solve make me a full script if you can't, when i try to clik on <button type="button" href="#" class="btn-primary btn-block" onclick="filterBy()" function not execute

change to create your datastring:
var dataString = {
frm1 : $("#filter-group1").serialize(),
frm2 : $("#filter-group2").serialize()
};
and at the php end you can get the values with keys frm1, frm2.

Submit multiple form with one button

I know this question has been asked a lot, but there doesn't seem to be an answer for me. I'm sorry if I'm just really dumb, but I've been stuck for a day now..
I want to select a table row(see below), and then delete that user. Since I want to have multiple form's to interact with the table I can't place them in one form.
$("#clickMe").click(function () {
$(".myForms").trigger('submit');
});
$('.myForms').submit(function () {
console.log("SWAGGG");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="listForm" action="index.php?p=admin" method="POST">
<?php
$userQuery = "SELECT * FROM usr2";
$row_userQuery = $dbportal->query($userQuery);
if(isset($row_userQuery) && !empty($row_userQuery))
{
//row[0] = ID
//row[1] = username(abbrevation)
//row[2] = admin? 0=normale user 1=admin
echo'
<table id="myTable" class="table table-striped">
<tr><td></td><td>User ID</td><td>username</td><td>Role</td></tr>';
foreach ($row_userQuery as $row)
{
echo'
<tr>
<td id="tdSelect"> <input type="checkbox" name="selectedUser[]" value="'. $row[0] .'" />
<td>'. $row[0] .'</td>
<td>'. $row[1] .'</td>
<td>'. $row[2] .'</td>
</tr>';
}
echo'</table>';
}
?>
<input type="hidden" name="action" value="listForm">
</form>
<form id="deleteForm" class="myForms" action="index.php?p=admin" method="POST">
<div class="leftTextBox">
<p>user ID:</p>
<p class="margin">gebruikersnaam:</p>
</div>
<div class="rightTextBox">
<input class="form-control" type="text" name="userID" placeholder="user ID">
<input class="form-control" type="text" name="login" placeholder="gebruikersnaam" style="margin-top: 8px;">
</div>
<input type="hidden" name="action" value="deleteForm">
</form>
<button id="clickMe" class="btn btn-default" style="margin-top:5px;float:right;">Delete user</button>
I'm sure that its just me overseeing something, but help would greatly be appriciated.
Also, I have ajaxForm plugin installed.

A 'submit' is by definition a jump to a new URL. You know this can only be done for one form at a time.
However, we talking normal 'submits' here, and you don't have to use normal submits to get information from a form and act on it.
Since you're using JQuery, you could use that. Have a look at ajax calls. For instance here:
http://api.jquery.com/jquery.post
Look for the example called: Post a form using ajax and put results in a div, you will find useful code there. It shows you how to get the values of the fields in the form.

Let's imagine you have 3 forms like this:
<form id="form1" action="api/url1">
<input name="field1" type="text" />
</form>
<form id="form2" action="api/url2">
<input name="field2" type="text" />
</form>
<form id="form3" action="api/url3">
<input name="field3" type="text" />
</form>
<button>Submit</button>
Then you can fire the submit of each form like this:
$('button').on("click", function () {
$('form').each(function (index, form) {
$(form).submit();
});
});
Then to prevent form full post back just prevent the default of the submit event and then post the serialized form with ajax:
$('form').on("submit", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function (data) {
alert(data);
},
error: function (error) {
console.error({ status: error.status, statusText: error.statusText })
}
});
});
JSFIDDLE

If you want to use ajax
you can group a data of all input and post using new FormData()
function fnSubmintAll(){
var formData = new FormData();
$("#form1,#form2,#form3").each(function(idx,item){
var frmValue = $(item).serializeArray();
$.each(frmValue, function (key, input) {
formData.append(input.name,input.value);
});
})
$.ajax({
url: "/PostUrl",
type: "POST",
data: formData,
contentType:false,
processData: false,
success: function (result) {
alert("Success")
},
error: function () {
alert("Error")
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>From 1</legend>
<form id="form1">
<input name="field1" type="text" />
</form>
</fieldset>
<fieldset>
<legend>From 2</legend>
<form id="form2">
<input name="field2" type="text" />
</form>
</fieldset>
<fieldset>
<legend>From 3</legend>
<form id="form3">
<input name="field3" type="text" />
</form>
</fieldset>
<br />
<br />
<br />
<button type="button" onclick="fnSubmintAll">Submit All</button>

jQuery form submit as per referenced form

Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.

First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?