Develop Reference

Use image as a hyperlink and to save a textbox input value?

In my website, I have a textbox which I'm using to ask the user for their name. Below I have 2 images, a cancel "button" which is just an image which has an tag to take it back to the index, and a Go image which is linked to another HTML page where the input taken from the text box will be used to fill in a paragraph. This page is linked below:
I am fine with how the cancel image is functioning but is it possible for me to use the Go image to take me to my other HTML page as well as to store the data input into the "your name" text box?
<div class="name_input_box">
<input type="text" placeholder="Your name" id="name" required />
<label for="name" class="label_name">
</label>
</div>
my code for the input box^
<a href="Add_page.html">
<img src="assets/Go_button.png" img style="height:35%; width:35%;">
</a>
My code for the "go" image^
I appreciate this might seem simple but I can't find any video tutorials on how to tackle this, many thanks to anyone who takes the time to help me on Easter Sunday :)

Either use localStorage or just have a form
<form action="Add_page.html">
<div class="name_input_box">
<label for="name" class="label_name"><input type="text" placeholder="Your name" name="name" required /></label>
<input type="image" src="assets/Go_button.png" img style="height:35%; width:35%;">
</div>
</form>
and use the location.search to get the name.

If I understand your questions well, I think this is what you are looking for.
Local storage stores your data for your and you can get your data any time you need it.
try this out linking this script to your html code and making reference to the right id's.
// get data from the input tag/local storage value
var input_data = document.getElementById('input_data').value
//local storage key
var key_name = 'UserName';
// paragraph to fill input ..you can p tag for this
var result_screen = document.getElementById('result_screen')
// image link / button
var goBtn = document.getElementById('goBtn');
goBtn.onclick = function () {
// To check for empty input value
if (key_name && value) {
localStorage.setItem(key_name, input_data);
location.reload();
}
}
// loop through the input value entered by users
for (var i = 0; i < localStorage.length; i++) {
var key_name = localStorage.key_name(i);
var input_data = localStorage.getItem(key_name);
result_screen.innerHTML += `${key_name}: ${value}<br>`;
}

How do I capture the input value on passing another value to another form

I have input fields which gets its value from a form in a modal,
using jQuery this is an example:
$(document).ready(function () {
$('#Search').click(function () {
$("#txt1").val($("#seach1").val());
$("#txt2").val($("#search2").val());
$("#txt3").val($("#search3").val());
});
});
The form on the page has the following ids #txt1,txt2,txt3
its input field looks as follows
<input onkeydown="updateDetails(this.id);" onfocus="updateDetails(this.id);" onblur="clearDetails(this.id);" onkeyup="updateDetails(this.id);" maxLength="254" id="txt1" type="text" class="form-control input-sm" data-bind="value: dataSource.view()[0].Database.txt1" />
Form in modal sends its value correctly to the page form but when I save the form, the form is saved with blank value.
-- should i create an onkeydown Event?
thank you for your suggestions

$('#Search').click(function () {
$("#txt1").val($("#seach1").val()).trigger("change");
$("#txt2").val($("#search2").val()).trigger("change");
$("#txt3").val($("#search3").val()).trigger("change");
});
Then add "onchange" event to your input field.

Edit/Cancel Button in Javascript

I have a form where the user can edit their text. I want the user to be able to retrieve their text if they delete it by hitting the cancel button.
How would I be able to retrieve a users text if they edit the original text, and when they press cancel the original text in the form before the edit comes back?

You could use data-* attributes to do this by adding data-original-text to the input like :
<input name='first_input' data-original-text='First input text' value="First input text"/>
And add a click event to the cancel button that will get the data attribute and assign it to the value :
$('form').on('click','#cancel',function(){
$(this).closest('form').find('input').each(function(){
$(this).val($(this).data('original-text'));
})
})
Hope this helps.
$('form').on('click','#cancel',function(){
$(this).closest('form').find('input').each(function(){
$(this).val($(this).data('original-text'));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name='first_input' data-original-text='First input original text' value="First input original text"/>
<input name='second_input' data-original-text='Second input original text' value="Second input original text"/>
<button id='cancel'>Cancel</button>
</form>

Something like the following could be built upon so that they could make multiple changes and still have the previous text available on change.
// JavaScript source code
var orginalText = "Please Enter Some Text here";
var newTest = "";
$(document).ready(function () {
$("#target").change(function () {
newText = this.text;
});
$(".cancel").on("click", function () {
$("#target").text(orginalText);
});
});

How to fill data automatically in a textfield using the info provided in the <select> tab using javascript

How to fill data automatically in a textfield using the info provided in the tab using javascript. And also the filled data cannot be edited.
The textfield may fill data based on calculation on the option selected in tab.
Please help.

I don't so much understand your question but try this:
HTML
<input type="text" id="t" disabled />
JS
var text = document.getElementById('t');
text.value = 658.57; // your calc result

If you use jQuery, you can do something like this:
$(document).ready(function() {
var VALUE_OF_SELECTED_TAB = this.value;
// HERE DO YOUR CALCULATIONS
$(YOUR_SELECT_ELEMENT).on('change', function() {
$(YOUR_TEXTFIELD_ELEMENT).html(
'<input type="text" value="'+ YOUR_CALCULATION_RESULT
+'" class="field left" readonly="readonly" >');
});
});

Linking form and button to javascript command

I am trying to make a simple form and button work. I have linked to a JS Fiddle here View JS Fiddle here
<form>
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button type="submit" id="WFFsearch">Search</button>
</form>
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').text();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
I want to be able to enter "nba" without the quotation marks and click the search button, then have a new window which generates the following link http://espn.go.com/nba/statistics. The first part and the last part of all the urls will be the same, it's just the middle that changes (nba, nfl, mlb). Any help would be greatly appreciated, thanks!

$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
You need val() property, since input is in question, not text(). https://jsfiddle.net/1c93pqj0/2/

you wanna use the .val() instead of .text() as text gets the value between 2 tags <div>here is some text</div> and val gets the value <input value="some value"/>

EzPz! This is a very simple task. First of all though, since you're using jQ to establish your button's click event, you can either drop the attribute type="submit", OR (recommended), create your event on the form's submit. If it were me, I'd id the form and use the forms submit, so that you don't need any alters to your button type="submit" and enter key can still be used in search box to submit the form.
Also, you're trying to .text on an input. Input's have value. In jQuery you can get or set that value by calling .val() instead.
The code:
$('#frmGetStats').on('submit', function (e) {
e.preventDefault();
var searchInput = $('#search').val(),
url = "http://espn.go.com/" + searchInput + "/statistics",
win = window.open(url);
alert("In this sandbox, new windows don't work. \nHowever you can see the link is \n[" + url + "]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="frmGetStats">
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button id="WFFsearch" type="submit">Search</button>
</form>

To get the value of an input field, use .val(). .text() is for the text in a DOM element.
Clicking on the submit button submits the form by default, which reloads the page and kills the script. You need to return false from the event handler to prevent this.
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
return false;
});
DEMO