<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
return confirm('Hello!');
//return true;
}
</script>
<form method="get">
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' OnClientClick="return changeText2()" value='Change Text'/>
</form>
Is this possible in PHP? I tried it but I get an error. Please suggest a solution.
Not exactly.
PHP doesn't have as complicated a template engine as ASP.NET.
You can simply use the HTML onclick attribute directly. There is no need to use a differently named one on the client because there isn't a server side attribute with the same name getting in the way.
Best practise, however, is to write unobtrusive JS and bind your event handlers programatically.
Related
with the code I have I can echo:<a id='test'>
and it displays what was typed, however I need to make<a id='test'> into a variable so I can use it for mysql query's etc. is this possible at all?
<script type="text/javascript">
function email(){
var input = document.getElementById('input').value;
document.getElementById('text').innerHTML = input;
}
</script>
<html>
<p><input type='text' id='input' value='' />
<input type='button' onclick='email()' value='submit'/></p>
</html>
<?php
$info="<a id='text'>"//make this a variable;
echo $info;
?>
using AJAX with jQuery will help you make a simple call to the server, without page reloading. Then you can send any variables to a PHP file that will store them in your database.
I'm trying to write a simple calculator html page where I ask for two numbers in separate text boxes, have the user click a button and then the result gets stored into a third text box. I'm trying to using PHP to resolve this but can't seem to display it the way I want.
the echo line works fine, but I don't want that;
From HTML
<form action="Add.php" method="get">
<input for='num1' type="text" name="num1" />
<input for='num2' type="text" name="num2" />
<input type="submit" value="Add Them" />
<input type="text" name="AnswerBx" id="SumTotalTxtBx"/>
</form>
Add.php
<?php
$num1 = $_GET["num1"];
$num2 = $_GET['num2'];
$sum = $num1+$num2;
//echo "$num1 + $num2 = $sum";
document.getElementById("SumTotalTxtBx").value = $sum;
?>
You can't mix PHP and JavaScript like that! One is run on the server the other on the client.
You have to echo the value into the value attribute of the text boxes like so
<input type="text" value="<?PHP echo $sum; ?>" />
You are mixing PHP and Javascript here, go back to the PHP manual at : http://php.net/manual and read out how php works and interacts with the user.
Javascript is basicaly run on the client side while PHP is run on the server. You REQUEST php something and it returns a new HTML page for you.
That being said, its a too broad topic to help you fix your error.
Good luck
Using jQuery you can solve it without doing post back's at Server like this
var num1 = parseInt($("input:text[name='num1']"));
var num2 = parseInt($("input:text[name='num2']"));
$('input:text#SumTotalTxtBx').val(num1+num2);
Okay, so PHP is awesomeness, but all of it's calculations are performed on the serverside, not the clientside. Using AJAX, you can execute some of the PHP code back against the server, but I think you may be more interested in javascript for your calculator.
<html>
<head>
<script>
function calculateSum()
{
num1 = parseInt(document.getElementById("num1").value);
num2 = parseInt(document.getElementById("num2").value);
sum = num1 + num2;
document.getElementById("sum").innerHTML = sum;
}
</script>
<body>
<input id="num1" type="text"/><br/>
<input id="num2" type="text"/><br/>
<button onclick="calculateSum()">Submit!</button>
<span id="sum">..the sum is..</div>
</body>
</html>
Javascript is really quite simple, and is absolutely wonderful when programming anything on the clientside. If you want to learn more, I'd suggest you read up on javascript over at w3schools! I hope that helps!!
On my page I have multiple forms all the same as this...
<form class='bill-upd'>
<input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'>
<input type='hidden' value='".$info['id']."' name='billid' id='billid'>
Total <input type='text' id='total' name='total' /><br />
Bill name<input type='text' id='bill-name' name='bill-name' /><br />
bill descriptiion <input type='text' id='bill-description' name='bill-description' /><br />
bill colour<input type='text' id='bill-colour' name='bill-colour' />
<input type='button' value='submit' onClick='updateBill();' />
</form>
I then have my AJAX as so
function updateBill()
{
$.post('update_bill.php', $('.bill-upd').serialize(),
function(data) {
$(this).append(data);
});
};
If I have one form on my page, this works fine, but when there are multiple instances, my same record is being overwritten, can anybody tell me where im going wrong?
Thanks
With the help of #Armatus and #Bricriu I got it sorted, the answer as marked worked, stupidly forgot to wrap it within document.ready
You need a way to specify which bill you're updating, otherwise it just takes all of them. This should work, since we can determine which one it is by which button was clicked.
Edit: I personally would bind the even using jQuery rather than onClick on the element itself:
$(".bill-upd input:submit").click(function(){
var elem = $(this);
$.post('update_bill.php', elem.parent('.bill-upd').serialize(),
function(data) {
elem.append(data);
});
});
If the other forms have the same class .bill-upd the javascript .serlialize() will take values from them also. Make sure the other forms have an alternate class.
What would be better would be if you gave the form a unique id such as id="billform" and then replace $('.bill-upd').serialize() with $('#billform').serialize().
Hope this helps.
EDIT:
Use this:
$(this).parent('.bill-upd').serialize()
to serialize the parent of that which was clicked.
Basically what I'm trying to do is to DYNAMICALLY APPEND elements in a form and save their values to MySQL using PHP so far I've started adding but I don't know how to post their values.. Here is what I've done so far:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script>
$('document').ready(function(){
$('#save').live('click',function(e){
/*
this should be the function that gets and post all elements in php
*/
//maybe the use of $.post or .load() or ajax
});
$('#add').click(function(){
$("<br><input type='text' class='do'name='do'>").appendTo('form');
});
});
</script></head>
<body>
<form> //this was the form that im appending
<input type='text' class='do' name="do"><br>
<input type='text' class='do' name="do"><br>
<input type='text' class='do' name="do"><br>
</form>
<input type='button' id='add' value='[+]'>
<input type='button' id='save' value='go2'><br>
<div id='res'></div>
</body>
</html>
and i want to save all values in database using php so just for example here is the php
<?php
//
mysql_query("INSERT <blablabla HERE>");
?>
please help me with this stuff... thanks..
I think a simple snippet of code can answer this for you:
HTML:
<form method="post">
<input type="submit" id="btn_submit">
</form>
JQuery:
$("#btn_submit").mousedown(function() {
$("form").append("<input name='foo' value='bar'>");
});
PHP:
$myValue = $_POST["foo"];
mysql_query("insert into myTable (foo), ($myValue)");
On every add click, you need to make an ajax call to a page, where (the ajax-called page) the mysql-insert would be performed.
Consider using Jquery.ajax
Instead of trying to append the form while saving the information to a database, why not just pull the list from the database (Holding all significant values), then reload using AJAX after the 'appending', which will programmatically be just adding the value to the end of the database. Voila! Problem solved.
Please refer the jquery form plugin .http://jquery.malsup.com/form/
Here form submitted using ajax , so it will not refresh the form and also you will get all the values posted as what php does
change name of the form text boxes 'do' to do[]
$('#save').live('click',function(e){
/*
this should be the function that gets and post all elements in php
*/
//maybe the use of $.post or .load() or ajax
});
$('#add').click(function(){
$("<br><input type='text' class='do' name='do[]'>").appendTo('form');
});
<form> //this was the form that im appending
**<input type='text' class='do' name="do[]"><br>
<input type='text' class='do' name="do[]"><br>
<input type='text' class='do' name="do[]"><br>**
</form>
<input type='button' id='add' value='[+]'>
<input type='button' id='save' value='go2'><br>
I'm attempting to make it so that when you click a button, it'll add new fields to the page. I know that onclick can only take JS functions so I decided to try my luck making a JS script. At first I had tried to do
<html>
<head><title>multiple line test</title><head>
<body>
<script type="text/javascript">
var texters='';
var num=0;
function newInput(nomnom)
{
texters='';
num=nomnom+1;
for (var i=0; i<nomnom; i++)
{
texters+='<p>\
Please specify a file, or a set of files:<br>\
<input type="file" size="40">\
</p>\
<p>\
Caption : <br> \
<input type="text" size="30">\
</p>';\
}
document.write(texters+'<div>\
<input type="submit" value="Send">\
</div>\
</form>\
<br>' + '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>');
}
newInput(num);
</script>
</body>
</html>
but that didn't work. So I tried instead to add a little bit of php being that I know it better. I tried this :
<html>
<head><title>multiple line test</title><head>
<body>
<script type="text/javascript">
var texters='';
var num=0;
function newInput(nomnom)
{
document.write(<?php
tex='';
for (var i=0; i<=(nomnom); i++)
{
tex.='<p>
Please specify a file, or a set of files:<br>
<input type="file" size="40">
</p>
<p>
Caption : <br>
<input type="text" size="30">
</p>';
}
echo tex . '<div>
<input type="submit" value="Send">
</div>
</form>
<br>' . '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>';
?>);
}
newInput(num);
</script>
</body>
</html>
But I know that won't work because I can't get the variable I'm using for the number of fields to use out of the JS and into the PHP. Is there any way I could force JS to put that number in $_POST so I can retrieve it without having to make another form? Or is there a better way to do what I'm trying to do?
You can set a hidden input field on the form, and have the Javascript populate that.
You should try using jquery http://jquery.com/ or a simialr scripting library as it will make manipulating the DOM much easier. Using jquery you can create an onClick function that will do what you want in a few lines of code:
var onClickAddInput = function()
{
$('div#your_div_id').append('<input type="text" size="30" />');
}
If you need to add more input boxes you could loop the append statement and give the individual input boxes ids that equal the loop number.
As commented PHP is for serverside, javascript for clientside. html is the ui elements which either can create. If you need something done on the server, do it in PHP, if it needs to be done on the client, do it in javascript. Here is a sample of javascript for you.
function newInput(nomnom)
{
var tex='';
for (var i=0; i<=(nomnom); i++)
{
tex+='<p>Please specify a file, or a set of files:';
tex+='<br/><input type="file" size="40"></p>';
tex+='<p>Caption :';
tex+='<br/><input type="text" size="30"></p>';
}
document.getElementById('form_id').innerHTML += tex;
}
when this function is called, it will create a number of new inputs and add them to the form with the id "form_id".