<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-theme">
<input type="file" name="file" value="" style="display:none;" required=""> click Me to choose file
</label>
<label class="btn btn-success">
<input type="checkbox" name="checkbox" value="yes" style="display:none;" required=""> Are You agree ?
</label>
<br>
<input type="submit" name="" value="Submit">
</form>
i want to show alert whenever user haven't selected any file or not agree and press Submit button in my given code.
right now it giving "An invalid form control with name='file' is not focusable."
I know the reason behind it but how can i alert my user that you have not selected anything.
I do not like to use Jquery Submit or show them choose file icon.
Is there any way to get that element (with help of jQuery) on which browser trying to focus ?
This other issue seems to be similar. Can you add novalidate attribute to your form? This is seen here: An invalid form control with name='' is not focusable
JQuery has a focus method that should do what you want.
Create a variable somewhere that will keep track of whether the user has clicked on an input.
var inputFocusOccured = false;
Then use the focus method to change the variable whenever a user clicks or touches an input.
$("input").focus(function(){
inputFocusOccured = true;
});
Then when the user clicks submit have it check if the value is true or false
$("#SubmitBtn").click(function() {
if(inputFocusOccured === false){
alert( "Handler for .click() called." );
}
});
Related
I have a text form that uses a radio button of two options. For example, the 'exact match' is checked by default. However, whenever the 'submit' is clicked, the option reverts back to the default section, which is undesired. I want to retain the radio option currently selected by users, not the default one.
<form class="search" action="{{ url_for('nlp.wbkg') }}" method="post">
<input name="query" type="text" id="query" value="{{query}}" autocomplete="on" required>
<button type="submit"><i class="fa fa-search"></i></button>
<div>
</div>
<div>
<input type="radio" name="options" id="exact" value="exact" checked="checked"> Exact match </input>
<input type="radio" name="options" id="fuzzy" value="fuzzy"> Fuzzy Match </input>
</div>
</form>
How to achieve that effect?
EDIT: add my server-side code in flask:
#bp.route('/wbkg', methods=('GET', 'POST'))
def wbkg():
if request.method == 'POST':
query = request.form['query']
search_type = request.form['options']
results, terms = search(query, search_type)
return render_template('nlp/wbkg.html', items=results, terms=terms, query=query)
flash(error)
return render_template('nlp/wbkg.html')
How to handle it in server side?
Since you are wrapping your element in a form tag you should be sure to have your submit handler run event.preventDefault() to prevent the resetting of the form after the submit is fired. You may be witnessing the reset of the form after the API call was sent. You can confirm this by looking at your REQ body to see if the data sent is correct.
i have one form with some input text with the name = "user_name" , "mob" , "email" and inside this form i have a link for example Plans and end with submit button. Now if user click the link then i want to have all the values of the input text of the same form send to another page to pks.php and if the user click on the submit button then it will work on action confirm.php. For example Check this code
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
PLANS
<input type="submit">
</form>
Can you help me out?? How can i achieve this. Thanks in advance
The simplest way is to change the link to a second submit button. You can then use the formaction attribute to change the URL the form submits to when you use this button.
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<input type="submit" formaction="pks.php" value="PLANS">
<input type="submit">
</form>
If you can't do that, you need to run Javascript when they click on the link. You can have this code change the action of the form, and then submit it.
document.getElementById('plans').addEventListener('click', function(e) {
e.preventDefault();
var form = document.getElementById('myform');
form.action = this.href;
form.submit();
});
<form id="myform" action="confirm.php" method="post">
<input type="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<a id="plans" href="pks.php">PLANS</a>
<input type="submit">
</form>
You will probably want to use JavaScript to control the form if you want the action attribute to change. By default, submitting the form will cause it to post to confirm.php.
Using JQuery you can do this:
$('form').on('submit', function(e) {
// Stop the form from submitting
e.preventDefault();
// Do logic to determine what action you should do
var myAction = 'pks.php';
// assign the action to the form
$(this).attr('action', myAction);
// submit the form
$(this).submit();
});
I haven't run this script so it may not work out of the box but you should be able to adapt and fix it without too much difficulty.
i'm using button key for my project but this is not work when i push Enter Key.
why 'enter key' not working in this form?
<form action="" method="post">
<input type="text" >
<input type="button" >
</form>
how this is work with javascript, plz help me
i will not sue type="submit"
It seems you want implicit submission:
A form element's default button is the first submit
button in tree order whose form owner is that
form element.
If the user agent supports letting the user submit a form implicitly
(for example, on some platforms hitting the "enter" key while a text
field is focused implicitly submits the form), then doing so for a
form whose default button has a defined activation behavior
must cause the user agent to run synthetic click activation steps
on that default button.
Therefore, the button must be a submit button, not a button in button state:
<input type="submit">
I think an <input type="submit"> is what you want :)
$(form).on('submit', function{
//do whatever you want...
})
<form action="raftel">
<input name="name" type="text"/>
<input name="password" type="password"/>
<input type="submit"/>
</form>
I have the following ajax code which submits name/email/message parameters to "messageaction.cfm" template and displays those same 3 parameters on original submission page (works fine):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
$.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}
</script>
<form id="ContactForm" onsubmit="return submitForm();">
Name: <input type="text" name="name" value=""><br>
Email: <input type="text" name="email" value=""><br>
Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
<br>
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
<div class="form_result"></div>
</form>
However, I have 2 submit buttons (corresponding values of "One" and "Two") and would like to be able to detect which one was pressed. In a normal submit form (without ajax), the variable "Choice" is diplayed correctly with the corresponding "One" or "Two" depending on which button I clicked. But in the ajax form, the "Choice" variable only displays the same "0" (default value) regardless of which button I press.
I have tried 2 other ajax form variations but cannot seem to pass the value of the input submit button value. There must be something really basic I'm doing wrong but have tried just about everything I can think of. Any suggestions would be highly appreciated!
Since id is unique and name attribute should be unique in the same form as well, you should change:
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
to:
<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">
and try again with your AJAX code. Make sure you target it properly this time :)
At the time of the submit event, jQuery.serialize() does not know which button was clicked, so it is likely skipping those buttons when generating the form data.
You'll have to process the click events for each button as well and manually pass the button value.
An alternative would be to set a hidden form field value when the user clicks a button since a button click event will get processed before the form submit.
I have an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?
<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">
<input type="text" maxlength="5" size="5" name="frmZip" value="">
<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">
<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
EDIT:
Found my solution.
I changed from
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
to
<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>
This prevented the button from submitting the form so I submitted it in my doClick() via javascript.
EDIT 2:
While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:
<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">
And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.
While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:
<form onsubmit="return validateForm()">
Then, in your validateForm method, return true or false indicating whether or not the validation has passed.
However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.
Update
As pointed out in the comments, an unontrusive solution is often desirable so here's that:
document.getElementById('theForm').onsubmit = function() { return validateForm(); };
Your button inside the form will not submit the form on enter if you add preventDefault...
$("form").submit(function(e) {e.preventDefault();});