Conflicting buttons with jquery .click - javascript

HTML
<form id="create-template" class="form" action="" method="post">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><div id="preview"><input type="submit" class="button" value="Preview template"></div></li>
<li><input type="submit" class="button" value="Create template"></li>
</ul>
</div>
</form>
JavaScript:
$("#preview").click(function() {
$('#create-template').submit(function() {
window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
this.target = 'formpopup';
});
});
When pressing Preview template it opens a popup window and will display a preview of the template. This is correct.
After previewing the template, when pressing Create template the page submits to the pop up. This is incorrect.
This problem only happens when previewing the template. Create template submits the form on the same page unless you preview the template.
How can I keep the preview template from conflicting with create template?

This line is telling the form to submit to the popup window:
this.target = 'formpopup';
Change it to:
this.target = window.opener;
You'll probably want to close the popup after submitting. To do that, add this line:
formpopup.close();

Related

Adding hyperlinks with javascript to html drop down div

I am trying to add more links to this drop down menu, the menu itself works and the links I've provided works as well, the problem is that when I try to add links through a Javascript file using appendChild, nothing seems to be happening. Also the form handling is successful in other codes, the only thing wrong is what is described above.
dropdown.html
<body>
<form id="aform">
URL:<br>
<input type="text" name="URL" id="URL">
<br>
Bookmark Name:<br>
<input type="text" name="bookmarkname" id="bookmarkname">
<br><br>
<input type="submit" id="formsubmit">
</form>
<div class="dropdown">
<button class="dropbtn" id="dropdown">Links</button>
<div id="myDropdown" class="dropdown-content">
Youtube
Amazon
Yahoo
</div>
</div>
<script src="dropdown.js"></script>
dropdown.js
function retrieveFormData() {
var URL = document.getElementById("URL").value;
var Bookmarkname = document.getElementById("bookmarkname").value;
var y = document.getElementById("myDropdown");
var aTag = document.createElement('a');
aTag.appendChild(document.createTextNode(Bookmarkname))
aTag.href = URL;
y.appendChild(aTag);
}
So I try to append new to 'y', but nothing happens in the actual drop down menu, no is added.
That is because you are using a submit button. The submit button tells the browser to send the contents of the form to the server side.
What you want to do is change the submit button to a regular button and add an onclick event.
<body>
<form id="aform">
URL:<br>
<input type="text" name="URL" id="URL">
<br>
Bookmark Name:<br>
<input type="text" name="bookmarkname" id="bookmarkname">
<br><br>
<input type="button" id="formsubmit" onclick="retrieveFormData();" value="Submit">
</form>
<div class="dropdown">
<button class="dropbtn" id="dropdown">Links</button>
<div id="myDropdown" class="dropdown-content">
Youtube
Amazon
Yahoo
</div>
</div>
<script src="forminput.js"></script>
This:
var Bookmarkname = document.getElementById("bookmarkname").value;
...will set Bookmarkname to the string value of #bookmarkname. Then you have this line:
aTag.appendChild(Bookmarkname);
appendChild is for appending a child DOM Node; it won't work for setting text, so you may be getting a link that has no content. You can, however, do aTag.appendChild(document.createTextNode(Bookmarkname)).

Two forms from one input

I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:
First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}
You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}
From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>

redirect to another page using onsubmit or action?

I am trying to direct to another page on particular event occurrence ...This is my code..but it does not direct to another page but the JavaScript code works...
<form class="list-group-item" method="get" onsubmit="action='Search.jsp'; myFunction('name');return false;" >
<input type="hidden" name="item" value="<%=1%>">
<i class="fa fa-arrow-circle-right fa-fw "></i> <span onsubmit="action='Search.jsp'" onclick="action='Search.jsp';document.getElementById('div1').style.display = 'block';setValue('Subject')" style="margin-left:1%">Subject </span>
<span class=" text-muted small" onclick="document.getElementById('div1').style.display = 'block';setValue('Subject And')" style="margin-left:40%"><em> And <i class="fa fa-angle-down "></i></em>
</span>
</form>
First I tried action="search.jsp" outside onsubmit but that didn't work..I am new to all this and I don't know what to do?
Add an button inside <form> tag
<input type="submit" value="Submit">
Add action attribute in form tag
action="Search.jsp"
Whenever you click Submit button, the page will be redirected to Search.jsp
1) If you simply want to get it redirected to Search.jsp after form submission, remove all crap JS code from your form and add a simple action attribute in form tag.
2) Action attribute behaves as redirect if you submit the form.
3) Writing JS code within HTML Tags is a bad convention. Always write JS code within <script>..</script> blocks or a different JS file and then include it.
<form class="list-group-item" method="get" action="Search.jsp" >
<input type="hidden" name="item" value="<%=1%>">
...
...
</form>
OR
You can ajaxify your code (meaning submit the form through ajax and then redirect).
<form class="list-group-item" method="get" action="Search.jsp" name="search" >
<input type="hidden" name="item" value="<%=1%>">
...
...
</form>
<script>
$(function(ev){
ev.preventDefault();
$("form:[name='search']").on("submit", function(){
var form = $(this);
var data = form.serialize();
var action = form.attr("action");
$.get(action, data)
window.location.replace("http://stackoverflow.com");
});
});
</script>
Simply return true from the myFunction and use <input type="submit"> to submit the form.
Sample code: (read inline comments)
<script type="text/javascript">
function myFunction() {
/* return false in case of validation fail */
alert("Hi");
return true;
}
</script>
<form class="list-group-item" action="Search.jsp" method="get"
onsubmit="return myFunction()">
<!-- other fields -->
<input type="submit" value="Submit" />
</form>

Form with two submit buttons doing two different things

I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??
problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.

Twitter Bootstrap 2 modal form dialogs

I have the following dialog form :
<div class='modal' id='myModal'>
<div class='modal-header'>
<a class='close' data-dismiss='modal'>×</a>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class='modal-footer'>
<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
</div>
</div>
and his JS :
<script>
//<![CDATA[
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
//]]>
</script>
When I click x, which is <a class='close' data-dismiss='modal'>×</a>, the form close down leaving me on the current page, while I'd like to go on the hamepage.
Also "Add tag" botton, which is <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> don't do nothing, while clicking jaust ENTER on the keyboard do the job and I'd like clicking "Add tag" did the same.
I'm not so skilled on JS and front-end prog, so any help is welcome.
Your submit button is outside of the form tags.
It won't know what form to submit.
Use javascript to connect it to the form.
<div class='modal-body'>
<form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<input name="something" value="Some value" />
</form>
</div>
<div class='modal-footer'>
<a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>
<script>
$('#modal-form-submit').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#modal-form').submit();
});
</script>
As for the <a class='close' data-dismiss='modal'>×</a> that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.
Here is some additional code to point you in the right direction for using AJAX to submit the form:
// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both
$('#modal-form').on('submit', function(){
//Serialize the form and post it to the server
$.post("/yourReceivingPage", $(this).serialize(), function(){
// When this executes, we know the form was submitted
// To give some time for the animation,
// let's add a delay of 200 ms before the redirect
var delay = 200;
setTimeout(function(){
window.location.href = 'successUrl.html';
}, delay);
// Hide the modal
$("#my-modal").modal('hide');
});
// Stop the normal form submission
return false;
});
To get the submit button work put it inside the form.
<div class="modal">
<form id="modal-form" action="/tagging" data-remote="true" method="post">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>A Modal Form</h3>
</div>
<div class="modal-body">
<input name="something" value="Some value" />
</div>
<div class="modal-footer">
Cancel
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
However, this adds an unexpected margin at the bottom of the modal. Bootstrap 2.0.2 introduced the modal-form class to fix this or you can fix it yourself with a style definition like:
.modal > form {
margin-bottom: 0;
}
For linking to another page when closing the modal I go along with TheShellfishMeme
As for the × that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.
With HTML5 you can have something like this:
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Tags</h3>
</div>
<div class="modal-body">
<form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
</div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class="modal-footer">
<div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
</div>
</div>
This called in HTML5 form-associated element of-course if you need to support all browsers + old ones then you need to go with JavaScript, but you can use JavaScript as a fallback :)
The problem for submitting form lies within bootstrap own JS modal library (bootstrap-modal.js) - basicaly submit event is being prevented due to line #204: ev.preventDefault (why?).
My solution was to add:
if(!$(e.target).parents('form'))
e.preventDefault();
however I don't know what problems it will spawn.
FYI You can do the following (written in jade):
.modal.hide.fadel
form.modal-form
.modal-header
button.close type='button' data-dismiss="modal" x
h3= t 'translation'
.modal-body
p hello
.modal-footer
button.btn data-dismiss="modal" href="#" = t 'close'
a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'

Categories

Resources