How can I pass variable to contact.php that I can echo on form. I can pass through the form to the email recipient, but, I'm at wits end trying to print to form.
For example, I'd like to set $somevariable="This will be my default Subject", pass the variable through the contact.js and be able in the contact.php receive the variable and use the for the value="#somevaraible" for the subject on the form.
Thanks!
I think you are looking for something like ajax, which will allow you to communicate directly from javascript to PHP scripts. The easiest is probably jquery's implementation of ajax. You are able to pass parameters to your PHP application. https://api.jquery.com/jQuery.ajax/
For example, I can pass any param I want to map.php. With GET this would be the equivalent of calling "map.php?param1=strvalue1¶m2=strvalue2" (in the example) I can then capture these values in PHP by using something like $param1 = $_GET['param1']; In the example, whatever the PHP file displays in response to this is then written to an element with the ID of write. All of what I just mentioned can occur after a page has loaded.
You can call the javascript below as many times as you like with whatever javascript functions you see fit. Just keep in mind it will continue to replace whatever is in ID of write, you just need to update that snipplet of code to update the value of your field.
You need to make sure you include Jquery's library when using this like:
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var request = $.ajax({
url: "map.php",
type: "GET",
data:{ param1 : "strvalue1",
param2: "strvalue2"
},
dataType: "html"
});
request.done(function( msg ) {
$( "#write" ).html( msg );
});
</script>
Related
Hi I'm using Axios to build my first API call app , the API I'm trying to get data from is the Pokemon API database pokeapi.co. The code in my app.js document to make the API call and use the data looks like this:
app.get("/", function(req, res){
res.render("home.ejs");
});
app.get("/data", async(req, res) => {
var inputSearch = req.query.searchTerm;
axios.get('https://pokeapi.co/api/v2/pokemon/' + inputSearch) //The API
.then((body) => {
var pokeData = body.data;
res.render("data.ejs", {EJSpokeData: pokeData});
})
.catch((err) => {
res.send('Data not found', err.statusCode);
})
});`
This links to a form in an ejs document that looks like this:
<form action="/data" method="GET" id="searchForm">
<input type="text" id="searchBox" placeholder="Enter Pokemon name or ID number.." name="searchTerm">
<input type="submit" value="Submit" id="submit">
</form>
The API is called when the user enters either the Pokémon's name or its ID number into the input to be passed to Axios, my system works fine and returns the data I need, however the name can't be capitalized as the name values in the central API are all lower case so capitalizing a name will cause the system to search for a value that isn't in the API and eventually time out the app giving me the error message "localhost didn’t send any data".
This will also occur if the user spells a name wrong or enters an ID number that isn't present in the API. Also, if the user leaves the input field blank a crash occurs as my ejs document tries to process data that is not present. Is there any way to launch some kind error page if the get request doesn't return any data? Is there any way to prevent the submit request being activated if the input field is blank?
I've tried to res.render an error page in the .catch section but it doesn't see to work, can anyone help?
I don't know anything about express specifically so I can't help you with how to render things, but your API questions I can help with.
If we want to call the API with a lower case name that's easy! We don't need to care about what the user types into the input because we can convert it to lower case before calling the API:
var inputSearch = req.query.searchTerm.toLowerCase();
If we want to ignore empty strings, we can use a conditional statement. There are lots of ways to check for empty strings but the easiest is to just say if (myString) {...} because an empty string will evaluate to false while all other strings are true.
if (inputSearch) {
/* ...axios... */
} else {
res.send("Empty search term");
}
I'm using magnific popup and ajax loading content into it and passing values to the ajax content by appending a query string to the url, which works fine except in IE7 (and probably IE8 as well). The reason is very likely the length of the query string, because it works when I shorten it.
So my question is, is it possible to pass it via some sort of data setting and make it use POST instead of GET. Or does it already use post and I just need to use the right method.
This is what I have:
$.magnificPopup.open({
tLoading:"",
modal:false,
type:'ajax',
alignTop:true,
items:{src:urlContainingVeryLongQueryString},
callbacks:
{
ajaxContentAdded:function()
{
...
My test url is 906 characters long in total (well within IE7's 2000ish limit).
ajax.settings option http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type is passed to jQuery.ajax method http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings , e.g.:
$.magnificPopup.open({
tLoading:"",
modal:false,
type:'ajax',
alignTop:true,
items:{src:'http://example.com/ajax'},
ajax: {
settings: {
type: 'POST',
data: {
foo: 'bar'
}
}
}
});
I have a page with a route in the form : :client_id/tarif/:tarif_name
in the corresponding HTML page, I have a <%= collection_select(.....:tarif_name...) which enables to select the name of the tarif to be shown. That works.
How do I instruct to reload the page with the new :tarif_name parameter in the url ?
I thought of using the :onchange option helper with collection_select, but although I managed to execute javascript this way, I find no example of composing and triggering the loading of a url through that option.
Thank you very much for your help
If you are able to run javascript code in the :onchange, then window.location.href = "your_url" will make the redirect.
You will also need the selected value. Your onchange will be something like
function() {
window.location.href = "your_url" + this.value
}
This jQuery selector matches a Rails 3 HTML form for a new model: $('form[id^="new_"]')
I'd like to have a simple focus function run each time a matching form loads. Sometimes the forms are loaded via a simple GET but also via Ajax. In the latter case, the content returned can be either HTML or escaped JS.
I was hoping jQuery would be able to match all cases via the selector, .on(), and the "load" event, but I can't seem to make that work for ANY case. Code:
$(document).ready(function() {
$('form[id^="new_"]').on("load", function(){
console.log("Matched!")
});
})
Any ideas?
Thanks Justice. I'm afraid I wasn't able to get your code to work. I'm using the following callback with the new custom event defined outside it as shown and I don't think the $('form') is triggering the event.
$('.shows-children').bind('ajax:success', function(evnt, data, status, xhr){
var boxSelector = '#' + $(this).data("shows");
$(boxSelector).html(xhr.responseText);
$('form').trigger('customevent');
});
$(document).on('customevent','form[id^="new_"]', function(){
console.log('Matched!')
});
(I'm surprised it seems more involved than expected to have jQuery act on HTML returned in an Ajax response.)
$(document).on("change","form[id^=\"new_\"]" function(){
console.log("Matched!")
});
For delegation, you want to delegate the original selector to a parent, as the event will bubble up.
However, load does NOT bubble up. In this case, change may suffice, but it'll trigger and attempt to see if the delegate is valid every time the document changes.
I would then suggest that you create a custom event after AJAX loads for the form.
Example:
$(document).on("customevent","form[id^="new_"]" function(){
console.log("Matched!")
$.ajax(url, function(response){
//success
$(document).append(response);
$('form').trigger('customevent');
});
});
HTH
I have "file1.js" with the following code where I create a element script to call another js file named test.js
var property = 'email';
var NewScript=document.createElement('script');
NewScript.src="/js/test.js?property="+property;
document.body.appendChild(NewScript);
The code work fine because call (or insert) the file "test.js" my problem is that I also want to send a variable to "test.js" to use it there, I dont know how to send/receive this variable in that way, any help ?
This is what I should have in "test.js"
alert(property);
but how do I receive this variable?
No you can't pass a querystring parameter to a javascript file like that. What I've seen done is to set the variable in script before you create your new javascript file reference. Which is kind of what you are doing above, but you need to declare your property variable outside whatever function you have this code in. So for example if you have this code in a jQuery document ready function it would look something like this:
var property = 'email';
$(document).ready(function () {
var NewScript = document.createElement('script');
NewScript.src = "/js/test.js";
document.body.appendChild(NewScript);
});
This will allow your property variable to stay in scope for your external file. HTML JavaScript Include File Variable Scope