I have a form with a hidden input:
<input type="hidden" name="productID" id="productID" value="">
I have a hidden Alert (using Bootstrap for this):
<div id="alert_ajax_error" class="alert alert-danger text-center" role="alert" style="display:none">
You have not made a selection. Please select an Item and try again
</div>
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" class="btn btn-success">Submit</button>
</div>
The hidden form input is populated via another script when users select from a table - it adds the productID as the value of the input.
I would now like to add some client side validation (have server side validation in place) so that if the user clicks Submit it checks to see if they have made a selection by checking for the presence of the hidden input to see if it has a value - if it is empty it will then show the hidden alert:
$("#alert_ajax_error").show();
I'm not sure if it's possible to check a hidden input with Javascript/JQuery and how to go about this if it is possible.
Basically you will want to check the value on submit using an if statement
$("form").submit(function(event) {
event.preventDefault();
if($('#productID').val() == '') {
$("#alert_ajax_error").show();
return false;
}
//.... more form actions if good ....
});
Related
I have three inputs in the following form. Two inputs type is text and another one input type is hidden. Now when I click the submit button then two input values need to set the hidden input before run the ajax query. Because, ajax will get the data from the hidden input only. I have tried it myself but, it's not working for me. Now, when I click the submit ajax working first then set the both values to hidden input.
<form>
<input type="text" class="date" value="2018-11-09">
<input type="text" class="time" value="15:00:00">
<input type="hidden" class="date-time" value="">
<button type="button" class="button">Submit</button>
</form>
For the following code I am assuming that the 'Submit' button has its type changed to 'submit' as this will give you more control of when the form is submitted:
$('form').submit(function(event) {
event.preventDefault(); // stop the form from automatically submitting
$('.date-time').val($('.date').val() + $('.time').val());
console.log($('input[type=hidden').val());
// call your ajax here
});
The important line here for your question is:
$('.date-time').val($('.date').val() + $('.time').val());
This sets the value of the input .date-time to the input of .date and .time, although I would recommend using ids instead of classes as they are unique
I'm trying to disable submitting the form until all fields are filled.
I've tried adding the disable option in the button but it doesn't work.
This is the form:
<form id="contactForm" name="contactForm" novalidate>
<input type="text" name="contactName" id="contactName" placeholder="Nombre" data-ng-model="cu.contactName" ng-model-options="{ updateOn: 'blur' }" required autofocus>
<span style="color:red" ng-show="contactForm.contactName.$dirty && contactForm.contactName.$invalid">
<span ng-show="contactForm.contactName.$error.required">El nombre es requerido.</span>
</span>
<button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje <span class="icon flaticon-envelope32"></span></button>
</form>
Right now, the button gets disabled when I start typing and then deletes everything in the input, when I try to click, it gets disabled, but what I want is that the button is disabled since the beginning and then when you fill the inputs it gets unlocked or un-disabled(if that's a word).
Please help, thanks!
The angular docs are actually pretty decent for form state handling:
https://docs.angularjs.org/guide/forms
Check the second-to-last example, where they display a message if the email is invalid.
Each state of every input should be reflected in the scope/controller.
So assuming you have this :
$scope.myInputs = {};
you should ng-model each input in the view to :
ng-model = "myInputs.email";
Then , using ng-blur/ng-change you should iterate through each property in the $scope.myInputs object to see if values are filled. only then you should control the disability of the submit.
I was able to solve this by adding this $pristine attribute:
User has not interacted with the field yet.
So my button looks now like this:
<button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid || contactForm.contactName.$pristine" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje <span class="icon flaticon-envelope32"></span></button>
Now it is disabled from the start and only enables itself once the user interacts and fill the (in this case) contactName input.
I have a form with two submit buttons, name="submit_button" and name="search_me_logo", and when the form arrives at the action location, it does two different things depending on which button was pressed.
When the enter key is pressed, I want it to do the same thing as the name="submit_button" but right now it seems to be sending the name="search_me_logo" by default.
Here's the HTML code you need:
<form action="/search_me.php" method="GET">
<div id="search_me_outer_div">
<button id="search_me_div" name="search_me_logo" type="submit">
<img id="search_me_image" src="/images/header/search_icons/search_me.png" height="33" alt='"search me"'/>
</button>
</div><!--
--><div id="search_box_outer_div">
<div id="search_box_div">
<input id="search_box" onfocus="hidePlaceholderAndShineBox();" onblur="showPlaceholderAndBlurBox();" name="search" type="text" spellcheck="false" size="32" placeholder='Get to know Sam... "search me"'>
<button id="search_div" name="submit_button" type="submit">
<img id="search_img" src="images/header/search_icons/fancy_search.png" height="21" alt="Go"/>
</button>
</div>
</div>
</form>
PHP:
if (isset($_GET['submit_button'])) {
echo 'submit was pressed<br>';
} else if (isset($_GET['search_me_logo'])) {
echo 'logo was pressed<br>';
} else if (isset($_GET['search'])) {
echo 'enter was pressed<br>';
} else {
//show error page
}
Right now when I press enter, it echos "logo was pressed". There is probably a way with JavaScript, but if it's possible simply with HTML/PHP, that would be wonderful.
By default, hitting the enter key will cause the first submit button. You can simply add the default submit action in a hidden div right at the beginning of the form. For example:
<form action="/search_me.php" method="GET">
<div style="height:0px; width:0px; overflow:hidden;"><button id="search_div" name="submit_button" type="submit"></button></div>
and keep the rest as is.
Edit: some browsers won't let the enter key to trigger the first button if it's not displayed (e.g. display:none;).
However it will work with:
width: 0;
height: 0;
overflow: hidden;
In the CSS of the element that contains the hidden submit button.
Thanks for all the suggestions. #NoGray's answer could work or I just did two forms, as #Irdrah suggested.
Each forms' buttons and inputs had different names, and one of the inputs had a type="hidden" and id="hidden_input". Then when the submit for the form with the hidden input was clicked, I used jquery's submit() to set
document.getElementById('hidden_input').value = document.getElementById('shown_input').value;`
and returned true. I haven't tried #NoGray's but I'm sure it would work.
i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.
<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test">
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>
stumped with:
1) how to validate that user has to select at least 1 button and
2) how to capture value(s) of selected buttons to be sent to PHP (form).
very novice with web development. Need help. Thanks.
Suppose you have three buttons as shown below:
<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">
You can make a hidden field there with an array as given below:
<input type="hidden" class="newField" name="buttonValue[]">
Now, use it in Jquery:
$(document).ready(function(){
$('.button').click(function(){
var values = $(this).val();
$('.hidden').val(values);
});
});
and now when you submit a form then you can easily get value from that field and make a validation accordingly.
there is many ways to do this if you want to submit a form with PHP than its very simple you can add a class and use a hidden fields on the click you can add a class and put a value on hidden field and after the submit you can easily get all the value form hidden fields. you can easily check value of hidden fields, so with this you can validate as well that user select any button or not..
I have a JSP page in which there are two forms.
One is the default and another is hidden.
On default form, there is a link to the hidden form. On click of this link, the hidden form appears which has some input fields and submit button.
When I click on submit, obviously the form gets submitted.
But when the output comes, the page gets loaded and shows the default form. I want to show hidden form instead. What should I do?
My JSP page has following code structure:
<div id="1st_form">
<form id="defaultForm" action="/searchModel/search">
%{-- form input fields--}%
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
<div id="2nd_form" hidden="hidden">
<form id="hiddenForm" action="/searchModel/search">
%{-- form input fields--}%
<input type="submit" id="searchButton" value="Advanced Search" >
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
And javascript functions are as follows:
function advancedSearch(){
$("#1st_form").hide();
$("#2nd_form").show();
}
function normalSearch(){
$("#2nd_form").hide();
$("#1st_form").show();
}
The problem is, when you send any HTML page to the client, all changes you did with Javascript previously will be lost. That is why you see the default form visible again after submit.
What you want to do is:
When the "Advanced Search"-button is clicked, show the "Advances Search" form and make the "Default" form hidden in the response.
What is something you need to do on server-side, because the client does not know which button submitted the form to the server.
So, you need check if the form was submitted by the "Advanced Search"-button on server side. To be able to do this, you need to give the button a name:
<input type="submit" id="searchButton"
name="searchButton" value="Advanced Search" >
Now, when this button is clicked, it's value will be sent to the server. In this case, Advanced Search.
Next, you need to check if this value was sent to the server in your JSP:
<div id="1st_form" ${param.searchButton == 'Advanced Search'?'hidden':''} >
...
</div>
<div id="2nd_form" ${param.searchButton == 'Advanced Search'?'':'hidden'} >
...
</div>
Note: param is an implicit object in Expression Language.
This way, when you first open the page, param.searchButton will be empty and it will show the default search. When the "Advanced Search" button was submitted, param.searchButton will be Advanced Search, and the advanced search will be visible.