I am fine getting the value of a form controls such as radio and select for example but with all of the additional non form based controls available for Bootstrap i haven't really seen many PHP examples how to use these.
So my main question is with pure PHP how would you retrieve the current selected item from a div and li based dropdown?
http://www.bootply.com/b4NKREUPkN
or a custom color picker plugin?
http://bootstrapformhelpers.com/colorpicker/#jquery-plugins
If you are submitting a form and handling the request using PHP, you will not be able to access the DOM in PHP (client vs server). If you can pull out the bits that you need using javascript, you can set the values on hidden form elements and submit.
<?php
// print out the value when the post is submitted
if (isset($_POST["extraInput"])) {
echo "hidden input is: " + $_POST["extraInput"];
}
?>
<html>
<head>
<script type="text/javascript">
function doSubmit () {
var extraValue = document.getElementById("extra").innerHTML;
var form = document.forms["myForm"];
form.elements["extraInput"].value = extraValue;
form.submit();
}
</script>
</head>
<div id="extra">Hello world</div>
<body>
<form id="myForm" action="" method="post">
<input type="hidden" name="extraInput" />
<input type="text" name="textInput" />
<button onclick="javascript:doSubmit()">Submit</button>
</form>
</body>
</html>
Related
I'm learning AJAX and want to create a really simple web app to use my knowledge in the "real world".
I'm trying to calculte different percentages of a user input value, and make it appears on the webpage, without refreshing, thanks to AJAX.
Here is my HTML form:
<form id="warmupForm" class="form">
<label for="userWorkLoad">Work load (in kgs)</label><br>
<input type="text" name="userWorkLoad" id="userWorkLoad">
<button type="submit">Calculate</button>
</form>
<div id="#output">This is where I want the result to be shown with AJAX</div>
Here is some of my PHP code, for you to get the idea:
# Get the user input (work load in kgs)
if (isset($_POST['userWorkLoad'])) {
$workload = $_POST['userWorkLoad'];
# Avoid JS hacking
$workload = htmlspecialchars($workload);
}
# CALCULATION #
# Calculate 55% of the work load (1st warm up set)
$FirstWarmupSet = ($workload * 0.55);
# Calculate 70% of the work load (2nd warm up set)
$SecondWarmupSet = ($workload * 0.7);
# First Warmup set #
echo "<li>Do 8 reps with " . $FirstWarmupSet . " kgs, then take 1 minute rest.</li>";
echo "<br>";
# Second Warmup set #
echo "<li>Do 5 reps with " . $SecondWarmupSet . " kgs, then take 1 minute rest.</li>";
echo "<br>";
// etc etc...
I'd like the different variables values from PHP to be shown in my "#output" div when the user click on the submit button.
I've tried a lot of different things (AJAX without jQuery, AJAX with jQuery), but didn't manage to get what I want.
I'm sure I'm doing something wrong, but I don't know what. I'm sure my PHP script is working, since I used it without AJAX without any problem.
I would be very grateful if someone could help me on that.
As mentioned above, the easiest way to make an AJAX request for you is probably to try jQuery:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Add jQuery on your HTML page -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Add some custom JavaScript file -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form id="warmupForm" class="form">
<label for="userWorkLoad">Work load (in kgs)</label><br>
<input type="text" name="userWorkLoad" id="userWorkLoad">
<button id="btn" type="submit">Calculate</button>
</form>
<div id="output">This is where I want the result to be shown with AJAX</div>
</body>
</html>
The script.js content:
$(function() {
// Process a button click
$("#btn").click(function() {
event.preventDefault();
// Get input field
var userWorkLoadInput = $("#userWorkLoad");
// Build some request parameters
var params = {
userWorkLoad: userWorkLoadInput.val()
};
// Let's name your PHP script file as "server.php"
// And send POST request with those parameters
$.post("server.php", params, function(response) {
// Response text we're going to put into the `output`
$("#output").html(response);
});
});
});
You can simply do it using Jquery instead of using Ajax (using PHP you should add method="POST" to the form).
Here's an example:
$(document).ready(function(){
$("#send").click(function(){
// your calculates
$("#output").html(...);
});
});
...
<button type="submit" id="send">Calculate</button>
I am trying to write an interactive web page and learn newer (10 years or less) web technologies along the way. So PhP, jquery and AJAX all fall into that category. I've pared down the code to just the essentials to ask this question.
I want my jquery to call a PhP program that will load two separate DIVs. One is a data display area and the other is used to display the next form in the process chain. The trouble I'm having is that the form I'm returning isn't functional, even though it displays properly.
This is the main page (demo.php):
<?php
echo <<<_END
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
//
$(document).ready(function(){
$("#btnDemo").click(function() {
$("#PageForm").load("thetest.php", { paramYN: $("#paramYN").val() })
$("#PageContent").load("nextpage.php");
});
});
</script>
</head>
<title>The Title</title>
</head>
<body>
<div id="PageHdr">
<H4>Heading</h4>
</div>
<div id="PageForm">
<form action="" id="Login">
<br/>
To show this form again enter Y otherwise enter N : <input type="text" name="paramYN" id="paramYN" size=1>
<input type="button" name="btnDemo" id="btnDemo" value="test it" /></form>
</div>
<div id="PageContent">
<P>Put response here</p>
</div>
</body>
</html>
_END;
?>
Here's the PhP program "thetest.php" which decides what to return into the PageForm DIV:
<?php //thetest.php
paramYN = $_POST["paramYN"];
if ($paramYN == "Y")
{
echo <<<_EOF
<form action="" id="Login">
<br/>This is the redisplay. Look for the date to change if it works after you click the test it button
<br/>To show this form again enter Y otherwise enter N : <input type="text" name="ParamYN" id="paramYN" size=1>
<input type="button" name="btnDemo" id="btnDemo" value="test it" /></form>
_EOF;
$thetime = time();
echo $thetime;
exit();
}
else
{
echo "<html><head><title>PDO login</title></head><body>";
echo "<h1>Congrats!</h1>";
echo "</body></html>";
exit();
}
?>
I only included the nextpage.php program because the full version of my program needs to update both DIV's. For the purpose of this demo it's as simple as this:
<?php //.php
echo "<h1>This is the new text for this place</h1>";
?>
So what is my problem here? Is it something in the way that I'm loading the DIV? Or is this something that is not doable?
When your page first loads you use jQuery and "bind" a click event to your button "btnDemo".
The user then clicks the button "btnDemo" and triggers the load events. However, by doing this you are overriding your previously loaded button with the established jQuery events with a NEW button "btnDemo". This NEW button does NOT have the same bound click events.
You will need to re-apply the click events to the newly loaded button after it loads by adding the jQuery to the loading page "thetest.php".
echo <<<_EOF
<script>
$(document).ready(function(){
//this will bind the click event to the newly loaded button
$("#btnDemo").click(function() {
$("#PageForm").load("thetest.php", { paramYN: $("#paramYN").val() })
$("#PageContent").load("nextpage.php");
});
});
</script>
<form> (the rest of your form here...)
_EOF;
You have:
<?php //thetest.php
paramYN = $_POST["paramYN"];
if ($paramYN == "Y")
{
Try:
<?php //thetest.php
$paramYN = $_POST["paramYN"];
if ($paramYN == "Y")
{
I have two file code_generator.html. which takes input as a image url and landing url when i click on submit button it calls code_created.php
<html>
<head>
</head>
<body>
<form action ="code_created.php" method ="post">
Image : <input type ="text" name ="image">
Landing Url : <input type ="text" name="landingurl">
<input type= "submit">
</form>
</body>
</html>
I want to show generated code as below on web page
<div id='banner-img' style='display:none;text-align:center' onclick='landing()'><img style='text-align:center' id='bannerImage'/>
<img id='t'/>
<img id='trackeridImg' style='display:none;width:0px;height:0px'/>
</div>
<script type="text/javascript">
function showAd() {
document.getElementById('banner-img').style.display = 'block';
document.getElementById('bannerImage').setAttribute('src',IMAGE URL SUBMITTED FROM HTML FILE);
</script>
problem is that webpage is not showing that code generated code ,webpage is rendering that code , I want to only show that generated code.
1-how to do it using html and php
2-is my approach is right
You can use tag to show HTML entities You need to encode all
Your HTML entities like < => < like way.
Also you can show a text area in which all those HTML code need to echo, it will not execute your code simply it will print it.
I'm working on a simple webpage for a company and the company wants to be able to edit the content themselves from time to time. However they have no programing knowledge and therefore I want to use an embedded HTML editor, I have chosen jQuery TE.
The problem is that I only know how to use this as a form, e.g.:
<form id = "wyForm" method="post" action="test.php">
<textarea class="editor"name = "testText">Hi</textarea>
<input type="submit" class="wymupdate" />
</form>
Then I would convert the textarea to an editor with jQuery:
<script> $('.editor').jqte() </script>
This makes it possible to send the result to a .php page that updates the database. However many times I don't want to use a textfield or a form, but just a simple object that I convert to an editor in the same way. But how do I save the change in that case?
Catch the form submit event and copy the content to a hidden field.
<form id = "wyForm" method="post" action="test.php">
<div class="editor" name="testText">Hi</div>
<input type="submit" class="wymupdate" />
<input type="hidden" id="editorHiddenField" />
</form>
...
$('#wyForm').submit(function() {
$('#editorHiddenField').val($('.editor').html());
});
You may need to use an API to get the content instead (I'm not familiar with the plugin), but the concept is sound.
Edit - If you don't want to use a form at all:
<div class="editor></div>
<button id="SaveButton">Save</button>
...
$(document).ready(function() {
$('#SaveButton').click(function(e) {
e.preventDefault();
$.post('savepage.php', { data: $('.editor').html() }).done(function() { alert('saved!'); });
});
});
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..!!