Two forms from one input - javascript

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>

Related

How to make php content appear in a html div element

I am trying to create a search using ajax and mysql and placing the returned data into a div. I am following a tutorial on youtube and so far so good, however I am trying to pass in dummy data into the div but it isn't appearing.
This here is my jquery
$('#submit').on('click', function() {
var search = $('#search').val();
if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything
$.post('searching.php', {search: search}, function(data) {
$('#search').text(data);
});
}
});
This is my html
<div class="container">
<div class="card card-container">
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<input type="text" name="search" id="search" class="form-control" placeholder="Search">
</form><!-- /form -->
<button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
</div><!-- /card-container -->
<div class="row">
<div class="col-md-4">
<div id="search"></div>
<div class="caption">
<p></p>
</div>
</div>
When the user clicks search the content from the searching.php file should appear in the div. Currently in the searching.php file it just has echo"content";. It should have "content" in the div but it isn't appearing in the web browser and there are no errors. Within the network in inspect element the name is searching.php and the status is ok. Not sure where I am going wrong, any help would be grateful.
You have multiple id="search" elements in your HTML. So this isn't going to know which one you mean:
$('#search')
It's probably trying to set the "text" of the <input>, which doesn't have a "text" (it has a "value"). Correct the HTML. Either change the <input> or the <div> to have a unique id. (And, of course, update your jQuery selectors as well as anything else targeting these elements.)
don't use same id (search) for both input and div
change the id in html
<div class="container">
<div class="card card-container">
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<input type="text" name="search" id="search" class="form-control" placeholder="Search">
</form>
<button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
</div><!-- /card-container -->
<div class="row">
<div class="col-md-4">
<div id="searchText"></div>
<div class="caption">
<p></p>
</div>
</div>
and javascript
$('#submit').on('click', function() {
var search = $('#search').val();
if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything
$.post('searching.php', {search: search}, function(data) {
$('#searchText').text(data);
});
}
});
.text not work with input
use val() instead of text() for input
$('#search').val(data);
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test1">This is a paragraph.</p>
<button id="btn1">Set Text</button>
<p id="test2">This is another paragraph.</p>
<button id="btn2">Set HTML</button>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn3">Set Value</button>

Javascript function to hide button if textarea is empty does not work

I have a textarea inside a div with a select dropdown underneath, and underneath that are two buttons. One is to preview, and the other is going to be for Uploading the text to a file.
I am trying to hide the Upload button if the textarea is empty. My javascript is not working since it always hides the button.
Here is the form, button container, and select dropdown (with all of the options left out since there are 20 of them):
<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<textarea name="code_input" id="code_textarea" class="form-control" rows="15" placeholder="Start coding!" required><?= isset($_POST['code_input']) ? $_POST['code_input'] : '' ?></textarea>
<div class="button-container">
<select required name="language-select" class="form-control" id="language_selector">
<option value="" selected disabled>Language</option>
<option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
<script type="text/javascript">
document.getElementById('language_selector').value = "<?php echo $_POST['language-select'];?>";
</script>
</select>
<br/>
<br/>
<div id="button-container" class="btn-toolbar">
<button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
<button id="upload_btn" class="btn btn-md" type="submit">Upload</button>
</div>
</div>
</form>
<div class="show-code">
<script src="lib/prism.js"></script>
<!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
<!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
<pre><code class="language-<?php echo $language ?>"><?php echo $user_code; ?></code></pre>
</div>
</div>
<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->
<script>
$(document).ready(function() {
/* I EVEN TRIED TO TRIM IT TO NO AVAIL */
var content = $.trim($('#code_textarea').val());
if(content.length === 0) {
$('#upload_btn').hide();
} else {
$('#upload_btn').show();
}
});
</script>
I've seen so many answers that link to their JSFiddle, and they all work fine. What is causing mine not to work correctly? Everything else works fine except for my JS function.
A native javascript solution.
Upload button is hidden from beginning, when a keyup event is fired for the textarea, the content of the textarea is checked and the button is either shown or hidden again
code_textarea.addEventListener('keyup', function(){
if(code_textarea.value){
upload_btn.classList.remove("hidden");
}
else {
upload_btn.classList.add("hidden");
}
});
.hidden {
display:none;
}
<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>
<button id="upload_btn" class="btn btn-md hidden" type="submit">Upload</button>
Attach your handler to textarea's 'keyup' event.
(And start with invisible btn.)
$(document).keyup('.code_textarea',function() {
/* I EVEN TRIED TO TRIM IT TO NO AVAIL */
var content = $.trim($('#code_textarea').val());
if(content.length === 0) {
$('#upload_btn').hide();
} else {
$('#upload_btn').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" >
<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>
<div class="button-container">
<select required name="language-select" class="form-control" id="language_selector">
<option value="" selected disabled>Language</option>
<option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
<script type="text/javascript">
document.getElementById('language_selector').value = "";
</script>
</select>
<br/>
<br/>
<div id="button-container" class="btn-toolbar">
<button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
<button style="display:none" id="upload_btn" class="btn btn-md" type="submit">Upload</button>
</div>
</div>
</form>
<div class="show-code">
<script src="lib/prism.js"></script>
<!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
<!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
<pre><code class="language-"></code></pre>
</div>
</div>
<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->

Input field with two buttons

I have a form with one input field, but two buttons. The idea is to check in or out with a code. The process comes to the php file, where it ends with just a blank page. What´s wrong?
EDIT
I changed "btn_in" to "inputAnst_nr" And now it works to reg in. BUT, how to i fetch wich button is pressed?
HTML
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post" action="php/usr_time_reg.php">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in" class="btn btn-lg btn-info primary col-sm-offset-1" type="submit">In</button>
<button id="btn_out" name="btn_out" class="btn btn-lg btn-danger primary col-sm-offset-1" type="submit">Ut</button>
</div>
</form>
JS
$(document).ready( function () {
$("#btn_in").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
$("#btn_out").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
});
PHP
//Check if POST is empty
if(!empty($_POST)){
//Check if POST is "inputAnst_nr"
if(!empty($_POST['inputAnst_nr'])){
//Put POST_btn_in in variable
$posted_anst_nr = $_POST['inputAnst_nr'];
You could just use the same name attribute value for both buttons, just make sure you designate the appropriate value. Example:
<?php
if(isset($_POST['btn_in_out'])) {
$status = $_POST['btn_in_out']; // In or Out depending on which one you clicked
echo $status;
}
?>
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in_out" type="submit" value="In">In</button>
<button id="btn_out" name="btn_in_out" type="submit" value="Out">Ut</button>
</div>
</form>
Sample Output

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