I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.
Related
I am playing around with some HTML and JavaScript with the end goal of creating a simple website that displays the current weather. I haven't used API's before and I have limited knowledge of JavaScript so this might be a very bad question. Can I change the endpoint address based on a user input?
I have written some front-end which displays a simple form.
<section id="weather">
<div id="nav">
<div id="locate">
<div id="container">
<form action="index.js">
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<input type="submit" value="Let's Go!">
</form>
</div>
</div>
<div id="output">
<div id="container">
<!-- Output of API -->
</div>
</div>
</div>
</section>
I was thinking that this could run a JavaScript file that gathers the input of the form HTML file and do something like this:
const location = document.getElementById(location)
http://api.openweathermap.org/data/2.5/weather?q=${location}&APPID=API
I tried programming something to do this but as I have limited knowledge of both javascript and API's I keep failing. Before I was a lot of time on this can someone tell me if this is even possible?
By the way I have set-up an API key but I just haven't shown it.
Thanks,
mrt
So this is just a very lengthy way to do it so that you can understand each step
Step 1: First you want to get access to the input element:
const locationInput = document.getElementById("location");
Step 2: Then you want to grab the value of that input element
const locationValue = locationInput.value;
Step 3: Then you'd want to use that value in the URL
const url = http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API
function fetchAPIData() {
const locationInput = document.getElementById('location');
const locationValue = locationInput.value;
const url = `http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API`
// do the URL Request
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('input[type=submit]').addEventListener('click', fetchAPIData);
});
<section id="weather">
<div id="nav">
<div id="locate">
<div id="container">
<form action="index.js">
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<input type="submit" value="Let's Go!">
</form>
</div>
</div>
<div id="output">
<div id="container">
<!-- Output of API -->
</div>
</div>
</div>
</section>
A much shorter way would be:
const url = `http://api.openweathermap.org/data/2.5/weather?q=${document.querySelector("#location").value}&APPID=API`;
there is website which has:
<html>
<body>
<form action="/action_page.php">
First name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="John"></strong></div>
Last name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="Miller"></strong></div>
Email: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="j.miller#gmail.com"></strong></div>
<input type="submit" value="Send">
</form>
</body>
</html>
Is it possible to scrape data from input value (John, Miller, j.miller#gmail.com) and show it in my page (maybe putting that site into iframe and scrape from it?) or maybe using something like:
// Get HTML from page
$.get( 'http://example.com/', function( html ) {
// Loop through elements you want to scrape content from
$(html).find("ul").find("li").each( function(){
var text = $(this).text();
// Do something with content
} )
} );
I don't know. I am not good with javascript. And there is bonus: input values on every refresh are different. Can I extract somehow data from 100 refresh or something? Thank you for any help!
i will assume that you need to get the data from the input element and then use it somewhere else in your site
you could easily do so using the jquery .val() function
here is some sample code
<form id="my-form">
name: <input type="text" id='test-input'/>
<input type="submit" />
</form>
<script>
var input;
$('#my-form').on('submit', function() {
input = $('#test-input').val();
});
</script>
you could then use the variable anyway you want, whether it is to cache data or for improving user experience
Get the value and var _value = $('#elementId').val(); and use it anywhere on the page $('#elementID').val(_value); or $('selector').text(_value);
In my google app script, i have an html page with a form whose action attribute is created dynamically based on the input values (with javascript) and i create the action url with parameters. After that i insert some input value , the action url is correctly created (i inspected code), but when i click on submit button , the action url open but without parameters.
i tried with method get, post but i have the some result, new url is opened but without parameter, only with "?" character. But if i do the same procedure with a link and href attribute, it works fine. I noticed that parameter not arrive to doget function
include file index.html and app.gs
<form id="myForm" action="#">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Numero" id="numero">
</div>
<div class="col">
<div class="form-group">
<select id="tipologia" class="form-control">
<option selected>Tipologia supporto</option>
<option >concorsi</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn-get-started scrollto">Richiedi assistenza Form</button><!--NOT WORK-->
</form>
Richiedi assistenza<!--WORK-->
<script>
document.getElementById("tipologia").addEventListener("change", redirect);
function redirect(){
var nome =document.getElementById("nome").value;
var numero =document.getElementById("numero").value;
var opzioni = document.getElementById("tipologia");
var selezionato = opzioni.options[opzioni.selectedIndex].value;
document.getElementById("btn").href="https://script.google.com/macros/s/AKfycbxia-_rMYlvVjrlyGGd7zRcb1CD5hSYe6W-mLldzxY__8I2b3Q/exec?supporto="+selezionato+"&controllo="+numero+"&nome="+nome;
document.getElementById("myForm").action ="https://script.google.com/macros/s/AKfycbxia-_rMYlvVjrlyGGd7zRcb1CD5hSYe6W-mLldzxY__8I2b3Q/exec?supporto="+selezionato+"&controllo="+numero+"&nome="+nome;
}
</script>
function doGet(e) {
Logger.log(e.parameter.supporto);
var supporto = e.parameter.supporto;
var numero= e.parameter.controllo;
var nome= e.parameter.nome;
}
i don't understand why the parameters disappear
When you submit a form with method="GET" (the default), the URL specified in the action is used as a base.
The query string (which you added using JavaScript) is removed from it and it is replaced with one constructed with the data from the successful form controls.
Since none of your form controls have a name, none are successful, so there is no data. This gives you a blank query string.
Don't try to set the action with JavaScript (which you are doing incorrectly: The DOM action property expects a plain URL, not an HTML encoded one).
Just set the base URL in the action attribute and give the form controls names.
<form id="myForm" action="https://script.google.com/macros/s/AKfycbxia-_rMYlvVjrlyGGd7zRcb1CD5hSYe6W-mLldzxY__8I2b3Q/exec">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" name="controllo" placeholder="Numero" id="numero">
</div>
<div class="col">
<div class="form-group">
<select id="tipologia" name="supporto" class="form-control">
<option selected>Tipologia supporto</option>
<option>concorsi</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn-get-started scrollto">Richiedi assistenza Form</button>
</form>
NB, your code includes var nome =document.getElementById("nome").value;
but there is no matching id in your HTML. This would cause your JS to error.
So, I'm a bit in unfamiliar territory with json and remote calls but the url and datatype is correct and... it is clearly arriving at target. BUT.!
It's a very simple form with 3 visible and 2 hidden fields.
<form id="subChange" action="#" method="POST">
<div style="clear:both;">first name</div>
<div>
<input id="fart" type="text" style="margin:4px;width:90%;" name="newFirst" value="" data-validetta="required,characters,remote[check_update]">
</div> last name<BR>
<div>
<input type="text" style="margin:4px;width:90%;" name="newLast" value="" data-validetta="required,characters,remote[check_update]">
</div> eMail<BR>
<div>
<input type="hidden" name="oldName" value="Conor" data-validetta="remote[check_update]">
</div>
<div>
<input type="hidden" name="oldEmail" value="cburkeg#gmail.com" data-validetta="remote[check_update]">
</div>
<div>
<input type="text" style="margin:4px;width:90%;" name="newEmail" value="" data-validetta="required,email,remote[check_update]">
</div>
<div style="margin-top:12px">
<input type="submit" name="sub_change" value="change it" data-validetta="remote[check_update]">
</div>
</form>
Here is the js
<script type="text/javascript">
$(function(){
$("#subChange").validetta({
realTime : true,
bubbleLoc:"right",
onValid : function( event ){
event.preventDefault();
$("#changeDIV").html("thanks Conor <P>Your subscription has been updated");
},
remote : { check_update : { type : "POST", url : "checkNewsUpdate.php", datatype : "json" }}
});
})
</script>
With fields filled we test Submit; name='sub_change' value='change it'
if (isset($_POST['sub_change'])) {
$count = count($_POST);
$postdata = file_get_contents("php://input"); //... write to file, etc.
}
output -
$count: 1
$postdata: sub_change=change+it
What happened to the other fields?
My only current working solution is to set each field with the remote call and set a $_POST validation (done auto., in real time) for each input which writes to a remote file. On submit we then call the contents of that file. Only trouble is it misses the 2 hidden files - there is no auto trigger :(
This is a clumsy work-around (that doesn't even work).
I thought about setting the hidden fields as an ID but getting the value with PHP is a trial. There must be something real simple I am missing here.
I have the following javascript code:
game.bind('gameover', function(seconds) {
setTimeout(function() {
var rank = game.getRank(seconds);
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('.rank').text(rank[0]);
scorecard.find('.byline').text(rank[1]);
...more code
In the following div this data is displayed (so the js script is working):
<div class="inner">
<h3>Nice job! Your time:</h3>
<h1 class="wobble time"><!-- 15 seconds --></h1>
<h2 class="rank"><!-- Friendly Mallard --></h2>
<h3 class="byline"><!-- (That's pretty good) --></h3>
</div>
Now I want to put the results also in a form so I can post it to the a database (mysql). So I've added a form and put it in the same div:
<form id="form" action="updatescore.php" method="post">
<input type="text" id="time" name="time" value="" />
<input type="text" id="rank" name="rank" value="" />
<input type="text" id="byline" name="byline" value="" />
</form>
Now in the JS I've copied the lines (e.g. scorecard.find('.time').text(seconds + ' sec');) and changed it to look for the id, so . becomes # and passed it in the js like:
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('#time').text(seconds + ' sec');
etc
So this should work I think, but the form inputs stay empty. What am I doing wrong?
Kind regards,
Maurice
If you are just looking to move js variables into your database via updatescore.php you don't need to use a form at all! You can do it with AJAX.
var scoreData = {
time : time,
rank : rank[0],
byline : rank[1]
};
$.post('updatescore.php', scoreData); //done!
Use val() instead of text() for setting the values