I've got an assignment to pass data between 2 .htm pages, in a manner which the source gets copied to the destination.
sourcePage.htm contains a form. (it contains more controls this is just a sample)
<form id="myform" action="destPage.htm" method="get" >
<input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
and destPage.htm is blank.
Using JavaScript I am required to parse the data from the url, that part isn't the problem
, the problem is that I am also required that destPage would be an exact duplicate of sourcePage.
My question is, if there's a way to pass the form as an object or some way to pass the control types and their properties along side the data.
You specified in the answer of ek_ny, that you want to dynamically build the form, based on it's input.
You can do this, in fact, with the JavaScript DOM:
var i = document.createElement('input');
i.setAttribute('type', "text");
i.setAttribute('name', "user");
var f = document.createElement('form');
f.setAttribute('action', "destpage.html");
// etc.
f.appendChild(i);
document.getElementById('container').appendChild(f);
The form will be added as a child in the <div id="container"> container.
Now you can use hidden input elements, which give, for instance, the specifics of the form:
<form>
<input type="hidden" name="x_type" value="input-text" />
<input name="x" type="text" />
<input type="hidden" name="y_type" value="select:[...]" />
<select name="y">
...
</select>
</form>
As far as I know, you won't be able to do a post between two pages. At least when I've attempted that you get an error-- it really doesn't make sense to have a post from one static page to the other (right?). What you can do is serialize the data you want to pass, put it on the url string to the next page and then deserialize that data and populate the controls on the destination page. If the html between the two pages is identical, then it should be pretty straightforward, if not it will be a little tricker. If you used jQuery it would be pretty easy, because you could serialize an entire form. If you need to come up with a generic solution (and you should, because it will help you learn) that's one thing, if you need to just get it working for this assignment and there are only a couple of form fields, you'll just need to encode the values you want to pass and pass them on a URL string with a get request.
Related
I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.
I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.
So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home
You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.
EDIT: Rephrased the question so that it is less ambiguous.
I have two HTML files, x.html and y.html, and I have two javascript files, x.js and y.js. I have a form in x.html like so:
<form action="y.html">
<input type="text" value="Blank." />
<br />
<input type="submit" />
</form>
Note that x.html and x.js work together, and y.html and y.js work together.
I want to access the value that a user submits into this form from y.js. How do I do this?
Thank you!
You can use window.sessionStorage or window.localStorage to keep String data across page loads on the same origin.
In x', where formElement is a reference to the <form> and textElement is the <input> or <textarea> reference, set up an event handler using node.addEventListener(event_type, handler) for when the <form> is submitted
formElement.addEventListener('submit', function (e) {
window.sessionStorage.setItem('foobar', textElement.value);
});
In y' you can then access
var foobar = window.sessionStorage.getItem('foobar');
if (foobar === null) console.warn('nothing got set on x :(');
So, below is the source of a.html, use get method to send the data to b.html, and after redirect, the data of the form will be available in the query string like /b.html?ta=sfsdfsdfsdfs
<form action="b.html" method="get">
<textarea name="ta" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Submit" id="subBtn">
</form>
You could use any the query string, or GET parameters to do so.
In the form on page x you can use define method as GET and when this form is submitted it will be directed to an address which includes your variable and parameter passed by the user. Now in page y you can just use window.location.search value and use the variable.
Also, you can make use of cookies and do the same.
If possible describe your problem in more detail so that one could post a relevant solution.
I am using springsourcetoolsuite, grails project and I am coming across this problem of storing the value entered in the textfield into a table in the database created in mysql and connected to grails. Now I have a domain class called property having variables address, city,
zipcode, country etc. which are also fields of the table property in mysql database.
When I ask user to fill in using this piece of code-(gsp views)
<body>
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
</body>
it works and the value is stored in database.
However I am required to append an input field on each button click, so i have put this input field in a function called add(). Here is the code-
<head>
<script type="text/javascript">
function add() {
var newP = document.createElement("p");
var input1,
area = document.getElementsByTagName("form")[0];
input1 = document.createElement("input");
input1.type = "g:textField";
input1.placeholder = "street";
input1.value = "${propertyInstance?.address}";
newP.appendChild(input1);
area.appendChild(newP);
}
</script>
</head>
<body>
<g:form name='prop' method="post" action="save">
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Now when i do this and run it, it takes null value and prints an error saying 'address cannot be null'. Now i cannot see what is wrong, but if anyone is familiar with groovy/javscript.. please help me figure out whats wrong.
Thanks a lot.
I'm guessing you did not use the scaffolding feature to generate your views in first place. If you didn't, it's a good way to start understanding the basics of grails. In your case specifically, you need to put your fields that you want to pass to the controller (like address) inside the form tag. Like:
<body>
<g:form name='prop' method="post" action="save">
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Another thing is you can't create a tag input and put its type as "g:textfield". The html input fields only have limited types. The one you want to use in this case is really "text". In any case, the grails' tags are rendered before the javascript (in the server-side) while javascript code is rendered client-side. So the first time the page is rendered they will work. But to insert something dynamically in your page, you need ajax because the grails' tags are already rendered. The value ${propertyInstance?.address} needs to be processed at the server, returned and established in your field. Therefore you need to make an async request. Anyway JQuery is your guy.
Also, for what you're doing, JQuery helps to manipulate HTML DOM, that will make your work so much easier.
I need to change a form so that instead of reloading the page after submitting it, it redirects the user to another page.
This is the form I'm talking about:
<form class="questionform" name="questionform-0" id="questionform-0">
<textarea class="question-box" cols="12" rows="5" id="question-box-' . $questionformid . '" name="title" type="text" maxlength="200" size="28"></textarea>
<input type="text" class="ubicacion" value="" name="question">
<input type="button" name="ask" value="Publicar" onclick="askquestion('questionform-0'); window.location.reload(true);">
I want to remove window.location.reload and change it for something that redirects users to the page their comment will appear.
The problem is that it's not simply a static. So I have no idea how to do it. The URL I want to send users to is:
www.chusmix.com/s?=(content of the second field)
How do I do it? Anyway thanks for any info or whatever that points me on the right direction. Thanks
There is no need to use javascript for this purpose. You only need to set the action attribute of the form tag. It tells where the form information will be sent. So in your case it will be:
<form action="http://www.chusmix.com/s">
Also if you want to send the variables through the URL like: http://www.chusmix.com/s?variable=someValue
You need to set the method attribute as get so it will look like this:
<form action="http://www.chusmix.com/s" method="get">
If you don't want the data sent to be visible set the method to post, note that there are different advantages for each method so i recommend you read more about this if this form is an vital part of your webpage.
The variable names that appear in the url http://domain.com?**variable**= will depend on the inputs name <input type="text" name="**variable**" />
For more information on how forms work you can go to:
http://www.w3schools.com/TAGS/tag_form.asp
http://www.tizag.com/phpT/forms.php
You can ad an action:
<form action="redirection_url.php" method="POST" class="questionform" name="questionform-0" id="questionform-0">
I think you can use both absolute and relative url. Also note that I've added
method="POST" - which defines how the data from the form will be sent, as you already send some data with GET method (that's the stuff after ? in your url) - so this should work pretty well.
If you cannot use the action attribute in the <form> tag, you may redirect the user using window.location (you will probably want to do this inside the askquestion method, not in the onclick attribute).
window.location = "http://www.chusmix.com/s?=" + inputValue;