Hi new to coding and scripting, here is what I have:
<html>
<body>
<p align="left"><iframe id="aa" style="HEIGHT: 25px; WIDTH: 227px"src="http://www.html-assets.com/assets/html-building-blocks/php-display-user-ip-address.php" frameborder="0" width="600" name="aa" scrolling="no"></iframe></p>
</br><input type="text" id="ee">
<input type="checkbox" name="dd" value=" onclick="myFunction()"><em>Check the box to copy the IP Address above</em>
<script>
myFunction() {
var x = document.getElementById("aa");
var y =(x.contentWindow || x.contentDocument);
if(dd.oncheck==true){
f.ee.value = y;
}
}
</script>
</body>
</html>
What I am trying to do is have something where the page lists out the IP Address of an end-user. I want the user to have the ability to copy this address into an input field that can be added to a form that can be submitted.
How would I script this? At this point, the object in my iframe is outside my domain; is this impossible to call because of the same origin policy? I am planning on creating this using a .php within our own domain; I will adjust the code accordingly.
Yes, you will have to use a .php file for this.
Once you have created your php file, then insert this code:
<?php
$userip = $_SERVER['REMOTE_ADDR'];
?>
<input type="text" value="" id="textbox1"/>
<input type="button" value="Click me" onClick="document.getElementById('textbox1').value = '<?php echo $userip;?>' "/>
The user's ip will be saved in the variable $userip. Then, when the button is pressed, the textbox textbox1 will be filled with the user's ip address.
I hope this helps!
Related
I have a question from php and I'm not expert in php.
1.I have html page with one form include a text box and submit button .
2.I have a static target url like this : https://example.com/invoice/XXXXXXXXXXXXXX
XXXXXXXXXXXXXX is just numbers and has 14 characters.
*** What I need is that my customer enter its 14 characters number in input text form and when it submit , goes to target url.I want to check input form for entry numbers too.
I make a sample form like this but not work:
<form action="https://example.com/invoice" class="pey-form" method="get">
<input type="text" id="peyid" name="peyid" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="14" ><br><br>
<input type="submit" value="submit">
</form>
What can I do?
As hassan said , you can do this only with javascript.
This will redirect to the url what you desired.
document.querySelector("form").onsubmit = function(){
this.setAttribute("action",this.getAttribute("action")+"/"+document.querySelector("[name=peyid]").value);
}
For example
If document.querySelector("[name=peyid]").value = 12345678901234 The url will look like https://example.com/invoice/12345678901234?peyid=12345678901234
So if you just need to redirect to that url you don't even need form just
<input type="text" id="peyid" name="peyid" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="14" ><br><br>
<input type="button" value="submit">
<script>
document.querySelector("[type=button]").onclick = function(){
location.href = `https://example.com/invoice/${document.querySelector("[name=peyid]").value}`;
}
</script>
Using PHP—to receive a form value, validate it, apply it to a URL, and redirect the client to that location, use $_POST, preg_match(), string interpolation, and header().
/invoice/index.php:
<?php
if ( isset($_POST['peyid']) && preg_match("/^\d{14}$/", $_POST['peyid']) ) {
header("Location: http://www.example.com/invoice/{$_POST['peyid']}");
exit;
}
?>
<html><head><title>oops</title></head><body>An error occurred.</body></html>
I have a site with 3 images (arrows) that send you to another page, therefore:
index.html
-page1.php
-page2.php
-page3.php
For each there are a slider with bootstrap:
<input id="ex1" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>
<input id="ex2" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>
<input id="ex3" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>
I want to send the value of the slider to the other PHP page, for example if I click in the first image and the slider in in 8, when I go to page1.php, I want to see the slider number.
From the index.html, I got the slider values as follows:
$(".slider").click(function(){
var sli1 = $("#ex1").data('slider').getValue();
});
I tough in use $_SESSION to store the values of each slider, but I don't know how to implement it, because the the way to get the slider value is on Jquery and the second page is on PHP.
So, how I store a value in Jquery site and then I access through PHP in different site?
Edit:
I don't get to retrieve the values from the second page. My folder looks like:
-index.html
<tr>
<td>
<div>
<p>ABC</p>
<input id="ex1" data-slider-id='Exsliser' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</td>
<a class="slider" href="slider/slider1.php"><img ></a>
In the same inside :
$(".slider").click(function(){
$sliderID = $(this).closest('div').find('input').attr('id');
$sliderValue = $(this).closest('div').find('input').data('slider').getValue();
alert($sliderID +' - '+$sliderValue);
//Send values to PHP script that updates them in $_SESSION
$.post("session_val.php",{sliderID:$sliderID, sliderValue:$sliderValue});
});
And in slider1.php:
<?php
session_start();
$val = $_SESSION['ex1'];
echo "<script type='text/javascript'>alert('$val');</script>";
?>
I have put session_start(); at the beginning of both files. The session_val.php file is in the same folder that index, but in other folder that slider1.php
For the arrow buttons that take you to another page, you could fire them with Javascript using "onclick". That would let you grab the value of the slider and pass it as a GET variable in the URL.
The below code assumes all the pages are in the same directory, so uses relative paths. You can easily adapt to your actual file structure -- or use absolute paths if necessary.
HTML:
<a onclick="get_slider('page2','ex2')">Page 2</a>
JS:
function get_slider(page,sliderID) {
//Get value of specified slider
$slideValue = $("#" + sliderID).data('slider').getValue();
//Build the url, with page name, then slider value passed as parameter
$url = page + ".php?slider=" + $slideValue;
//Send user to the proper page
window.location = $url;
}
PHP:
On the destination page, you can get the slider value like this:
<?php $sliderValue = $_GET['slider']; ?>
EDIT: Reflecting my comment below, forget the stuff above and use ajax instead:
slider-value.php
Simple script that takes two passed variables and updates the related $_SESSION variable.
<?php
/*** Your database connection string here ***/
//Get passed values
$sliderID = $_POST['sliderID'];
$sliderValue = $_POST['sliderValue'];
//Put them into $_SESSION variable
$_SESSION[$sliderID] = $sliderValue;
?>
Javascript:
$('[data-slider-id]').change(function() {
//Get slider's ID and value
$sliderID = $(this).attr('id');
$sliderValue = $(this).data('slider').getValue();
//Send values to PHP script that updates them in $_SESSION
$.post( "slider-value.php",{sliderID:$sliderID, sliderValue:$sliderValue});
});
I would suggest you wrap the input in a form.
<form action="page2.php" method="post">
<input type="range" name="input1">
<button type="submit">Next page</button>
</form>
This way when the user submits the form you will have access to the value in the input via $_POST['input1'].
You can take a similar approach for the rest of the pages. You are basically implementing a multistep form.
I feel i am missing a crucial link in my design and i was hoping some fine programmer could fill me in (this is not really my field of experience)
What I have
page - form.html
<div style="text-align:left">
<form action="addtoserver.php" method="post">
Server Name: <input type="text" name="servername"><br>
<br>
Server Address: <input type="text" name="serveraddress"><br>
<br>
Port Number: <input type="text" name="portnumber"><br>
<br>
Server Description :<TEXTAREA NAME="description" ROWS=3 COLS=30 ></TEXTAREA>
<br>
<input name="Submit" type="submit" value="Add Server" />
</form>
<div style="text-align:left">
page - addtoserver.php
<html>
<body>
Server Name :<?php echo $_POST["servername"]; ?><br>
<br>
Server Address : <?php echo $_POST["serveraddress"]; ?><br>
<br>
Port Number : <?php echo $_POST["portnumber"]; ?><br>
<br>
Server Description : <?php echo $_POST["description"]; ?><br>
<?php
$ip = $_POST['serveraddress'];
$port = $_POST['portnumber'];
if (!$socket = #fsockopen($ip, $port, $errno, $errstr, 30))
{
echo "<centre><font color='red'><strong>Server Is Offline!</strong></font></center>";
}
else
{
echo "<centre><font color='green'><strong>Server Is Online!</strong></font></centre>";
fclose($socket);
}
?>
</body>
</html>
Everything is all gravy
Purpose
I designed this for the purpose of my website a user will click a link "Add server" and will be directed to the form page, they will fill out the form page and once submitted be directed to the addserver.php page.
On this page i wont the post to pertinently stay there and the next user to to come in and add his server and for that post to be listed underneath.
My Dilemma
I am not sure what the next step is to take, would i have to add the users input to Mysql and then export it from Mysql to the page or is there another way. would i have to rite a PHP script in order to get the posts to come in one after the other if imported from the data base.
I am not sure what the next step is to take, would i have to add the users input to Mysql and then export it from Mysql to the page?
If you require persistent data then you'll sure need some static storage such as a database or a XML file. In both way, yes you want to store the user input into it (make sure you fully understand the security need behind such an action) and then retrieve it from there.
I have a small html file working in the frame of a website. It currently requests a zip code and then calls a php page to query the database. The iframe gets the id number from the parent page and then gets the zip code from its own page. Here is the code snippet.
<script>
pid = window.location.search;
pid = pid.substring(11,16)
htmlout = '<input type = "hidden" name = "productid" id = "productid" value = "' + pid + '">';
</script>
<body style="margin: 0px; background-color: #ECECEC;">
<form action="https://www.net10wirelessphones.com/Mini-zip-Lookup.html" style="text-align: left" method = "get">
<script>
document.write(htmlout);
</script><span style="font-size: 9pt"><span style="font-family: Arial, Helvetica, sans-serif; color: #444444">Verify coverage in your area. Enter your Zip Code:
</span>
</span>
<input name="zip" size="5" type="text" />
<input type="submit" value="GO" /> </form>
However, When I enter the zip code 00631, it only goes to the site
http://www.net10wirelessphones.com/Mini-zip-Lookup.html?zip=00631
It seems to be cutting off the hidden value from the form. Any suggestions on what I may be doing wrong?
Edit: For those of you wanting to try it out, try it with the zip code 00631 and the product id 17637. It should accept this option and direct to the zipsuccess page.
Edit: Also, if you want to see it from the start go to the page https://www.net10wirelessphones.com/zipstart.html?productid=17637. Sorry I forgot to include it for those who have been trying it out.
You don't need to do that. Here is a better alternative
<script>
pid = window.location.search;
pid = pid.substring(11,16)
//here is the changes
document.getElementById("productid").value = pid;
</script>
<form action="https://www.net10wirelessphones.com/Mini-zip-Lookup.html" style="text-align: left" method = "get">
<input type = "hidden" name = "productid" id = "productid" value = "" />
<span style="font-size: 9pt"><span style="font-family: Arial, Helvetica, sans-serif; color: #444444">Verify coverage in your area. Enter your Zip Code:
</span>
</span>
<input name="zip" size="5" type="text" />
<input type="submit" value="GO" /> </form>
I manually supplied productid as a GET parameter to your zipfail.html page. It's putting the value into the hidden input field just fine. It's also passing it to Mini-zip-lookup.html without flaw. It appears that either:
You're not be providing the productid in the frame's url.
Or the relevant code on that page is different from zipfail.html
Make sure the iframe's url has ?productid=?<number> on the end.
I got the program to work. It turns out the problem was in another form that sent to this page. I had to make a slight change to a name attribute..
This:
<input name="id" id="productid" type="hidden" value="" />
Changed to:
<input name="productid" type="hidden" id="productid" value="" />
And it worked fine. Thanks guys for your help!
I had a very similar problem and changing the names as stated above fixed it...to a point. I thought it might be useful to include what was actually the issue. I had my variables being set backwards. I was resetting the $_POST variable with a blank value every time. I was trying to add the $_POST values to an array and had it thus:
$_POST['varname'] = $my_array['varname'];
Once I changed it to:
$my_array['varname'] = $_POST['varname'];
It worked perfectly. Hopefully my time spend staring at this silly mistake will save someone else from doing the same.
What is the best way to gray out text inputs on an HTML form? I need the inputs to be grayed out when a user checks a check box. Do I have to use JavaScript for this (not very familiar with JavaScript) or can I use PHP (which I am more familiar with)?
EDIT:
After some reading I have got a little bit of code, but it is giving me problems. For some reason I cannot get my script to work based on the state of the form input (enabled or disabled) or the state of my checkbox (checked or unchecked), but my script works fine when I base it on the values of the form inputs. I have written my code exactly like several examples online (mainly this one) but to no avail. None of the stuff that is commented out will work. What am I doing wrong here?
<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
<script type="text/javascript">
function disable_enable(){
if (document.form.mail_street_address.value==1)
document.form.mail_street_address.value=0;
//document.form.mail_street_address.disabled=true;
//document.form.mail_city.disabled=true;
//document.form.mail_state.disabled=true;
//document.form.mail_zip.disabled=true;
else
document.form.mail_street_address.value=1;
//document.form.mail_street.disabled=false;
//document.form.mail_city.disabled=false;
//document.form.mail_state.disabled=false;
//document.form.mail_zip.disabled=false;
}
</script>
EDIT:
Here is some updated code based upon what #Chief17 suggested. Best I can tell none of this is working. I am using value as a test because it works for some reason
<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
<script type="text/javascript">
function disable_enable(){
if (document.getElementById("mail_street_address").getAttribute("disabled")=="disabled")
document.form.mail_street_address.value=0;
//document.getElementById("mail_street_address").removeAttribute("disabled");
//document.getElementById("mail_city").removeAttribute("disabled");
//document.getElementById("mail_state").removeAttribute("disabled");
//document.getElementById("mail_zip").removeAttribute("disabled");
else
document.form.mail_street_address.value=1;
//document.getElementById("mail_street_address").setAttribute("disabled","disabled");
//document.getElementById("mail_city").setAttribute("disabled","disabled");
//document.getElementById("mail_state").setAttribute("disabled","disabled");
//document.getElementById("mail_zip").setAttribute("disabled","disabled");
}
</script>
Unfortunately, since you're doing it in response to user input without a form being sent back to the server, you have to do it through JavaScript.
input elements in JavaScript have both readonly and disabled attributes. If you want them completely disabled, you need to use JavaScript (or a library like jQuery) to change the disabled attribute's value to "disabled".
Note that the disabled inputs will not have their values sent to the server when the form is submitted.
Deleted my other post entirely and replaced with all the code you should need:
<script type="text/javascript">
function disable_enable()
{
if(document.getElementById("checkbox").checked != 1)
{
document.getElementById("input1").removeAttribute("disabled");
document.getElementById("input2").removeAttribute("disabled");
document.getElementById("input3").removeAttribute("disabled");
document.getElementById("input4").removeAttribute("disabled");
}
else
{
document.getElementById("input1").setAttribute("disabled","disabled");
document.getElementById("input2").setAttribute("disabled","disabled");
document.getElementById("input3").setAttribute("disabled","disabled");
document.getElementById("input4").setAttribute("disabled","disabled");
}
}
</script>
and
<label>Mailing address same as residental address</label>
<input id="checkbox" onClick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
<input type="text" id="input1" />
<input type="text" id="input2" />
<input type="text" id="input3" />
<input type="text" id="input4" />
Basically, loop through inputs, check if they're checkboxes, add event handlers...
Working sample in plain old javascript:
http://www.theredhead.nl/~kris/stackoverflow/enable-or-disable-input-based-on-checkbox.html
the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Enable/disable input based on checkbox</title>
<script type="text/javascript">
// setup a bit of code to run after the document has loaded. (note that its set on window)
window.addEventListener('load', function(){
potential_checkboxes = document.getElementsByTagName('input');
for(i = 0; i < potential_checkboxes.length; i ++) {
element = potential_checkboxes[i];
// see if we have a checkbox
if (element.getAttribute('type') == 'checkbox') {
// initial setup
textbox = document.getElementById(element.getAttribute('rel'));
textbox.disabled = ! element.checked;
// add event handler to checkbox
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById(this.getAttribute('rel'));
// set disabled property of textbox to not checked property of this checkbox
textbox.disabled = ! this.checked;
}, false);
}
}
}, false);
</script>
</head>
<body>
<h1>Enable/disable input based on checkbox.</h1>
<form>
<label for="textbox_1">
Textbox 1:
<input id="textbox_1" type="text" value="some value" />
</label>
<br />
<input id=="checkbox_1" type="checkbox" rel="textbox_1" />
<label for="checkbox_1">Enable textbox 1?</label>
<hr />
<form>
</body>
</html>
The easiest way is to use JavaScript to enable or disable the form elements when the checkbox's checked status is changed.
That said, you will still need to filter for that checkbox when handling the post on the server, as some browsers will have JS turned off and thus the change will not happen