Search term to url - html

I am trying to make a search engine "comparer." By that I mean I am trying to make a local website that takes a search term and makes it into a clickable search engine URL (google, bing, yahoo, etc). I'm starting with Google. The search term needs to go after https://www.google.com/search?q= I don't know how to add the userSearch onto the end of the URL and make the URL into a clickable link. I'm not even sure that I'm gathering the search term correctly.
<!-- Enter search term -->
<form>
<fieldset>
<legend></legend>
<p>
<label>Search Here! (please, no spaces)</label>
<input type = "text"
id = "userSearch"
var = term
/>
</p>
</fieldset>
</form>
<var> gURL = 'https://www.google.com/search?q=' + userSearch </var>
<script type="text/javascript">
<var> searchTerm = "userSearch"; </var>
<var> gURL = "https://www.google.com/search?q=" + 'searchTerm'; </var>
document.getElementById("gURL").src = url;
</script>
<!-- Search URL results -->
<h3>Results</h3>
<fieldset>
<h4 style="text-align:left;">Google.com
If you can help, thank you. I appreciate it.

I used a button and Jquery - but is this what you are trying to do?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#userSearch').click(function() {
var fromForm = "<br>" + '<a href="https://www.google.com/search?q="' +
$('#searchField').val() + ">" + 'https://www.google.com/search?q="' +$('#searchField').val() + '</a>';
$('#outPut').append(fromForm);
});
});
</script>
</head>
<body>
<br>
<!-- Enter search term -->
<form>
<fieldset>
<legend></legend>
<label>Search Here! (please, no spaces)</label> <input type='text' id='searchField' placeholder="Search">
</fieldset>
</form>
<button id='userSearch'>Search</button>
<br>
<div id='outPut'>
</div>

I was able to make my comparer using some different code using multiple guides, but I do really appreciate your feedback. I am putting my code up on a Weebly website ( Click here ) and my goal is to make it a tool that makes it easy to search from different engines. It is mostly just for personal use, but I have it set up where others could find it helpful and useful.
I used this code:
<!-- Enter search term -->
<div>
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField" float: center; display: block;/>
</div>
<script type="text/javascript">
//creates a listener for when you press a key
window.onkeyup = keyup;
//creates a global Javascript variable
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
//listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
if (e.keyCode == 13) {
window.location = "https://www.google.com/search?q=" + inputTextValue;
}
}
</script>
Thank you for all your guy's help, and I will definitely continue learning.

Related

when click on jquery second time not working

Prepaid
$(document).on('click','.prepaid_button',function(){
var sevcount=parseInt($('#services_count').val());
servcount=servcount+1;
$('#services_count').val(servcount);
});
The variable name : sevcount changed to servcount which make the error.
I rename all the variable to sevcount
$(document).on('click','.prepaid_button',function(){
var sevcount=parseInt($('#services_count').val());
sevcount=sevcount+1;
$('#services_count').val(sevcount);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepaid_button" > BUTTON </div>
<input id="services_count" value="0" >
Welcome to our community #syam, Glad to welcoming you.

How can I create a loop for Chat Bubbles?

I want to develop a loop for chat bubbles. Every time I write a message, a bubble should be created and be on the right. When the chat partner replies, the message should be on the left in the bubble. How can I develop this loop?
My current code is this one:
<div class="Webview">
<div class="message_container" id="myForm"></div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
OK, it is not add messages to the DOM in loops, but just add message on Enter on the trigger that sending the message.
If you want to add value from Text Field such as text input,
You probably want to do two steps:
Getting the value from the input
Inject the value into a balloon template (html) and then into the DOM.
Then, you should add Javascript scope into your html or just include js file that contain the following function:
function addMessage() {
// Add XSS validation
const $messages = document.getElementById('myForm');
const $textElement = document.getElementById('textField');
const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>';
$messages.innerHTML += newMessage;
return false;
}
<input type="button" id="theButton" value="Nachricht absenden!" onclick="addMessage()" />
In jQuery it will be like this (in the js scope of course):
$("#theButton").off('click').on('click', function() {
e.preventDefault();
const $messages = $('#myForm');
const $textElement = $('#textField');
const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>';
$messages.html += newMessage;
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="theButton" value="Nachricht absenden!" />
Hope it helps :)
Good luck

Form with select and text options

I have an HTML form that needs to collect information entered into a text box as well as options that are chosen from a set of dropdown menus. To give a little context, I am creating virtual machines that can be configured by the user on a web page. They must enter a name (arbitrary) and a hostmachine in two separate boxes in addition to selecting options from three different dropdown menus. Because I am working with clusters, there could be as many as 99 "rows" of dropdown menus representing different system configurations that will be a part of the cluster.
Is it possible (if so, advisable?) to have both the text fields and the dropdowns contained in one form? If not, how do I make sure that the submit button sends all the data to my Django server for processing as I need all of this information to ultimately come to the same place.
I currently have them in different forms, but just ignore this for now as it doesn't do anything at the moment. Also don't worry about the lack of dropdowns present in this code as the addSelect() JS function is fully functional. Just know that each added node is given a unique name (node1, node2, etc.) and goes into the div "nodes".
<body><b>Virtual Cluster Initialization</b><br></br>
<div id="container">
<div id="general">
<form method="POST" id="naming">Cluster name:<br>
<input type="text" name="cluster_name">
<br>
Host Machine:<br>
<input type="text" name="host_machine">
</form>
</div>
<form method="POST" id="node_config"></form>
<div id="nodes" form="node_config"></div>
<div id=node1">
<select name="node_type" id="node_type">Node Type</option>
(two options go here)
<select name="issp_version" id="issp_version>ISSP Version</option>
(7 or so options go here)
<select name="os" id="os">Operating System </option>
(about 20 options)
<button id="add" onclick="addSelect('nodes');">+</button>
</div>
<br></br><input type="submit"></input>
</body>
EDIT1: Added the an example dropdown for clarity. Would it be better to NOT make a new div for each node? I did this initially because it seemed like a good way to keep each node's configuration separate. Like I said, there could be up to 99 nodes, each with three dropdown menus.
Not really sure if I understand what you're asking. Showing us the code after your drop downs are added would help. Syntax wise, this wont work. Inputs should be inside forms and div doesn't have a form property.
Put everything into one form if you want it to all be in one post. If your dynamically adding new form elements you can use an array as element names.
How about something like this?
<script>
var nodeID = 0;
function addSelect() {
var html = "<div id='node_" + nodeID + "'>";
html += "<select name='node_type[" + nodeID + "]' id='node_type'><option>example</option></select>";
html += "<select name='issp_version[" + nodeID + "]' id='issp_version'><option>ISSP Version</option></select>";
html += "<select name='os[" + nodeID + "]' id='os'><option>Operating System </option></select>";
html += "</div>";
document.getElementById('nodes').innerHTML += html;
nodeID++;
}
</script>
<div style="margin-bottom:20px;"><b>Virtual Cluster Initialization</b>
</div>
<form>
<div id="container">
<div id="general">
<div>Cluster name:</div>
<div>
<input name="cluster_name" type="text">
</div>
<div>Host Machine:</div>
<div>
<input name="host_machine" type="text">
</div>
</div>
<div id="nodes">
<div>Nodes</div>
<div id="node_0">
<select name="node_type[0]" id="node_type"><option>example</option></select>
<select name="issp_version[0]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[0]" id="os"><option>Operating System </option></select>
</div>
<div id="node_1">
<select name="node_type[1]" id="node_type"><option>example</option></select>
<select name="issp_version[1]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[1]" id="os"><option>Operating System </option></select>
</div>
</div>
<div>
<button type="button" id="add" onclick="addSelect();">+</button>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
Here is a JSfiddle to help you visualize what this does:
https://jsfiddle.net/fdss08w9/2/
Example of how you might use this in Django:
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = NameForm(request.POST)
# check whether it's valid:
if form.is_valid():
# Get the number of nodes we added
for id, node_type in enumerate(form.cleaned_data['node_type']):
issp_version = form.cleaned_data['issp_version'][id]
os = form.cleaned_data['os'][id]
#do stuff with node_type, issp_version, os

How do I get codeIgniter 2, Bradley - SignaturePad and DomPDF to work correctly

Hello: I am using signaturePad [http://thomasjbradley.ca/lab/signature-pad/]and have created a short web form in codeIgniter 2, located here: [http://gentest.lfwebz.com/crd/open_form3], that requires the users to actually sign the form.
I have also installed mPDF and domPDF and I have them working, sort of, but not quite the way I want it to.
The functionality I want is this: User opens web form, fills it out, signs it,
using signPad mentioned above. I then want to click a button that runs mPDF/domPDF and
captures the page and of course the embedded signature.
When I run mpdf/domPDF and pass it the view that houses the form, I think I have figured out it is just grabbing a fresh view, one without the signature, but several parts
of the form are missing. So after digging around, I think I have determined that I have to use image conversion of the signaturePad - this is where I am stuck. I have the code in, using the reference here: Signature pad and dompdf, but it does not work.
If you go to my page here: http://gentest.lfwebz.com/crd/open_form3, sign the page, click the "I accept" button
Here is my view
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../assets/jquery.signaturepad.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.signaturepad.min.js"></script>
</head>
<body>
<?php echo base_url(); ?>
<form method="post" action="<?php echo base_url(); ?>pdf.php" class="sigPad">
<label for="name">Print your name</label>
<input type="text" name="name" id="name" class="name">
<p class="typeItDesc">Review your signature</p>
<p class="drawItDesc">Draw your signature</p>
<ul class="sigNav">
<li class="typeIt">Type It</li>
<li class="drawIt">Draw It</li>
<li class="clearButton">Clear</li>
</ul>
<div class="sig sigWrapper">
<div class="typed"></div>
<canvas class="pad" width="198" height="55"></canvas>
<input type="text" name="output" class="output">
<input type="text" name="imgOutput" class="imgOutput">
</div>
<br /><br /><br />
<button type="submit">I accept the terms of this agreement.</button>
</form>
<script>
var sig;
$( document ).ready( function ( ) {
sig = $('.sigPad').signaturePad({defaultAction:'drawIt'});
} );
$( '.sigPad' ).submit( function ( evt ) {
$( '.imgOutput' ).val( sig.getSignatureImage( ) );
} );
</script>
</body>
</html>
here is the controller or the pdf.php mentioned above:
<?php
if(isset($_POST['imgOutput'])){$img_output = $_POST['imgOutput'];}
echo "position 1";
$bse = preg_replace('#^data:image/[^;]+;base64,#', '', $img_output );
echo "position 2";
echo $bse;
if ( base64_encode( base64_decode( $bse) ) === $bse ) {
require_once 'dompdf/dompdf_config.inc.php';
$html = '<!DOCTYPE html><html><head></head><body><p>Your signature:</p><br /><img src="'. $img_output .'"></body></html>';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
}
else{
echo ("ERROR !");
}
?>
What am I missing here? Please could some one point me in the right direction?
Let me know if you need more info.
Thank you in advance.

Displaying info in form to update - Razor WebMatrix

People, i have been breaking my back searching the internet for the answer to this. I need to know the code needed to show user details in a form, so that they can change and update their info?
I've tried with the following code, but i am hitting a brick wall?
#{
Layout = "~/_template1.cshtml";
var db = Database.Open("StayInFlorida");
var OwnerID = WebSecurity.CurrentUserId;
var FirstName = ("SELECT FirstName from OwnerInfo WHERE OwnerID='OwnerID'");
<h1>My Details</h1>
<form method="post">
<input>#FirstName</input>
<input type="submit" value="Insert" class="submit" />
</form>
}
I'm sure this is really wrong, but help on the net about this is very limited.
Check out the awesome Getting Started tutorials on the ASP.NET Web Pages web site:
http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/getting-started
The links on the right go to all 9 parts of the article, including extensive details on adding and editing data in a database.
<form action="" enctype="multipart/form-data" method="post">
<input type="submit" value="#FirstName" class="submit" />
</form>
and then to update:
if(IsPost)
{
var FName = Request["FirstName"];
var insertQueryString = "UPDATE OwnerInfo Set FirstName=#0";
db.Execute(insertQueryString, FName);
}
and I don't think you need
<input>#firstName</input>