How to get "make" value from one HTML form to another? - javascript

I'm having an issue sharing a value between my HTML forms. I'm a beginner so this is probably a very easy fix.
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;"/>
</div>
Item1.html:
<label>Make: </label><li onclick="getMake()"></li></br>
Newvehicle.js:
function getMake(){
var make = document.getElementById("inputMake").value;
}
I would like the value inputted into the text field on Newvehicle.html to display as a list item on Item1.html. Can someone please advise?

What you could do is, to save the value in localStorage and retrive it in the secound file.
A possible HTML solution would be:
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;" onkeyup="localStorage.value1 = this.value" />
</div>
Item1.html:
<label>Make: </label><li id='entry_1'></li></br>
<script type="text/javascript">
document.getElementById('entry_1').innerHTML = localStorage.value1;
</script>
Newvehicle.js:
not required for that, but nice to have the whole logic in a seperate JS file
Explanation:
the onkeyup event fires up each time the usert releases a key on the keyboard, so with each firing we create/replace the value1 in localStorage.
right after the list element will a javasript code be executed that reads the value from localStorage in your case value1 and replaces the innerHTML.
keep in mid that this only works if you work on the same domain.Localstorage keeps the data until you clear the localstorage whit localStorage.clear()
alternatively you can use sessionStorage instead of localStorage tho keep the data only for one browsing session.
See:
Webstorage on W3C Schools
Keep on going and soon you will master the Javasript language.

Related

jQuery Clone() not behaving as it should within asp.net page

I have a search box that needs to be within a form so that it can post to another page for a search functionality to work.
I originally had this working fine in Firefox by using an iFrame, but using the search box would simply refresh the when using Internet Explorer.
I found out that it worked fine if I simply created another form underneath the current one, however this obviously leaves it in the wrong place on the page.
I attempted to use the jQuery clone() method that I have succesfully used elsewhere on the site, but this is refusing to work.
I looked around and found another way of using the clone() method and I have it working fine within jsfiddle, but it will not work on my site.
This is the div that I want to populate:
<div id="CustomerSearch">
2
</div>
And this is the div that I want to be cloned:
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">
1
Customer Search: <br />
<input type="text"id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
This is the script that I am using in an external file:
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
CustomerSearch.html(CustomerSearchClone.clone(true));
I have it working in JSFiddle here: http://jsfiddle.net/de9kc/92/
Any ideas?
Thanks guys
I'm not a .NET guy but the div you are pasting too is still within a form tag so I'm not certain that this wouldn't cause a hiccup for .NET at submission time (or postback, or whatever).
However, with respect to getting the cloned form elements where you wanted them per the layout you demonstrate in your question;
I modified the pre-result html like so:
//html
<form id="form1" runat="server">
<div id="CustomerSearch">2 Customer Search:</div>
</form>
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">1 Customer Search:
<br />
<input type="text" id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
then i used this jQuery:
// the vars you already created
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
// using .clone(true, true) for deepWithDataAndEvents - not sure if you want this?
// will the .clone(true, true) retain input's link to original form id? I'm uncertain
// using .children() because clone's intended destination already has a div container
CustomerSearchClone.children().clone(true, true).appendTo(CustomerSearch);
// hide clone's source after cloning; no sense in having both search boxes visible
CustomerSearchClone.hide();
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. (per http://api.jquery.com/clone/)
But you are appending the cloned elements into a different form tag, so maybe a non-issue.
I'm just learning jQuery myself, but I thought I would give the solution a shot ;-$
JSFiddle here: http://jsfiddle.net/de9kc/190/

Apply javascript with the script tag

I have a page where users can creates their own script to modify texts on the server (don't worry the access is restricted to a few users). So the users only have three fields they can fill, one with the name of the rule, another with the expression to replace and a last one with what to replace it with:
<label id="name">Name: </label> <input type="text" name="ruleName" size="50" id="ruleName"></input> </br>
<label id="input">Replace: </label> <input type="text" size="50" name="inputStep1" id="inputStep1"></input> </br>
<label id="output">By:</label> <input type="text" size="50" id="outputStep1"></input></br>
After that the rules are stored in a file on the server via a php post (I'll spare you the unecessary details of this command...). and then the rules are listed in a form with checkboxes, and I want that when the checkboxes are clicked the rule is applied.
The only thing I could come up with was to import the script file via a script tag but only by importing it it doesn't run the inside script.
How do I do that?
Thanks
If i understund you correct, you would have to create a script file with contentlike this
generate Script on the server:
// i would approch this totally differt, because i would not let user generate script on the server, but to answer the question ...
function executeRule(){ // name of the function is probably the Rulename and must be unique
document.getElementyId("withRules").innHTML = document.getElementyId("withRules").innHTML.replace('[userenteredvalue1]','[userenteredvalue2]');
}
//this code should just be executed when the radiobutton is selected
and than i would add the script per html - script - tag
<script src="/generated_user_script.js"></script> <!-- a line per generated script -->
and than on select(the onchange/onclick Event, when the checked attribute is set) i would call the function, quick an dirty. :)
if you have many rules you need uniqe names, so that they dont override themselfes and so on.
this said an other approche were javascript code is not create would be better.
If it is only the replace function, may be you could store the input and output values or so.

Populate form field with javascript

I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function.
document.getElementById('var1').innerHTML = test;
alert(test);
I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:
#helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="#name" id="#id" #toHtmlArgs(args)> }
innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:
<input ...>test</input>
I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.
document.getElementById('var1').value = test;
If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.
Such as various JS two-way component template binding libraries.
For instance, you can simply do the following:
HTML:
<div id="myapp">
<input id="var1"/>
<button>Submit</button>
</div>
JS:
mag.module('myapp',{
view : function(state){
var test= 'tester';
state.button= {
_onclick:function(){
state.var1=test
}
}
}
});
Here is working example of the above example:
http://jsbin.com/ciregogaso/edit?html,js,output
Hope that helps!

jquery text input box pass to variable

This is my first time using jquery and while this is a fairly simple task I'm stuck already.
I've got a input box with the time of day in it. I would like to create a button to grab the time and send it to a variable (setTime) so I can use the time elsewhere in the script.
However I'm having trouble the variable to pass, I've added an alert window but all I get is either a blank alert or an "undefined" alert.
The first line Start Time.... works fine its the setTime stuff that's broken.
Page header:
setTime = $('#setTime').text();
$('#formTime').timeEntry({show24Hours: true});
Page body:
<p>Start Time <input type="text" size="2" id="formTime" class="spinners" value="" /> </p>
<input type="button" value="Set Time" onclick="$('#setTime').val('#formTime');" />
<input type="button" value="Show Date" onclick="alert(setTime);" />
Thanks
You have to make a few changes to your code.
Update your Html by adding some ids for example.
<p>
Start Time <input type="text" size="2" id="formTime" class="spinners" value="" />
</p>
<input id="setTime" type="button" value="Set Time" />
<input id="showTime" type="button" value="Show Date" /> ​
Personally I don't like assigning script to events within the html controls as they become hard to maintain and add clutter to the page.
You can write script at the bottom of the html page within a script tag or better yet, use an external js file. External js files will also keep your Html clean and your scripts unobtrusive.
var setTime = 0;
var $fromTime = $("#formTime")
$("#setTime").off("click").on("click", function(){
setTime = $fromTime.val();
});
$("#showTime").off("click").on("click", function(){
alert(setTime);
});
See working DEMO
Using jQuery can be confusing at times but the on-line documentation is fantastic.
#setTime means "The element with the id 'setTime'" - you have no element with that id, and the control you are trying to get the value of has no id at all.
timeEntry is not a jQuery method, so will error when you try to call it. If you are using a plugin that you think should add that method then you should say so.
.val('#formTime') will set the value of a form control to the string #formTime. If you want to get the value, don't pass that method an argument … and do assign the return value of the method call to something.
You should probably work through an introduction to programming and JavaScript.

ASP: Get the value from javascript using getElementbyId

I am trying to get value from javascript using getElementbyId but i am not getting it.
If i put,
<input type="text" id="disprice<% =pID %>" value="<%=disprice%>" name="Price" />
like this then i am getting value from java script in my text box.
But if i try to get that same thing like this,
<span class="productListPrice" id="disprice<% =pID %>">
then i am not getting the value..
Please help me if possible.
Mitesh
Your texbox needs an id.
More details http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementbyid
#mitesh: Here's some sample code that should help --
JavaScript:
var price = document.getElementById('Price');
ASP:
Dim iPrice
iPrice = Request.Form("Price")
HTML:
<input type="text" id="Price" name="Price" value="<%=iPrice %>">
Only input values are transmitted back to the server on a postback and the name is used (not the id). The id is primarily for doing things in JavaScript client-side.
Also, in both cases, getElementById will return the element with the given id. However, the element itself is different (a span as no inherent value). This step may require some more troubleshooting to determine "what" isn't working.

Categories

Resources