I have been trying to develop a simple extension for Safari Firefox and Chrome in wich a form is presented to a user on a pop-up and after being filled out is locally evaluated and the response to the user is defined on that evaluation.
The original form can be found on: https://dl.dropbox.com/u/86545493/Waze/Calculadora.html
I have also already been able to create a working safari extension that can be downloaded here: https://dl.dropbox.com/u/86545493/Waze/Extensions/WRTC.safariextz
but my problems starte when trying to create the chrome extension.
I followed the tutorial for creating a first extension and was able to create a button and load the form as a popup. However the security restrictions do not allow my form to run. From what I have understood by reading the Developers Guide what I need is to separate the javascript in its own file and call it from the popup file. However the language of the documents is too technical for me (med student) and I have been unable to understand the proper way to format the messages that should be used. Here is the current status for my code:
popup.html
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h1>Calculadora de Tipo de Camino</h1>
<form id="Calle" target="_self">
Cruceros <select id="cruceros">
<option value=1>Glorietas</option>
<option value=1>Rotondas</option>
<option value=1>Semáforos</option>
<option value=0 selected>Sin Control</option>
<option value=2>Sin Cruceros</option>
</select></br>
Carriles <select id="carriles">
<option value=1 selected>1</option>
<option value=2>2</option>
<option value=3>3 o más</option>
</select></br>
Sentidos Separados físicamente o parte de par vial <input type="checkbox" id="sentidos"></br>
Con Laterales o Acotamiento <input type="checkbox" id="laterales"></br>
Entradas y Salidas delimitadas <input type="checkbox" id="ramps"></br>
Avenida, Boulevard, o Circuito <input type="checkbox" id="name"></br>
Es Carretera
<select id="carretera">
<option value=0 selected>No</option>
<option value=1>Municipal</option>
<option value=2>Estatal</option>
<option value=3>Federal</option>
</select> Revisar en: SCT</br>
Tiene topes <input type="checkbox" id="topes"></br>
</br>
</form>
<button type="button" onclick="textR()">Calcular Puntos</button>
<hr><p id="resultn"></p>
<p id="resultt"></p>
</body>
popup.js
function textR()
{var cru=document.getElementById("cruceros").value;
if (cru==0){crun=0}
else if (cru==1){crun=1}
else{crun=2}
var carr=document.getElementById("carriles").value;
if (carr==1){carrn=0}
else if (carr==2){carrn=1}
else{carrn=2}
sen=(document.getElementById("sentidos").checked==true)?1:0;
lat=(document.getElementById("laterales").checked==true)?1:0;
ram=(document.getElementById("ramps").checked==true)?1:0;
av=(document.getElementById("name").checked==true)?1:0;
var hw=document.getElementById("carretera").value;
if (hw==1){hwn=1}
else if (hw==2){hwn=2}
else if (hw==3){hwn=3}
else{hwn=0}
saluden=(document.getElementById("topes").checked==true)?1:0;
var r=crun+carrn+sen+lat+ram+av+hwn+saluden;
document.getElementById("resultn").innerHTML=(r+" puntos");
if (r<2){rt='Street'}
else if (r<4){rt='<span class="pstreet">Primary Street'}
else if (r<7){rt='<span class="mihw"> Minor Highway '}
else if (r<9){rt='<span class="mahw"> Major Highway '}
else {rt='<span class="fw"> Freeway '}
document.getElementById("resultt").innerHTML=(rt);
}
Could you please tell me the proper syntax to be used?
Eliminate Inline code onclick="textR()" and add it in popup.js as shown here
document.getElementsByTagName("button")[0].addEventListener("click",textR);
In the end I ended up putting document.getElementById("calcButton").addEventListener("click", textR); at the end of popup.js and had to move <script type="text/javascript" src="popup.js"></script> to the end of the popup.html.
I found this article usefull: Javascript: Uncaught TypeError: Cannot call method 'addEventListener' of null
Related
I am trying to insert the attribute "selected" into the first option (volvo) with Jekyll without writing anything in the form.
I guess I should do it with capture but don't get how it works for passing attributes.
cars.html
<html>
<body>
...
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
...
</body>
</html>
Hello I wants to apply conditional statement in ejs but it is not working in my code "i wants that when i select the a specific value(not using transportation) then buton shows otherwise not show but its showing only - (else condition) on every selection from dropdown" in developer tools it is showing the conditional statement code like this https://ibb.co/60ZWcXh that it is not taking
conditional statement
<%if (locals.students == "noTransportation") { %>
<button type="button" class="btn btn-primary pull-right" onclick="" id="">
Migrate to Applicants
</button>
<%} else { %>
-
<% } %>
complete students_list.ejs
<select class="form-control changeDropDown" id="transportation">
<option value="applications">Applications</option>
<option value="transportation">Using Transportation</option>
<option value="noTransportation">Not Using Transportation</option>
<option value="All">All</option>
</select>
<%if (locals.students == "noTransportation") { %>
<button type="button" class="btn btn-primary pull-right" onclick="" id="">
Migrate to Applicants
</button>
<%} else { %>
-
<% } %>
controller:
in controller the code in comments ////data migration code//// is for this conditional statement but its not working
paste.ofcode.org/RGu9t7Fm3uNPNKiczNP2p9
how can I resolve this issue
If you put a console.log(locals.students) right above the if condition, you'll see (in your node's terminal) that locals.students has a value that's different than noTransportation. Add it like this:
<select class="form-control changeDropDown" id="transportation">
<option value="applications">Applications</option>
<option value="transportation">Using Transportation</option>
<option value="noTransportation">Not Using Transportation</option>
<option value="All">All</option>
</select>
<% console.log("====================", locals.students) %>
<%if (locals.students == "noTransportation") { %>
<button type="button" class="btn btn-primary pull-right" onclick="" id="">
Migrate to Applicants
</button>
<%} else { %>
-
<% } %>
If you want to see that the if actually works properly, you can put, temporarily, instead of the console.log(....):
<% locals.students = "noTransportation" %>
Update:
There's no quick & easy solution that could fit in an answer on stackoverflow for what you currently have.
Some ideas for you to follow:
the code inside <% .. %> is executed on the server.
the selection change of the select box is executed in the browser
in order to have the button show whenever a change is made, you can:
add a client side js function to hide/show the button whenever $("#transportation") changes - but this alone will save nothing in your DB
make a server request and redraw the whole page when $("#transportation") changes, so that your ejs can be executed.
I am trying to find a way to change the pop up HTML on a chrome extension to another one when you click a button. I have tried to make a onclick function href but nothing works. I am new to both HTML and chrome extensions so I am sorry if this problem seems easy to the more experience developers.
<form id="gform" method="POST" class="pure-form pure-form-stacked" data-email="from_email#example.com"
action="https://script.google.com/a/cvsd356.org/macros/s/AKfycbxb4ZyUUQCnTN-7iYF-YRViDSy/exec">
<div class="name">
name: <input type="text" name="Name" id= "inputbox"><br>
</div>
<div class="id">
ID# <input type="text" name= "ID" id= "inputbox"><br>
</div>
<div class="MailingAddress">
Mailing Address: <input type="text" name= "Mailing Adresss" id= "inputbox" style=width:350px;><br>
</div>
<div class="sendToTr">
Send Transcript to: <input type ="text" name="College" style=width:350px; id= "inputbox" ><br>
</div>
<div class="emailmy">
<label for="email"><em>Your</em> Email Address:</label>
<input id="inputbox" name="email" type="email" value=""
required placeholder="your.name#email.com" />
</div>
<div class="sButton">
<button style=height:30px;width:70px;border-radius: 3px; class="button-success pure-button button-xlarge">
send
</button>
</div>
I think there are quite a few ways to achieve what you are asking. If I were you, I would add a JavaScript file to my project to do this.
Step 1:
I would tell my HTML page where to find this JS file. The sample below can be included near the end of your HTML file, right before </body></html>. The sample below assumes your new popup.js file is in the root folder of your project:
<script src="popup.js" type="text/javascript"></script>
Step 2:
In the popup.js file, I would create a function that tells the popup how it should be modified. In the sample below, I'm going to hide the element with an ID of "theOldElement" and show the element with an ID of "theNewElement". I'm also going to attach this function to the click event of "theButton" element.
popup.js
function updatePopup(){
document.getElementById("theNewElement").style.display = "block";
document.getElementById("theOldElement").style.display = "none";
}
document.getElementById('theButton').addEventListener('click', updatePopup);
Step 3:
I like referring to my HTML elements by ID (as I've been doing above - note the "getElementById" references), so I would:
add id="theNewElement" to the element I want to reveal
add id="theOldElement" to the element I want to hide
add id="theButton" to the button that I want to trigger this change
Note: you can insert these IDs as the first attribute within the tag you want to identify. E.g., <div id="theNewElement" ...
I'm using Express.js and trying to get form data of a dropdown select element,
I tried with body-parser but what I get with eq.body.method_select is undefined.
I didn't find much info about how to do this on the web.
Here is my code html code:
<form action="url_analyse">
<div class="col-lg-6">
<div class="input-group">
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" name="method_select" id="inlineFormCustomSelect">
<option value="5">Regular Search (Short)</option>
<option value="10">Intense Search (Long)</option>
<option value="20">Deep Search (Very Long)</option>
</select>
<input type="text" name="url_input" class="form-control" placeholder="Enter URL">
<span class="input-group-btn">
<button class="btn btn-secondary">Go!</button>
</span>
</div>
</div>
Here is my js code:
app.get('/url_analyse', function(req, res) {
console.log(req.body.method_select);
})
Hope you can help me with that.
Thank you.
There are two issues here:
You might want to explicitly add the leading forward slash: action="/url_analyse"
The default form submission HTTP method is GET, which means that form fields will be passed in the query string portion of the URL. This means you will instead need to access req.query to get at the form fields. You only need body-parser and req.body when you use POST and other methods (with the appropriate enctype) to submit your form.
$(document).ready(function(){
$(".btn").hide();
$(".about input").on('click',function(){
$(".about input").hide();
$(".btn").show();
});
});
" method="post" enctype="multipart/form-data">
save as
cover
logo
save
<select name="save">
<option selected="selected">save as<option>
<option value="coverimage">cover<option>
<option value="logo">logo<option>
</select>
<input type="file" name="image"></input>
<button class="btn">save</button>
</form>
initially hiding ".btn", but after clicking ".about input" want to hide ".about input" and show ".btn"