We Keep Coding

HTML - Two forms with 'enter' keypress to know which form I am entering

I have two forms and I would like to make it easy to type in one form text field and press enter and the page knows what form is being filled out.
Form 1 (example: search):
<form action="" method="post" name="form1">
<input type="text" name="txt1" />
<input type="submit" value="Enter 1" />
</form>
Form 2 (example: login):
<form action="" method="post" name="form2">
<input type="text" name="txt2" />
<input type="submit" value="Enter 2" />
</form>
Both passes through a PHP script to validate and off to its correct site.
Search is added to a page that is included in every page (MVC) header and the login is on its own page but both come together in one page as two forms. When logging in on the login page I enter username and password and press enter but it defaults to the search submit button and would like to know its being entered on the login submit button.
Appreciate your help...

If you give your submit buttons a name, you will be able to detect them in PHP.
<input type="submit" name="submit" value="Enter 2" />
and later
if ($_POST['submit'] == 'Enter 2') // ...

Since you know the field names you're looking for in each form, you can key off of that:
<?php
if (isset($_POST['txt1']) {
// do one thing
} else {
// do the other
}

<form action="" method="post" name="form1">
<input type="hidden" name="form" value="1" />
<input type="text" name="txt1" />
<input type="submit" value="Enter 1" />
</form>
<form action="" method="post" name="form2">
<input type="hidden" name="form" value="2" />
<input type="text" name="txt2" />
<input type="submit" value="Enter 2" />
</form>
The intval() will validate the posted value.
if (intval($_POST['form']) == 1){}
elseif (intval($_POST['form']) == 2){}

Taken from this article: http://www.javascript-coder.com/html-form/html-form-submit.phtml#multiple
Multiple Submit buttons
You can have more than one submit buttons in a form. But, how to identify from the server side which of the buttons was pressed to submit the form?
One way is to have different names for the submit buttons.
<input type="submit" name="Insert" value="Insert">
<input type="submit" name="Update" value="Update">
In the server side script you can do a check like this :
if(!empty($_REQUEST['Update']))
{
//Do update here..
}
else
if(!empty($_REQUEST['Insert']))
{
//Do insert Here
}
The second method is to have different values for submit buttons with the same name.
<input type="submit" name="Operation" value="Insert">
<input type="submit" name="Operation" value="Update">
The server side code goes like this (PHP code):
if($_REQUEST['Operation'] == 'Update')
{
//Do update here..
}
else
if($_REQUEST['Operation'] == "Insert")
{
//Do insert here
}

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}

Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

required field with two submnit button in same form

I set a required field for all the fields in form and having two submit button.
and want the required data on only for one submitonly. In another submit i dont want required with form fields how to prevent the requied field in another submit button.
<form action="data.php">
name<input type="text" name="name" required>
std<input type="text" name="name" required>
class<input type="text" name="name" required>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="clear">
<input type="save" name="save" value="save">
</form>
in this given code the required field shoud alert only when i click on submit .and do not alert on click of save is it posible any way

You may consider catching submit events and doing different checks according to what button is pressed. Also please note that the required attribute will always make your input truly required. Here I used a custom attribute, that has no special property, but I would then use it to identify in my custom code what fields are required.
Here is how it would look like in Javascript using jQuery:
<form id="your_form" action="data.php">
name<input type="text" name="name" is_required>
std<input type="text" name="name">
class<input type="text" name="name" is_required>
<br />
<input type="submit" name="submit2" value="submit">
</form>
<input type="submit" name="submit" value="submit with check">
var ok;
$('[name=submit]').on('click', function(e) {
ok = true;
$('[is_required]').each(function() {
if (!$(this).val()) ok = false;
});
if (!ok) {
alert("Please fill in all the required fields");
} else
$("#your_form").submit();
});
You may see this code in action here: http://jsfiddle.net/z9dkjdtz/

Use the formnovalidate attribute in a button to specify that normal HTML5 form validation (such as checking that all required fields have value) be suppressed:
<input type="submit" name="save" value="save" formnovalidate>
Note: type="save" is invalid and gets ignored, so the the element would create a text input box (since type="text" is the default).

Dynamic Hidden Form Field Data Absent From POST

I have a form that, when submitted, does not post the dynamically added hidden field.
html:
<div>
<form action="thankyou.php" onsubmit="return validate()" id="orderform" method="post">
<input type="text" name="name" /><br>
<input type="text" name="email" required /><br>
<input type="text" name="charterco" required /><br>
<input type="text" name="bname" /><br>
<input type="text" name="dtime" required /><br>
<input type="submit" />
</form>
</div>
jquery:
$('#orderform').submit(function(eventObj){
$('<input />').attr('type','hidden')
.attr('id','list')
.attr('name','shopList')
.attr('value',sliststr>)
.appendTo('#orderform');
return true;
});
POST data from Chrome DevTools:
name:b
email:b#b.com
charterco:b
bname:b
dtime:12:00
message:Comment
I can't work out what's gone wrong. My sliststr variable turns up filled and correct in my little debugging test on jsfiddle here. For whatever reason, it isn't POSTing.
EDIT: As #JayBlanchard pointed out below, I am adding to the form after the POST has been written.

Try to append the dynamic element, set the value of it and then submit the form. Otherwise it's submitting the form and then appending the html in callback.
Try the following.
function validate(){
var shoplist = [1,2,3];
$('#orderform').append("<input type='text' name='shop' id='list'>")
$('[name="shop"]').val(shoplist)
$('#orderform').submit(function(eventObj){
return true;
});
}

Have to remove submit button to get js to work

I'm trying to validate login details from an html form. The problem is that the submit button doesn't work with the code. So for example if I leave the username and password blank it won't come up with an alert for "Invalid Username or Password". If I remove type="submit" it works but the button becomes an input text box with an onclick function which does not look good. I was provided with this code as it is a more secure way of passing login details than I had written so I have to confess my ignorance on JS and JSON so apologies if I haven't provided enough info but any guidance would be much appreciated on how to get the button working with the js. This is running on Chrome only. Cheers.
HTML code
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="submit" onclick="myApp.getLogin()" value="Login" />
</form>
JS
myApp.getLogin = function(){
var url = "http://localhost:8084/Alumni_JV1/services/login.json?username=" + myApp.vm.username()
+ "&password=" + myApp.vm.password();
console.log(url);
$.getJSON( url, function( data ) {
if(data.response==='success'){
window.location.href="profile.jsp";
}else{
alert("Invalid Username or Password");
}
});
};

A submit button is used to send form data to a server. E.G. <form action='formHandler.php'>. It would submit the form to the current URL if the action attribute isn't defined.
You can get a button without any action with <input type='button' />.
So changing <input type='submit' ... to <input type='button' ... should do the trick :)
Then the code would be:
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="button" onclick="myApp.getLogin()" value="Login" />
</form>

Change input type=submit field with button tag.