I would like to click a button and have it go to a link that concatenates mypage.html with the value entered in the search box, but it doesn't seem to recognize it as a variable. What can I do to get the value of the text box?
<html>
<form role="search" action="mypage.html/'#searchterm'">
<input type="text" placeholder="Search" id="searchterm">
<button type="submit">Search</button>
</form>
</html>
Change the form element to this:
<form role="search" id="myForm" action="mypage.html">
The javascript (this is jQuery) would be something like this:
$( "#myForm" ).submit(function( event ) {
// Get the search term
var searchTerm = $('#searchterm').val();
// Append the search term to the root URL
var url = "mypage.html/" + searchTerm;
// Redirect the page to the new URL
window.location.href = url;
// Prevents the default behavior of the form
event.preventDefault();
});
It depends on how you would like to achieve this, you can send it directly using PHP, or you can send it using javascript and AJAX to a PHP page. As you can see in this small tutorial you can send the value of the entered input. AJAX will avoid the page from being refreshed while you search the data, so it will look better. It all depends on what you would like to achieve.
Please take into account that the value of the input cannot be sent on the ¨action¨ property of the form.
Thanks to everyone who submitted answers, I actually figured this one out.
<html>
<input type="text" id="myInput">
<button onclick="go()">Click me</button>
<script>
function go(value)
{
window.open("mypage.html/" + document.getElementById('myInput').value)
}
</script>
</html>
Related
I'm not really sure how to explain what I'm trying to do, but if you understand, that's great.
Alright, so basically I'm trying to make an input box or whatever with a button beside it saying "Answer", and whatever you write in the input box and press the Answer button, it will open a new tab and add that to the URL, (Example: "http://yourwebsite.com/Whatever-You-Wrote-In-The-Box").
If you need me to try to explain further, go ahead and ask, I can't figure out how to do this at all.
Thanks,
<input id="answer" />
<button type="button" onclick="window.open('http://yourwebsite.com/' + document.getElementById('answer').value);">Answer</button>
Another option is to use a form:
<form action = "http://www.yourwebsite.com" method = "get">
<input type = "text" name = "fieldname"/>
<button type = "submit">
submit
</button>
</form>
You can't do this with HTML only. You must use something for the interaction like javacript.
So u could do this.
<input id="input"/>
<button id="button">button</button>
<script>
$('#button').click(function(){
var urlPart = $('#input').val();
var url = 'https://google.com/' + urlPart;
window.location.replace(url);
});
</script>
Check for an example
https://jsfiddle.net/joepenzo/g873knd6/10/
I tried this html code
<input type="submit" value="Login" class="button" />
It is a part of my html form.
I want to use submit button to submit the data and show ( error.html ) page.
You will wrap it with <form action="error.html"></form>
You can use like this
<html>
<form action="error.html">
<input type="submit" value="Login" class="button"> </input>
</form>
</html>
I am a bit unsure of what you want to do, since you say you already have a form then I guess that the error.html is not calling to the form because you already have another link to the form already. Then this is could be a way to call on two pages almost at the same time. Submit first to the form and then after the sumbit it goes to the linked error page.
Working to call on BOTH the form html and the error.html link:
JavaScript:
<script language="JavaScript">
/** Delay me BEGIN **/
function DelayMyError(){
var count = 0;
// delay in milliseconds
var delay = 100;
var interval = setInterval(function(){
if (count++ < 1) {
window.location.href='error.html';
} else {
clearInterval(interval);
}
}, delay);
}
/** Delay me END **/
</script>
HTML:
<form action="YourFormPage.html">
<input type="button" onclick="form.submit();DelayMyError();" value="Login"></input>
</form>
I hope this was the answer you were searching for. Please contact me back if it worked, I am curious too. Theoretically speaking it should work that it first submits and then after 100 milliseconds it calls for the link called error.html.
How ever if you just want to do a link without a delay you could do it like this, but there is a risk that this more simple approach will not call on the form and that it will only work as a link skipping the submit:
OPTIONAL but I am unsure if this one will call on both the form html and the error.html or not:
<form action="YourFormPage.html">
<input type="button" onclick="form.submit();window.location.href='error.html';" value="Login"></input>
</form>
Here is a form with angularjs.
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
</script>
</body>
I am not familiar with AngularJS, I found the expression {{user}} display as a json like format data which was binded to the textbox. I want to know is there any way to post {{user}} as json directly to the server side. I know I can easily post the form. But my purpose is the page may have a lot of textbox. I want to store it using json, just like {{user}} and submit as a combined one.
And I also want to know how to remove one value in the expression. i.e. the following code has two attribute firstName and lastName. Is there a way like remove(), after call it. I can remove one attribute in the correspond json data.
Thanks a lot
you can post your modal (user in this case) directly as JSON using $http .
In case all you text fields are saved in the user modal then u can remove one of the attributes by calling the below function before submitting the form
$scope.remove = function (user) {
delete $scope.user.firstName;//the output here is user with only lastname
}
I have a problem with json. I'd like to display the result of my form in the new browser window in JSON. (When user fills all fields in the form, button becomes enabled and shows JSON in specified format (I did it)). I translated it in JSON but dunno how to output it...I'm thinking of create new html page and do window.open on button on 1st page, but then it doesn't read data from 1st page which user entered. Or should I save it somehow in JSON file and then read it from other page?
For example:
<form name="form" ng-controller="MyCtrl">
<label> <b> * Date: </b> </label> <input type="datetime-local" ng-model="date" name="date" onkeyup="changeButtonStatus()" onchange="changeButtonStatus()" required> </input>
<button type="submit" id="btn" class="btn" disabled="disabled">Submit</button>
</form>
I have some form with date field and button:
I can easily get JSON of date field by {{date | json}} on the same page, but I just want to output it in new browser window. How can I do this? Please help me with some tips. Thanks.
If it's not too big you can send the information to the new window as a data URL.
The frame will be reused once it is open.
This might be a start, showing how to plug in the JSON data and break it up over multiple lines for display.
window.open('data:application/json,'
+JSON.stringify(location).replace(/([[{,])/g, "$1%0a"),
'jsonFrame',
'resizeable,top=100, left=100, height=200, width=300,status=1')
See MDN for all the details.
You should be able to get at the window.opener from the new window and parse values out of it. The following plunker shows storing data from the current scope in an accessible area when the controller's submit is clicked. From the new window it then parses the content from the opener into the window's scope for further processing.
http://plnkr.co/edit/OkKX5zxYVSoZ7w81WV8J?p=preview
You'll notice here too how to get an angular friendly way of calling the submission and the disabling of the button until ready.
Hope this helps.
How about to save your input data into a cookie on one page and then get it via JavaScript when you will open a new window?
I could prepare the code in jsFiddle, but seems like it does not import external resources at this moment. So I'll post it here:
page 1:
...
<form name="form" ng-controller="MyCtrl">
<label> <b> * Date: </b> </label> <input id="date" type="datetime-local" ng-model="date" name="date" onkeyup="changeButtonStatus()" onchange="changeButtonStatus()" required> </input>
<button id="btn" class="btn" >Submit</button>
</form>
<script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<script type="text/javascript">
$('#btn').click( function() {
var cookie_value = $('#inut_test').val();
/*cookie_value should be your json string*/
$.cookie("json_cookie", cookie_value, { path: '/' });
window.open("http://localhost/page2");
return false;
});
</script>
...
page 2:
...
<a id="see-cookie" href="#">
click me!!!
</a>
<script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<script type="text/javascript">
$('#see-cookie').live('click', function() {
alert($.cookie('json_cookie'));
return false;
});
</script>
...
Do not forget about { path: '/' } cookie property to set it for all site and about including jQuery cookie library into your page.
For testing, I'd like to load the page called by submit on a new tab. Is this possible?
<form target="_blank" [....]
will submit the form in a new tab... I am not sure if is this what you are looking for, please explain better...
It is also possible to use the new button attribute called formtarget that was introduced with HTML5.
<form>
<input type="submit" formtarget="_blank"/>
</form>
I have a [submit] and a [preview] button,
I want the preview to show the print view of the submitted form data, without persisting it to database. Therefore I want [preview] to open in a new tab, and submit to submit the data in the same window/tab.
<button type="submit" id="liquidacion_save" name="liquidacion[save]" onclick="$('form').attr('target', '');" >Save</button></div> <div>
<button type="submit" id="liquidacion_Previsualizar" name="liquidacion[Previsualizar]" onclick="$('form').attr('target', '_blank');">Preview</button></div>
Add target="_blank" to the <form> tag.
Since you've got this tagged jQuery, I'll assume you want something to stick in your success function?
success: function(data){
window.open('http://www.mysite.com/', '_blank');
}
Try using jQuery
<script type="text/javascript">
$("form").submit(function() {
$("form").attr('target', '_blank');
return true;
});
</script>
Here is a full answer - http://ftutorials.com/open-html-form-in-new-tab/
This will also work great, u can do something else while a new tab handler the submit .
<form target="_blank">
Submit
</form>
<script>
$('a').click(function () {
// do something you want ...
$('form').submit();
});
</script>
Your browser options must be set to open new windows in a new tab, otherwise a new browser window is opened.