Hiya:
i know some people would be so tired of my questions, but I'm working on a uni project and need to get it done as soon as possible. This question is about using JS on a button(button) and sending a php_my_sql update on the same button. The problem is JS uses button, right? but PHP uses button(submit). How can I get these two to work on one of these buttons, cuz there has to be only one button.
this is my code for JS
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect")
x.remove(x.selectedIndex)
}
</script>
HTML
<form method="post">
<select id="collect" name="Select1" style="width: 193px">
<option>guns</option>
<option>knife</option>
</select> <input type="**submit/button**" onclick="formAction()" name="Collect" value="Collect" /></form>
PHP
<?
if (isset($_POST['Collect'])) {
mysql_query("UPDATE Player SET score = score+10
WHERE name = 'Rob Jackson' AND rank = 'Lieutenant'");
}
?>
This can be a way
Submit the form through JS after removing parameter
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect")
x.remove(x.selectedIndex);
document.forms[0].submit();
}
</script>
Input type button
<input type="button" onclick="formAction()" name="Collect" value="Collect" />
Embed jQuery and use $.post() to send an AJAX request.
JavaScript can interact with the button whilst the user is navigating the page and entering data into the form. The instant the user pushes the submit button and the request for the form submission is sent JS no longer has control. The request is sent to the form's action (most likely a PHP file) which processes the request and gives an answer back.
If you really need to combine the two, look into AJAX.
<?php print_r($_POST); ?>
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect");
x.remove(x.selectedIndex);
submit_form();
}
function submit_form() {
document.form1.submit();
}
</script>
<form method="post" name='form1'>
<input type='hidden' name='Collect'/>
<select id="collect" name="Select1" style="width: 193px">
<option>guns</option>
<option>knife</option>
</select> <input type="button" onclick="formAction()" name="Collect" value="Collect" /></form>
<?
if (isset($_POST['Collect'])) {
//do whatever update you want
}
?>
Simple Solution
Make this modification in the form tag
<form method="post" onsubmit="return formAction()">
In JavaScript function add a line "return true;" at the end of the function.
Voila ..!!! you are done..!!
Enjoy..!!
Related
I have a php file localhost/~user/sample.php file which gets data from post method.
<?php
$you = $_POST["ids"];
$start= $_POST["start"];
echo $you."--".$start;
I want to write a jquery code which will open the url "localhost/~user/sample.php" in a separate window on button click inside my html page and also pass the arguments required for it.
I can use get method in php, but the number of variables are more
I would probably go for using a form, like so:
<form action="sample.php" method="post" target="_blank">
<input type="hidden" name="name1" />
<input type="hidden" name="name2" />
...
<input type="hidden" name="name20" />
<input type="submit" value="Go to page">
</form>
This is the most cross-browser JS-failsafe basic html version way of achieving this task that I can think of...
If you need to dynamically add form fields to the form, I believe you will find this question: Jquery - Create hidden form element on the fly handy. Copying the modified answer:
$('<input type="hidden" name="myfieldname" value="myvalue">').appendTo('form');
One way would be to dynamically create a hidden form and then submit it, make sure you encode the input:
var params = [['someKey0', 'someValue0'], ['someKey1', 'someValue1'], ['someKey2', 'someValue2'], ['someKey3', 'someValue3']];
var inputs = $.map(params,function(e,i){
return '<input type="hidden" name="'+e[0]+'" value="'+encodeURIComponent(e[1])+'"/>';
});
var form ='<form action="sample.php" id="hidden-form" method="post" target="_blank">'+inputs.join('')+'</form>';
$('#hidden-div').html(form);
$('#hidden-form').submit();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-div"></div>
Try this....
<form id="myForm" action="sample.php" method="post">
<?php
echo '<input type="hidden" name="'.htmlentities($you).'" value="'.htmlentities($start).'">';
?>
</form>
<script type="text/javascript">
document.getElementById('myForm').submit();
</script>
if you send request with javascript to any php page; it sends a request and gets the respose to the page which has sent request and you continue process your data at your first page. So if you want to open your sample.php and also send your post data within; you must send your data with something like php form.
Submitting forms: http://www.w3schools.com/php/php_forms.asp
If you want to use js post, you can do something like below:
teams.php:
data = { teams : ['Real Madrid','Barcelona','etc']};
var response = null;
$.ajax({
url : 'mypostfile.php',
type : 'POST',
data : data
})
.done(function(resp){ response = resp; //it returned from php echo })
.fail(function(){ console.log('fail'); //post process failed. });
mypostfile.php:
if(isset($_POST['teams'])){
$teams = $_POST['teams'];
echo $teams[0]; //response : Real Madrid
}
Hope it helps.
i have set the form action to a text retrieved from the database which has an id.my problem is when the form action executed it always shows the first id even if i clicked on the text holding id=2.I have checked the page source and it's showing the correct id for all the text.
here is my view code
<?php foreach ($content as $cont):?>
<form id="offer" method="post" action="<?php echo base_url() . 'index.php/pages/detail'?>">
<input type='hidden' name='cont_id'id='cont_id' value='<?php echo $cont->id?>'>
<a onclick="document.getElementById('offer').submit();"><?php echo $cont->title?></a>
</br>
</form>
<?php endforeach;?>
</div>
<script>
function submitForm() {
document.getElementById("offer").submit();}
</script>
here is my controller :
echo $this->input->post('cont_id');
You can use .submit()
Submit
If you have JAVASCRIPT knowledge you can use the
document.getElementById("myForm").submit();
method to submit the form..
create a Javascript Function
<script>
function submitForm()
{
document.getElementById("myForm").submit();
}
</script>
use this code for the text you want to hyperlink the button to
<h1 onclick="submitForm()">Click on this text</h1>
i have a got a form, on clicking the submit button:
I want to do some task in the same file (db task) AND
I want the form data to be sent to test.php with the redirection
here is my code
<?php
if(isset($_POST['btn'])){
//do some task
?>
<script type="text/javascript">
var e = document.getElementById('testForm'); e.action='test.php'; e.submit();</script>
<?php
}
?>
<form name="testForm" id="testForm" method="POST" >
<input type="submit" name="btn" value="submit" autofocus onclick="return true;"/>
</form>
but not able to submit the form, if i call the javascript code on onClick, it works.what is the problem in this code, Is there any work around for this
Just echo the javascript out inside the if function
<form name="testForm" id="testForm" method="POST" >
<input type="submit" name="btn" value="submit" autofocus onclick="return true;"/>
</form>
<?php
if(isset($_POST['btn'])){
echo "
<script type=\"text/javascript\">
var e = document.getElementById('testForm'); e.action='test.php'; e.submit();
</script>
";
}
?>
Lately I've come across yet another way of putting JS code inside PHP code. It involves Heredoc PHP syntax. I hope it'll be helpful for someone.
<?php
$script = <<< JS
$(function() {
// js code goes here
});
JS;
?>
After closing the heredoc construction the $script variable contains your JS code that can be used like this:
<script><?= $script ?></script>
The profit of using this way is that modern IDEs recognize JS code inside Heredoc and highlight it correctly unlike using strings. And you're still able to use PHP variables inside of JS code.
You can put up all your JS like this, so it doesn't execute before your HTML is ready
$(document).ready(function() {
// some code here
});
Remember this is jQuery so include it in the head section. Also see Why you should use jQuery and not onload
At the time the script is executed, the button does not exist because the DOM is not fully loaded. The easiest solution would be to put the script block after the form.
Another solution would be to capture the window.onload event or use the jQuery library (overkill if you only have this one JavaScript).
You can use PHP echo and then put your JavaScript code:
<?php
echo "
<script>
alert('Hellow World');
</script>
";
?>
I have few lines of code to create a form and then later in the code I am using AJAX $.post through JSON.
My html form scripting code creates a simple form and then by pressing a "enviar (submit) button, it'll print my vars data. I am calling with $.post a file called dados.php, as you'll see later in this message.
I am in the impression that by using jQuery preventDefault() by clicking in the the "enviar" button nothing would happen but it'll bring to other page showing data from my vars (I am doing print_r($_POST); and var_dump($_POST); inside my dados.php.
First, I could be wrong to thing that jQuery preventDefault() or others (you'll see commented in my code) "prevent" any action after the user/me click on the "enviar"(submit) button; nothing would happen, but still prints my vars data.
Second/lastly, there's something wrong with my code.
Please check the following scripting code for my HTML form and for my dados.php (php code); In advance I really appreciate your help:
MY HTML FORM/JSON:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<title></title>
</head>
<body>
<div id="result">texto do cliente</div>
<form id ="myform"action="dados.php" method="post">
<table>
<tr>
<td>Nome:</td>
<td>
<input type="text" id="first_name" value="" maxlength="25" />
</td>
</tr>
<tr>
<td>Sexo:</td>
<td>
<input type="radio" id="Sexo" value="Masculino" /> Masculino
<input type="radio" id="Sexo" value="Feminino" /> Feminino
</td>
</tr>
<tr><td>Profissão:</td>
<td>
<select id="dropdown">
<option value ="administrador">Administrador</option>
<option value ="analista">Analista</option>
<option value ="designer">Designer</option>
<option value ="gerente">Gerente</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="submit" type="submit" value="enviar"/>
</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
/* attach a submit handler to the form */
$("input[type='submit']").click(function(e) {
/* stop form from submitting normally */
e.preventDefault();
//e.stopImmediatePropagation();
//e.stopPropagation();
$.post(
'dados.php', {firstname: $('#first_name').val(), sexo: $('#sexo').val(),
profissão: $('#dropdown').val()}, function(data) {
console.log(data);
//$('#result').html(data)
//$('#result').html(data.firstname)
//$('#result').html(data.sexo)
//$('#result').html(data.profissão)
}, 'json');
});
</script>
<script>
</script>
</body>
</html>
MY DADOS.PHP:
//ECHO $_POST['dropdown'];
print_r($_POST);
var_dump($_POST);
Big Thanks.
Marco Lanza
You didn't close your $(function(){.
You need to add another }); at the end.
Try adding return false; to the end of your callback. I usually just set this on the form itself if I'm planning to make an AJAX form: <form action="someAction" method="post" onsubmit="return false;">
Also, you should attach to the submit event on the form rather than the click event on the button - remember that if the user presses the Enter key, the form will submit, bypassing the event handler on the button.
Instead of:
$("input[type='submit']").click(function(e) {
Try this:
$("#myform").submit(function(e) {
Did you try to put your jQuery script into HTML header and change $(function() to $(document).ready(function(){?
$("input[type='submit']").click(function(e) { isn't a submit handler, it's a click handler for the submit button, which probably isn't what you actually need.
Try replacing that line with $("form#myform").submit(function(e) { instead.
Change to a form submit where you have this:
$("input[type='submit']").click(function(e) {
do this:
$('#myform').submit(function(e) {
Really, you should just use <input type="button"> and add the click handler to that.
Try putting return false; after your $.post call
I was just trying to submit a simple form to the same page but when it is submitted it will call PHP function on the same page. However I was trying to do some JavaScript validation before submission. So I want to know what the difference between using onSubmit call js function in the form tag and onClick call js function with button.... This is what I am currently trying to do.
<?php
function tobecalled()
{
echo "This was run";
}
?>
<html>
<head><title>Testing</title>
<script type="text/javascript">
function testResults (form)
{
var TestVar = form.inputboxname.value;
if(TestVar == '')
return false;
else
return true;
}
</script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST" onSubmit="return testResults(this);">
<input type="text" name="inputboxname" />
<input type="submit" value="Save" name="submit" />
<?php
if(isset($_POST['submit']))
tobecalled();
?>
</form>
</body
</html>
It works..
But if I make (Submit Via JS)
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
...
<input type="submit" value="Save" name="submit" onClick="return testResults(this);"/>
...
Its still calls the PHP function tobecalled()--Why? I am expecting it not call. How do it work?
The reason that it is allowing it to go through is because you are passing this in the onclick event. In this instance this is referring to the submit button not the form as required by the function.
Thus form.inputboxname.value returns undefined which is not '' (empty string) and therefore the testResults function returns true. So the submit is then activated.
The difference is this. this points to a different object in onClick than in onSubmit. Your function expects a form to be passed, but when you use onClick, you give it the submit button. That's why the second method doesn't work as expected.
Because regardless of whether you add your javascript to the onsubmit of the form or the onclick of the submit button the form will still be submitted by the submit button. That means that a request is being sent back to the server and $_POST['submit'] will be set. Since that variable is set you find your function being called.