html link onclick pop up a form - javascript

i'd like to pop up a form when click a link.
<a title='%s' onclick='return popupform()' href='#'> ABC </a>
the form is like:
<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
<input type="hidden" name="submitted" id="submitted" value="1">
<label for="chinese">Chinese: </label><br>
<input type="text" name="cs" id="cs" value="" maxlength="50"><br>
<label for="english">English:</label><br>
<input type="text" name="en" id="en" value="" maxlength="50"><br>
<input type="submit" name="Save" value="Save">
<input type="submit" name="Delete" value="Delete">
<input type="submit" name="Add" value="Add">
<input type="submit" name="Close" value="Close">
</form>
how to achieve it?

Wrap your form in a div:
<a title="%s" class="show_form" href="#"> ABC </a>
<div id="form_wrapper">
<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
... truncated for brevity
</form>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
And some CSS:
​#form_wrapper {
display:none;
}​
And then some JavaScript using jQuery:
$('a.show_form').on('click', function() {
$('#form_wrapper').show();
});​​​​​
And if you really mean a popup window, or commonly called a "modal" window, look here: http://jqueryui.com/demos/dialog/#modal-form

Pop-ups are simple div elements on the page that would be initially hidden and then revealed when some event takes place, like a mouse click. You then need to adjust the look of that div so it appears as a pop-up to the user, i.e. center the div on the page, raise its z-index so it layers above all, adjust the opacity to give the dimming effect, and so on. Obviously it is a lot of work if you decide to roll your own. Otherwise, if you are OK with using jquery, you can take advantage of the jqueryui dialog element

Related

Clickable link that fills a FORM field within same document (but with multiple FORMs)

I'm generating a long report that has multiple FORMs in it. I want to be able to include links from within the form itself that can pre-populate select form fields. But also support multiple FORMS.
(html brackets removed)
FORM id="form1" METHOD="POST" ACTION="..." INPUT NAME="date1" SIZE="10" INPUT type="submit" value="Post" /FORM
.. data and links like
2010-01-01
2010-03-04
.. etc
FORM id="form2" METHOD="POST" ACTION="..." INPUT NAME="date1" SIZE="10" INPUT type="submit" value="Post" /FORM
.. data and links like
2010-01-01
2010-03-04
.. etc
I want to add some Javascript/html so that the date links can be clickable, and if clicked, they will populate the upper FORM field named "date1" with the clicked date.
The idea is you click on one or more of the dates and can submit each of the multiple forms. I'm fairly new to Javascript and need to know exactly where to add which code to make this work?
I am aware there are some other posts about links to fill in forms but nothing about using multiple form IDs and wondering if there is a more efficient way and approach?
I found someone on fiverr who could bang this out, paid them and might as well share..
Here is the sample code and solution:
<html>
<head>
<title>Simple JS Request</title>
<script type="text/javascript">
function jsRequest(formID, dataValue, inputField) {
document.forms[formID][inputField].value = dataValue;
}
</script>
</head>
<body>
<form id="form1" action="xx" method="POST">
<input size="10" name="date1" value=""/>
<input size="10" name="date2" value=""/>
<input type="submit" value="go"/>
</form>
<br>
<a onclick="jsRequest('form1', '2010-01-01', 'date1')" style="cursor: pointer;">2010-01-01</a>
<br>
<a onclick="jsRequest('form1', '2010-02-01', 'date2')" style="cursor: pointer;">2010-02-01</a>
<br>
<br>
<br>
<br>
<br>
<br>
<form id="form2" action="xx" method="POST">
<input size="10" name="date1" value=""/>
<input size="10" name="date2" value=""/>
<input type="submit" value="go"/>
</form>
<br>
<a onclick="jsRequest('form2', '2010-01-01', 'date1')" style="cursor: pointer;">2010-01-01</a>
<br>
<a onclick="jsRequest('form2', '2010-02-01', 'date2')" style="cursor: pointer;">2010-02-01</a>
</body>
</html>

How to close a form with a button

Todo :
Close a form by clicking a button. Any solution because I tried more and I saw more method but no result. None of these methods work. any idea.
<form method="post">
<input type="button" value="Close Window"
onclick="window.close()">
</form>
<input type="button" name="cancelvalue" value="CANCEL"
onClick="self.close()">
If you want the window to get closed by javascript, then javascript must have opened that window in the first place to close it.
But, there is some hack using "self redirection", And the following will work easily open(location, '_self').close();
<form method="post">
<input type="button" value="Close Window"
onclick="open(location, '_self').close();">
</form>
<input type="button" name="cancelvalue" value="CANCEL"
onClick="open(location, '_self').close();">

Hyperlink not working on <input type=button [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Please see the below code.
I am using a search bar and added some buttons with it.
Only hyperlink of search button is working properly. But other buttons are not redirecting their link instead they are also redirecting to hyperlink of search button.
without search button other three buttons will use their added separate hyperlink.
Can you please fix it?
See the codes
http://pastebin.com/uEJyyvsh
Why you are keeping 4 submit button inside a form.
Search is the only submit button. Change rest of the button type to button only.
I) And, add onlick="location.href='Your URL'". Like this,
<input type="button" style="background-color: red" value="Login" onclick="location.href='http://localhost/login/';">
II) Add , onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> for opening in new tab.
<input type="button" style="background-color: red" value="Facebook" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
1) target="_blank" is possible in anchor tag.
2) formtarget="_blank" is possible with submit button.
But, here no need of 4 submit button. For more info, check this Submit Button Form Attribute - W3 Schools
<div class="widget search_key" id="directory_search_location-5">
<div class="widget-wrap widget-inside">
<div class="search_nearby_widget what_fld_search">
<form style="position:relative;" action="http://localhost/wordpress/" id="searchform" class="searchform_5509 allinone" method="get" name="searchform_5509">
<input type="hidden" value="listing" name="post_type">
<input type="hidden" value="all" name="mkey[]">
<input type="text" size="100" placeholder="Looking For ..." class="searchpost placeholder" id="search_near-15100" name="s" value="" onkeypress="tmpl_insta_search_widget('searchform_5509')" onclick="tmpl_insta_search_widget('searchform_5509')">
<input type="hidden" value="a18247a9c8" name="t">
<input type="hidden" value="OR" class="sgo" name="relation">
<input type="submit" style="background-color: red" value="Search" onclick="tmpl_find_click(15100);" class="sgo">
<input type="button" style="background-color: red" value="Register" onclick="javascript:window.open('http://localhost/register/', '_blank');">
<input type="button" style="background-color: red" value="Login" onclick="javascript:window.open('http://localhost/login/', '_blank');">
<input type="button" style="background-color: red" value="Facebook" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</form>
</div>
</div>
</div>
If you really want to go to login,register, facebook page..
Give like this.
<a href="Your URL Here">
<input type='button' value="Login">
</a>
You need to wrap the input button within an anchor tag. That should fix it.
Example.
Actually you don't have to use href to input,you should use 'a' tag.,there is no such attribute,but u can make input as link as like in below code,There is problem in your code,you have used one form multiple submit actions
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
or
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
you can use this type of code to link a page . you have to remove a tag
<input type="submit" value="Button Name" onclick="window.location.href='/pagename'">Continue</button>

Don't refresh page when enter key is pressed

I'm having some problems with the enter key triggering a refresh of the page whenever there is input in a form.
The following code does not refresh the page if enter is pressed and if there is no text inputted in the text area (#input) but will refresh the page if enter is pressed and there is input in #input OR if the cursor is in the text area. I'm not sure what's triggering it, as #submit is a regular button.
<div id="forms" class="container">
<form>
Enter your verb here in plain (dictionary) form:
<input type="text" class="input-sm" id="input"></input>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Hiragana" checked />Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Romaji" />Radio 2
</label>
</div>
<input type="button" class="btn btn-default" id="submit" value="Submit">
</input
</form>
</div>
I'm trying to jquery to solve the problem, but need help in that regard. Any suggestions would be appreciated!
you can either add following script at the end of body
<script>
$("form").submit(function (e) {
e.preventDefault();
alert("call some function here");
});
</script>
or you can just put your form tag like this
<form onsubmit="return false">
either way you will then have to write an onClick="SOMEFUNCTION()" to the input
also there is an error with an extra /button tag...remove that and instead use
<input type="button" class="btn btn-default" id="submit" value="Conjugate" />
note the ending slash
simply change your html:
<div id="forms" class="container">
<form action="javascript:void(-1)">
Enter your verb here in plain (dictionary) form:
....
jsfiddle here - works like charm
you have syntax error in your html codes:
<input type="button" class="btn btn-default" id="submit" value="Submit">
</button>
change it to this:
<button type="button" class="btn btn-default" id="submit" value="Submit">
</button>
Also, you need using Javascript/jquery to submit your form to prevent refreshing your entire page
place :
e.preventDefault();
inside the keypress function

Need form to open in new window, possibly via javascript

I'm trying to get my form to open up in a new window when the Search button is clicked, but the target="_blank" function is not working. I'm borrowing code from another institution's form, and I'm wondering if the javascript is forcing each submission to open in the same window (I'm not familiar enough with javascript to know for sure).
The search that I need to open in a new window is from the "Books & More" tab of the following website: http://library.utb.edu/search/search2. This is the code that I'm using for that form:
<form target="_blank" name="searchform" onSubmit="return dosearch();" action="http://lib3.utpa.edu/search~S2/X" method="post" class="unpadded">
<input name="searcharg" value="" type="text" id="SEARCH" class="big-search-text" placeholder="Example: Of Mice and Men">
<input class="big-search-submit" name="cmdSubmit" type="submit" value="Search">
<input name="searchtype" type="radio" checked="" value="http://lib3.utpa.edu/search~S2/Y"> All Fields
<input name="searchtype" type="radio" value="http://lib3.utpa.edu/search~S2/t" target="_blank"> Title
<input name="searchtype" type="radio" value="http://lib3.utpa.edu/search~S2/a"> Author
Advanced Search
</form>
Any suggestions you could give would be greatly appreciated!
You can try putting your formtarget="_blank" in your submit input tag.
Example:
<input formtarget="_blank" class="big-search-submit" name="cmdSubmit" type="submit" value="Search">

Categories