Develop Reference

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

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.

Struts 2 Form Bind Parameters To Collection Without Using Index

Struts Version: 2.3.16.3
Is there a way to populate a list of objects without having to specify the index? Currently I have to reference the collection like so:
<input name="myCollection[0].myProperty" value="some value" />
I really want to be able to do something like this:
<input name="myCollection[].myProperty" value="some value" />
I am dynamically adding and removing elements on the page with JavaScript and it has been a pain to get the indexing right with the JavaScript. Rather just have the backend add to the end of the collection in the order the elements come across from the form. Similar to how PHP processes it.
The docs for the parameters interceptor say that it is really just a ognl expression that the input name is binding to. I went to the ognl docs and it says you can reference array's like this:
array["length"]
which would be the next element in the array. The parameter interceptor is spitting out a message that it is rejecting this parameter name. I would really like to find a way to make this happen, even if it means extending the parameters interceptor.

Well, since
you are manipulating the page with Javascript
you are having troubles detecting / updating the index of elements when adding / removing them
the simplest solution is:
use the syntax you prefer when manipulating them, for example myCollection[].myProperty, and
convert them into the form desired by Struts in a pre-submit function.
This way you don't have to bother with the indexes while manipulating the elements, but only once, at the end, when you can simply loop them by name or something, and change their name with javascript by assigning the right index.
A kick-off example with jQuery:
$(function() {
$('#myform').submit(function() {
$('[name^="myCollection[]"]').each(function(index) {
var oldV = this.name;
var newV = oldV.replace("myCollection[]", "myCollection[" + index + "]");
console.log("was: " + oldV + " - now is: " + newV);
this.name = newV;
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myform">
Open Javascript Console, then press submit, then inspect input elements
<br>
<input name="myCollection[].myProperty" />
<br>
<input name="myCollection[].myProperty" />
<br>
<input name="myCollection[].myProperty" />
<br>
<input name="myCollection[].myProperty" />
<br>
<input name="myCollection[].myProperty" />
<br>
<button>submit</button>
</form>

You need somehow to identify which object some property belongs to. Indexes are simplest way to do that, so you cannot just remove them.
There are many ways to achieve what you want. Look at Andrea's answer for one possible solution using javascript.
You can also pull object properties to simple lists and later set them to object.
E.g.
private List<String> myProperty;
can be referenced in JSP w/o indexes:
<input name="myProperty" value="first value" />
<input name="myProperty" value="second value" />
Of course you if you have many properties you need to somehow sync them in JSP in such way that order and size of the properties in list is consistent for every property.

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/

Uncaught TypeError: Cannot set property 'value' of null

I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..
Here is the HTMLcode:
<form action="">
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
<input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();">
</form>
Here is the JS code:
function getSearchText() {
var searchText = document.getElementByName("search").value;
h_url=document.getElementById("u").value;
var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';
$.ajax({
url : theURL,
fail: function(){
},
success : function() {
},
error:function(){
}
});
}
Please help me to fix this.

You don't have an element with the id u.That's why the error occurs.
Note that you are trying to get the value of the input element with the name 'u' and it's not defined in your code.

The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.

In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.

The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an id to the element.
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
And I've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.
Finally there is a warning that W3Validator will say because of the "/" in the end. :
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
In conclusion it says you have to remove the slash. Simply write this:
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item...">

I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.
As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.
h_url=document.getElementById("u").value;
Here h_url contain value of your search box text value whatever user has typed.
document.getElementById("u");
This is the identifier of your form field with some specific ID.
Your Search Field without id
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
Alter Search Field with id
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
When you click on submit that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.
So, Just make sure while you use form fields first define that ID and do other task letter.
I hope this helps you and never get Cannot set property 'value' of null Error.

guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:
before :
document.getElementById('form:salesoverviewform:ticketstatusid').value =topping;
After :
document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping;
Credits to Divya Akka .... :)

It seems to be this function
h_url=document.getElementById("u").value;
You can help yourself using some 'console.log' to see what object is Null.

h_url=document.getElementById("u") is null here
There is no element exist with id as u

Add defer to your script tag, if it's in header. It will allow your script to execute after the DOM is loaded.
<script src="script.js type="text/javascript"></script>
It should look like this:
<script src="script.js type="text/javascript" defer></script>

Execute any script in double quotes

how can i run any javascript in double quotes ?
For example:
<input type="text" value="" />
i would like to execute an alert or any other code in the value = "" (double quotes). Like:
<input type="text" value="<script> onmouseover=alert(0);</script>" />
the code show as a string on page. So is there anyway to execute script in double quotes ?

Ah, I see, you probably want to do something like this:
<input type="text" onchange="try{eval(this.value)}catch(e){}" />
That inline script will attempt to execute what's in its value attribute every time the tag is changed (and you blur out of the element). The try catch block is so that anything that would normally not work won't get executed. The eval function parses a string and runs it as Javascript code.
You leave yourself open to many forms of attacks when you use eval, so unless this is for purely educational or in house purposes, I would advise you don't use this.

The input object has its own events and you have to assign to them
For example to execute an alert when the mouse hovers over it:
<input type="text" value="testbox" onMouseOver="alert('testing');"/>

<input type="text" onmouseover="alert(0);" />