I am currently running JavaScript after a click of a button in my PHP page which saves data.
a.js:
function save(){
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
var newItem = {};
var num = document.getElementById("num").value;
newItem[num] = {
"methv": document.getElementById("methv").value
,'q1': document.getElementById("q1").value,
'q2':document.getElementById("q2").value,
'q3':document.getElementById("q3").value,
'q4':document.getElementById("q4").value,
'comm':document.getElementById("comm").value
};
oldItems.push(newItem);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));
$.post('edit.php', { items: JSON.stringify(oldItems) }, function(response) {
});
In the PHP page, my form looks like this:
edit.php
<form action="" method="post" enctype="multipart/form-data">
<select name="methv" class="textfields" id="methv" style="width:110px" >
<option value= "dont know">dont know </option>
<select name="q1" class="textfields" id="q1" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q2" class="textfields" id="q2" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q3" class="textfields" id="q3" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q4" class="textfields" id="q4" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<textarea rows="4" cols="40" id="comm" name="comm" style="width:300px"><?php echo $post['addcomment'] ;?></textarea>
</form>
When I run the PHP page and click the button, in the console, I get a post:
[{"1173627548":{"methv":"dont know","q1":"-","q2":"-","q3":"U","q4":"-","comm":""}},{"1173627548":{"methv":"dont know","q1":"-","q2":"-","q3":"U","q4":"-","comm":""}}]
These are the results from the local storage- one from before and one after it- being clicked (adds every time the button is clicked). How do I get this information and display it on the PHP page?
Do you already have an edit.php file to handle the POST request? This link might help you if not. http://edwin.baculsoft.com/2011/12/how-to-handle-json-post-request-using-php/
Once edit.php is set up to handle the request and return data, you'll probably want to manipulate that data within your response function.
$.post('edit.php', { items: JSON.stringify(oldItems) }, function(data) {
// Do something here, for example...
alert(data);
});
Hopefully this is what you're looking for.
Related
I have a problem with my code, when i clicked option and refresh browser will give back to default option
html
<select id="harga">
<option value="renceng" isi="10" selected>Renceng</option>
<option value="pack" isi="40">Pack</option>
<option value="dus" isi="800">Dus</option>
</select>
<input id="hasil" type="text" name="harga" placeholder="isi" value="10" readonly>
js
$("#harga").on("change", function(){
var nilai = $("#harga :selected").attr("isi");
$("#hasil").val(nilai);
});
Is there a way to pass the text in the name of the <option> to a php from?
<form action="process.php" method="post">
<select name="select1">
<option value="1" name="apple">APPLE</option>
<option value="2" name="lemon">LEMON</option>
<option value="3" name="grapes">GRAPES</option>
</select>
<input type="submit" value="submit"/>
</form>
I want to get the fruits name in simple or capital passed to the php from.
I cannot change the values in the select tag because they are used for another function.
I've searched so many sites but all they say is about passing the text of the value, but not the text of the name.
There is no attribute name in <option> tag
My Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="process.php" method="post">
<select name="select1" id="select1">
<option value="1" name="apple">APPLE</option>
<option value="2" name="lemon">LEMON</option>
<option value="3" name="grapes">GRAPES</option>
</select>
<input type="hidden" id="hidField" name="xyz" value="" />
<input type="submit" value="submit" />
</form>
<script>
//function test(){
var select1= document.getElementById("select1");
$("#select1").change(function(){
//alert(select1.options[select1.selectedIndex].text);
//alert(select1.options[select1.selectedIndex].getAttribute("name"));
var res=select1.options[select1.selectedIndex].getAttribute("name");
document.getElementById('hidField').value=res; //Javascript code
//$('#hidField').val(res); //Jquery code
return false;
});
//}
</script>
If you are sure want to name field is must there please use getAttribue("name") instead of text
Code:
alert(select1.options[select1.selectedIndex].getAttribute("name"));
Want to get inner data of the <option> tag
Code:
alert(select1.options[select1.selectedIndex].text);
You pass the name-Attributes in a separate function with AJAX. All you have to do is to add an ID-Attribute (e.g. "select1") to the select Tag and read out the "textContent" attribute (Fruits in capital letters) of the selected option. Then pass the function "sendToServer" to the "onchange" event of the select-tag.
function sendToServer()
{
var select = document.getElementById("select1");
var sel = select.options[select.selectedIndex];
var name = select.getAttribute("textContent");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
}
}
xmlhttp.open("GET", "../PHPScripts/getData.php?q=name", true);
xmlhttp.send();
}
HTML:
<select name="select1" id="select" onchange="sendToServer();">
<option value="1" name="apple">APPLE</option>
<option value="2" name="lemon">LEMON</option>
<option value="3" name="grapes">GRAPES</option>
</select>
<input type="submit" value="submit"/>
</form>
I know, its not exactly what you asked for, but maybe it helps.
I have created a datalist here how can I add a link to option so that whenever i select a option and click on submit i should redirect to another page based on selected option.I have googled a lot but I couldn't any information about this.Thanks in advance
<input list="category" name="category">
<datalist id="category">
<option value="fruits">
<option value="animals">
<option value="vechiles">
<option value="ornaments">
</datalist>
<input type="submit">
You can try below code :
<input list="category" name="category" id="textcat">
<datalist id="category">
<option id="www.google.com" value="fruits">
<option id="www.fb.com" value="animals">
<option id="www.ymail.com" value="vechiles">
<option id="www.msn.com" value="ornaments">
</datalist>
<input id="btn" type="button" value="submit">
<script>
$('#btn').click(function(){
var textval = $('#textcat').val();
$('#category option').each(function(){
if($(this).val() == textval){
alert($(this).attr('id'));
window.location = $(this).attr('id');
}
});
});
</script>
Make some formHandler.php in which you will some routing, and point your form (action="formHandler.php") that includes this select
$redirectLink=$_REQUEST['category'];
header('Location:'.$yourmainSitePath.'/'.$redirectLink)
Are you satisfied ? :D
i have a radio button option and a select option, the values from drop downs depends on what im selecting in radio buttons, then when i select from drop downs i want it to be redirected to another php page, but its not redirecting properly because my value would be equal to "test1.php Wireline", it has the link plus the class so dropdowns would be filtered...
here are my codes,
<tr>
<td align="center">
<label><input type="radio" name="Radio1" id="Radio1" value="Wireless" />
Wireless</label>
<label><input type="radio" name="Radio1" id="Radio1" value="Wireline" />
Wireline</label></td>
</tr>
<tr>
<td align="center"><select name="Category" id="Category">
<option value=" Wireline Wireless" selected="selected">--</option>
<option value="test1.php Wireline">test1</option>
<option value="test2.php Wireline">test2</option>
<option value="test3.php Wireless">test3</option>
<option value="test4.php Wireless">test4</option>
</select><input type="submit" value="Go" id="submit"/></td>
</tr>
here is my jquery,
$(function() {
$("#submit").hide();
$("#Category").change(function() {
window.location = $(this).val();
})
});
How about using split to get the url
$("#Category").change(function() {
var loc = $(this).val().split(" ")[0];
if(loc)
window.location.href = loc;
})
I added the if so that the first option was null and wouldn't navigate
You may add an attribute for each option which holds the php name page.
APTT
and then in your script:
$("#Category").change(function() {
window.location = $('#Category" :selected').attr('myphp');
})
hope this helps
My solution would be to use a custom attribute to filter and value as URL :
<select name="Category" id="Category">
<option value="test1.php" data-filter="Wireline" selected="selected">--</option>
</select>
And Your code :
$("#Category").change(function() {
if($(this).val().indexOf('.php') != -1) window.location = $(this).val();
})
To acces your filter, you just have to do
$('#Category').children(':selected').data('filter');
Below I have a function which saves variable on a PHP form to a list of objects in javascript
a.js
function save()
{
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
var newItem =
{
'num' : document.getElementById("num").value,
'methv' : document.getElementById("methv").value,
'q1' : document.getElementById("q1").value,
'q2' : document.getElementById("q2").value,
'q3' : document.getElementById("q3").value,
'q4' : document.getElementById("q4").value,
'comm' : document.getElementById("comm").value
};
oldItems.push(newItem);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));
}
How can i display the contents in my php page so i can edit them? (examples of what it will look like printed out is appreciated)
Edit*
These are the values that will be added to the object
<form action="" method="post" enctype="multipart/form-data">
<select name="methv" class="textfields" id="methv" style="width:110px" >
<option value= "dont know">dont know </option>
<select name="q1" class="textfields" id="q1" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q2" class="textfields" id="q2" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q3" class="textfields" id="q3" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q4" class="textfields" id="q4" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<textarea rows="4" cols="40" id="comm" name="comm" style="width:300px"><?php echo $post['addcomment'] ;?></textarea>
</form>
I have only imported a.js and <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You seem to be confusing the roles of PHP and Javascript.
PHP is server-side, meaning that it renders the page (and does any calculations, database calls, etc, if necessary), and then outputs HTML. This is the end of PHP's involvement in a web page.
Javascript is client-side, meaning after a page has been loaded and rendered in a browser, Javascript can get to work modifying elements of the page, if you'd like.
You haven't included any information about the current page structure, so there is nothing we can offer to help you modify your page content using javascript.
You'll have to submit the data to the server via a GET or POST request in order for a PHP script on the server to work with that data. As long as it's just in JavaScript and localStorage, the server (and, hence, PHP) has no idea it exists.
PSTHow about this ?
When you submit your code you rub the function save.
<form action="" onsubmit="save()" method="post" enctype="multipart/form-data">
And you add to you form tag something like the following
<textarea id="SendToPhp" style="display : none"></textarea>
And in you save function you add this as the end
document.getElementById('SendToPhp').innerHTML = object;
Or something like that !
But i this this is what you are missing!
add the following to the end of your form <input type="submit" value="Send To PHP" /> but keep it inside your <form> tag so place it right before </form>
When you click this button you will be send to the php page that should be in the action ex action = "readjs.php" and in that page do print_r($_POST)
The values you need will be stored in the POST.
If you want to do it without reloading the page then you must look in more into AJAX
Hope this helped in any way.
EDITED CODE, Should be $_POST was previously $_GET