required field with two submnit button in same form - javascript

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).

Related

How to create a jQuery function to verify all input fields before the submit button applies function

I have 2 forms reservation info form & customer info form.
I've set all of the input fields as required.
I also have a button that is only supposed to hide the first form and show the second once clicked. I have it as type="button" since I'm not really submitting it anywhere.
I created a jQuery click() handler for my button.
My Issue is that I've tested the button and it completely bypasses the required validation of the input fields. It shows the second form and hides the first regardless of empty input fields.
I would like it if the forms validated the required attribute, so there are no blank input fields before they hide/show.
script.js
$(function () {
$('#reservation-submit-btn').click(function () {
$('#reservation-info-form').hide('slow');
$('#customer-info-form').show('slow');
})
})
HTML file
<div id="reservation-info-form" class="reservation-form-wrapper" aria-labelledby="reservation-form-label">
<div id="reservation-form-label"><h2>Make A Reservation</h2></div>
<form id="reservation-form" aria-label="reservation form" method="post" autocomplete="off">
<label for="res-date"></label>
<input
aria-label="reservation date"
type="date"
name="res-date"
id="res-date"
placeholder="current date"
required
/>
<label for="res-time"></label>
<input
aria-label="reservation time"
type="time"
name="res-time"
id="res-time"
placeholder="current time"
required
/>
<label for="res-party-size"></label>
<input
aria-label="party size"
type="number"
min="1"
max="9"
name="res-party-size"
id="res-party-size"
placeholder=0
required
/>
<button type="button" id="reservation-submit-btn" class="submit-btn">
Find a Table
</button>
I realize that creating a click handler just adds a method to the button and doesn't consider all of the input fields or the required attributes. So my real question is how do I do this in a way where I create the effects I need from the button while not bypassing the required attribute on the input fields?
You can use a library called jQuery Validation. It has built-in functions for auto-validate the forms. Also you have to change the type of your button from type=button to type=submit
$("#reservation-info-form").validate({
submitHandler: function(form) {
$('#reservation-info-form').hide('slow');
$('#customer-info-form').show('slow');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.5/dist/jquery.validate.min.js"></script>
<div id="reservation-info-form" class="reservation-form-wrapper" aria-labelledby="reservation-form-label">
<div id="reservation-form-label">
<h2>Make A Reservation</h2>
</div>
<form id="reservation-form" aria-label="reservation form" method="post" autocomplete="off">
<label for="res-date"></label>
<input aria-label="reservation date" type="date" name="res-date" id="res-date" placeholder="current date" required />
<label for="res-time"></label>
<input aria-label="reservation time" type="time" name="res-time" id="res-time" placeholder="current time" required />
<label for="res-party-size"></label>
<input aria-label="party size" type="number" min="1" max="9" name="res-party-size" id="res-party-size" placeholder=0 required />
<button id="reservation-submit-btn" class="submit-btn" type="submit">
Find a Table
</button>
</form>
</div>

Clear input field without reloading of the page

I have a input field where a user enters in a name at the end of a quiz and i have tried various methods of clearing the field. The page cannot re-load as the user is able to restart a quiz.
Here is my HTML:
<div class="js-quiz-submit">
<input type="text" class="js-name" placeholder="Please Enter Your Name"/>
<input type="button" class="js-submit" value="Submit"/>
</div>
If your input field is in a form say #quiz-form, then you can clear the fields of form as follows:
var form = document.querySelector('#quiz-form');
form.reset();
I guess the better way will be :
document.querySelector(".js-name").value = "";
Html:
<div class="js-quiz-submit">
<input type="text" id="js-name" class="js-name" placeholder="Please Enter Your Name"/>
<input type="button" class="js-submit" value="Submit"/>
</div>
Javascript:
document.getElementById('js-name').value='';

change input value before submit form using jQuery

I want to set hidden input value(username) based on client other input(email) in a form, then submit to server. (to make sure username equal to email)
However, the assignment to the hidden input is processed AFTER the form submitted. So 'username' is already None on server side.
<form id="altForm" action="" method="post">
<input type="hidden" name="username" id="id_username" maxlength="40" >
<input type="email" name="email" id="id_email" maxlength="40">
<input class="btn btn-primary pull-right" type="submit" value="Register" />
</form>
<script>
$("#altForm").submit(function(e){
e.preventDefault();
var username = $("#id_email").val();
$("#id_username").val(username);
});
</script>
I would do this serverside, but if you want it clientside you can also accomplish it like this:
$('#id_email').keyup(function() {
$('#id_username').val($(this).val());
});

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
}

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;
});
}

Categories