Develop Reference

How to make page not reload and not open php page after click on input with type submit?

I have page in HTML CSS JS: https://handmade.company/seo/index.html
on this page i have form
<form class="webform" action="send.php" method="post">
<input class="webinput" type="text" name="imja" placeholder="Ваше имя">
<input class="webinput" type="text" name="phone" placeholder="Ваш телефон">
<input class="webinput" type="text" name="sajt" placeholder="Ваш сайт">
<input class="webinput_btn" type="submit" value="Отправить запрос">
</form>
with php file SEND.PHP
<?php
$imja = $_POST['imja'];
$phone = $_POST['phone'];
$sajt = $_POST['sajt'];
$wrong = 'при отправке сообщения возникли ошибки';
$good = 'сообщение успешно отправлено';
if (mail("office#handmade.company", "Заказ с сайта", "Ваше имя: ".$imja. " Ваш телефон: ".$phone. "
Ваш сайт: ".$sajt ,"From: office#handmade.company \r\n"))
{ echo "<script>alert('$good');window.location.href='index.html'</script>;";
} else {
echo "<script>alert('$wrong');window.location.href='index.html'</script>";
}?>
The problem is: when i click input with type="submit" button browser go to page https://handmade.company/seo/send.php and alert and after it it go back to index.html
I want: the page not reload and browser not redirect me to send.php page. I just want alert and nothing should change anymore
i tried to add function with preventDefault onclick on submit input BUT my php stopped working

Remove send.php page
Change method = "post" to method = "get"
Do document.getElementsByClassName("webform")[0].onsubmit = function( e ) { e.preventDefault(); }
Use JavaScript to get URL parameters which will be the values of the from
Then alert

you can do this with Javascript or Jquery and Ajax. But if you want a simple way. You can try to add to your php file.
header('Location: https://handmade.company/seo/index.html');
exit;
replace https://handmade.company/seo/index.html for the url you want

How to submit form without submit button

I'm trying to submit form without submit button. I used this code to submit: document.forms['form_id'].submit(); but this code submitin over and over again. I want submit just one time
<form method="POST" id="form_id">
<input type="hidden" id="lan" value="" name="number">
</form>
<script type="text/javascript">
document.forms['form_id'].submit();
</script>

the form is submitting it self everytime the javascript is loaded, which is everytime you load the page. The default behavior of a form is to submit to the location you are currently at, if not defined, you are continously submitting the form to the page that has the form and that again submits the form.
If you want this submit only to happen once, when a visitor is (re)directed to this page for instance, you should submit to a different one by using the action attribute of your form.
If you want the submit to happen on te request of a user, wrap your submit in a function that is called by an onclick event on a button, or any other event.
<script>
function submittheform(){
document.forms['form_id'].submit();
}
</script>
<form method="POST" id="form_id" action="someHandlerUrl">
<input type="hidden" id="lan" value="" name="number"/>
<input type="button" onclick="submittheform()" value="submit the form"/>
</form>
you could use this script in the PHP building your page;
<?php
if(isset($_POST['number'])){
$number = $_POST['number'];
$out = '<h1>The form was submitted</h1>';
}else{
$out = '
<h1>The form needs to be submitted</h1>
<form method="POST" id="form_id">
<input type="hidden" id="lan" value="" name="number">
</form>
<script type="text/javascript">
document.forms[\'form_id\'].submit();
</script>
';
}
echo $out;
?>
When the form is submitted and the number value is present,
it shows a page without the script and form.

<form method="POST" action="" id="mailform">
<input type="email" name="mail" placeholder="EMAIL" id="mail">
<div id="sub" onclick="mailsubmit()">Click Me to Submit</div>
</form>
<script type="text/javascript">
function mailsubmit(){
document.getElementById("mailform").submit();
var mailid = document.getElementById("mail").value;
return mailid?alert(mailid):alert("You did not submit your Email");
}
</script>

form fields not passing through when submit is done via javascript

I can't seem to figure out why this is happening. Any help would be appreciated. I have an html form with two fields. When I run the page and submit the form with a submit button, the field values pass through ok. But if I run the same page and submit with javascript as I show here, the receiving file shows null values for both x and y.
Source File:
<html>
<head>
<script>
document.invoice.x.value = "1";
document.invoice.y.value = "2";
</script>
</head>
<body>
<form method="post" name="invoice" id="invoice" action="process_payment.php">
X: <input type="text" name="x"> Y: <input type="text" name="y">
<script>document.forms["invoice"].submit();</script>
</form>
</body>
</html>
Target File (process_payment.php):
<?php
session_start();
print "<pre>"; print_r($_POST); print("</pre>");
?>
Output I am getting:
Array
(
[x] =>
[y] =>
)

you can set your value in javascript like this:
document.getElementsByName("x").value="1";
document.getElementsByName("y").value="2";
and to submit the form use:
document.forms["invoice"].submit();

Please check this
Use below BEFORE body Close tag check This
<script>
document.invoice.x.value = "1";
document.invoice.y.value = "2";
</script>
OR use jQuery
<script>
$("[name='x']").val("1");
$("[name='y']").val("2");
</script>

jQuery php variable problems

I'm trying to catch the correct variable in this jQuery function but whatever the button I click, the alert always shows the name of the first label that I have. Any ideas? Thank you.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(".submit").click(function() {
var name = $("#name").val();
alert(name);
});
});
</script>
</head>
<body>
<?php
include("connection.php");
$link=connect();
$result=mysql_query("select * from names",$link);
if (mysql_fetch_array($result) == 0)
{
echo "No names registered. Add one";
}
else
{
while($row=mysql_fetch_array($result))
{
echo "<html>
<label>".$row["name"]."</label>
<input type='button' class='submit' value='Delete'>
<input type='hidden' id='name' value=".$row["name"].">
<br>
</html>";
}
mysql_free_result($result);
mysql_close($link);
}
?>
</body>
</html>

Use DOM navigation to get the value from the adjacent input:
$( document ).ready(function() {
$(".submit").click(function() {
var name = $(this).next().val();
alert(name);
});
});
Also, there should just be one <html> block in the page. Don't put that in the loop.

At first, html ID should be unique.
Try using html5 data attributes and remove your hidden form element:
while($row=mysql_fetch_array($result))
{
echo "<input type='button' class='submit' value='Delete' data-value=".$row["name"].">";
}
And JS part:
<script type="text/javascript">
$( document ).ready(function() {
$(".submit").click(function() {
alert($(this).data('value'));
});
});

You are re-using the same id - name - multiple times:
while($row=mysql_fetch_array($result))
{
echo "<html>
<label>".$row["name"]."</label>
<input type='button' class='submit' value='Delete'>
<input type='hidden' id='name' value=".$row["name"].">
<br>
</html>";
}
You should wrap your fields in individual forms (not html elements) and use the name attribute:
while($row=mysql_fetch_array($result))
{
echo "<form action='' method='post'>
<label>".$row["name"]."</label>
<input type='button' class='submit' value='Delete'>
<input type='hidden' name='name' value=".$row["name"].">
<br>
</form>";
}
This will make your form also work without javascript.
Then, in your javascript you can do:
$(".submit").click(function(e) {
e.preventDefault();
var name = $(this).closest('form').find('input[name="name"]').val();
...
Or if you need to post it using ajax afterwards:
var data = $(this).closest('form').serialize();
(or you catch the submit event of the form instead)

In addition to some of the other answers, you don't really need the hidden input. Could just change the button input to:
<input type='button' class='submit' name='".$row["name"]."' value='Delete'>
Then change your JQuery selector to:
var name = $(this).attr('name');

Javascript: Need to proceed to another page

I'm using Javascript for deleting a record. But my problem is, when I click the image button its not redirecting to the page I want instead it will remain on the page...
Here's my code:
echo "<button type='submit' name='deletePlaylist[]' value='" . $row['id']."' onClick='myFunction()' style='border: 0; background: transparent; cursor: pointer;'><img src='image/delete.png' /></button> ";
I'm using the button because I'm using an image if I used the input its not working... So I decided to use button
Here's my code in my javascript:
function myFunction()
{
var Xcancel;
var Rokay=confirm("Are you sure you want to delete?");
if (Rokay==true)
{
window.location = 'delete.php';
}
else
{
Xcancel="You pressed Cancel!";
}
}
</script>
I already tried the window.navigate("delete.php"); or the window.location.href='delete.php' also not working...
The confirmation message is displaying already but my main problem its not going to the delete.php where in that form is my deleting function...
NOTE:
The button is under of the <form name='form' method='post' action="">, the delete.php is in the same folder... Before there is no confirmation message and its going to the delete.php but now I tried to insert a confirmation message then its not going to the delete.php... The form action is empty because I have a click able dropdown list where it will proceed to the result.php
Here's the code for my dropdown list:
<select id="year"name="year"onChange="this.form.action='booking_delete_two.php'; this.form.submit()">
<option value="2013" <?php if($get_year=='2013') echo "selected"?>>2013</option>
<option value="2014" <?php if($get_year=='2014') echo "selected"?>>2014</option>
</select>
<select name="id" onChange="this.form.action='booking_delete_three.php'this.form.submit()">
<option value="<?php echo $get_ID; ?>"><?php echo $get_ID; ?></option>
<?php
$q = mysql_query("select * from tblnetwork");
while ($row1 = mysql_fetch_array($q))
{
if($get_ID != $row1[fldNetname])
{
echo "<option value='".$row1[fldNetname]."'>".$row1[fldNetname]."</option>";$get_netname = $row1[fldNetname];
}
}
?>
</select>
As you can see I empty the action because I have a three different pages where it will proceed....
a. booking_delete_two
b. booking_delete_three.
c. delete...
Thank you in advance,!

Make these changes to your script:
function myFunction(evt)
{
evt.preventDefault(); // this will keep the page from submitting and aloow the rest of the script to run
var Xcancel;
var Rokay=confirm("Are you sure you want to delete?");
if (Rokay==true)
{
window.location = 'delete.php';
}
else
{
Xcancel="You pressed Cancel!";
}
}

The form is being submitted to its default action. You need to prevent this submission. Just append onsubmit = "return false" to your form. This will prevent the form from submission.
<form name='form' method='post' action="" onsubmit="return false;">

I would be correcting how forms are meant to be validated instead of making work arounds.You best bet is to follow the same practice as what W3schools sets out below:
http://www.w3schools.com/js/js_form_validation.asp
So it should look like:
<form name="form" action="" onsubmit="return myFunction()">
<button type="submit" name="deletePlaylist[]" value="' . $row['id'].'" style="border: 0; background: transparent; cursor: pointer;">
<img src="image/delete.png" />
</button>
</form>
EDIT:
myFunction() could then look like below:
function myFunction()
{
var Xcancel;
var Rokay=confirm("Are you sure you want to delete?");
if(Rokay == false){
Xcancel="You pressed Cancel!";
}
return Rokay;
}
EDIT2: Added to 'myFunction()' a dynamic way of assigning the form action :p You can leave the original action attribute blank or have it as a default.
EDIT3: Seeing your drop down code I returned my answer to something like it was originally. Test it out.