I'm creating a custom alert by using jquery dialogue and currently on click submit (with id=submit) it checks to see if the value of id choose_client = "" and if so, prompt dialogue box and not process form.
What its doing instead is processing the form instead AND not even showing the dialogue. Any ideas why? Here is my code:
$('#submit').click(function(){
if($('#choose_client').val() == ''){
$("<div title='Invoice Error'>Please Choose A Client</div>").dialog();
event.preventDefault();
}
});
html:
<form method="post" action="new_invoice.php">
Client: <select id="choose_client" name="client">
<option name="client_none" value="">Choose A Client</option>
</select>
<input type="submit" id="submit" name="submit" value="Submit" class="step" disabled>
</form><br />
In order for event.preventDefault(); to work, you need to pass event as an argument:
$('#submit').click(function(event){
Related
I am using the validate plugin in order to send some ajax. I am having the problem that I cannot serialise select option and checkbox.
My end result is to have a string looking like dashName=aaa&dashSurname=bbb&dashArea=Blue...
With the code below I can just get the input text values; How can I validate and get the values from other elements?
here the fiddle
$('#updateMemberForm').validate();
$(document).on('click', '#saveMemberBtn', function() {
if ($('#updateMemberForm').valid()) {
var serialize = $("#updateMemberForm").serialize();
$("#test").text(serialize);
console.log(serialize);
}
return false;
});
HTML:
<form method="post" id="updateMemberForm">
<input class="" type="text" name="dashName" placeholder="Name" />
<input class="" type="text" name="dashSurname" placeholder="Surname" />
<br>
<select onchange="" name="dashArea">
<option value="" selected disabled>AREA</option>
<option value="Red">RED</option>
<option value="Blue">BLUE</option>
<option value="Green">GREEN</option>
</select>
<br>
<input class="" type="text" name="dashAddress" placeholder="Address" />
<input type="checkbox" id="checkbox1" name="dash_enable">
<br>
<input type="submit" class="" id="saveMemberBtn" value="SAVE" />
</form>
Since your SAVE button is a type="submit", you would not need a click handler to capture it and test validity. The submithandler built into the plugin is already doing this for you.
$('#updateMemberForm').validate({
submitHandler: function(form) { // only fires when valid
var serialize = $("#updateMemberForm").serialize();
$("#test").text(serialize);
console.log(serialize);
// AJAX goes here
return false;
}
});
DEMO: https://jsfiddle.net/rsfonzL7/
As already mentioned in the comments, when a checkbox is not checked, nothing is sent in the query string, and this is handled on the server side. This has nothing to do with jQuery Validate or .serialize()... this is just how form data is constructed and sent, no matter the method.
I have a form in a page with 2 buttons. One trigger a function to calculate a price and the other one is the real submit of the form.
This is a simple example:
<form novalidate name="formStep1">
<select ng-model="address" required>
<option></option>
<option></option>
</select>
<input type="text" ng-model="weight" />
<label>{{price}}</label>
<button ng-click="getPrice()" />
<button value="submit"/>
</form>
I need to trigger all validators like $error and $submitted to put ng-class on the select and input tags of the form because when do the function I need all the inputs with text.
Thanks.
In your form you have two fields which don't have the names attribute assign to it. To make those field as a part of form you need to assign name attribute to those element. Once you add the name attribute to them angular form validation will start showing its infect.
You could also have submitted flag to keep a track of form has been submitted by getPrice() method or not. On click of that make that flag to true & use it as while doing a validation using ng-class
Markup
<form novalidate name="formStep1">
<select ng-class="{'error': submitted && formStep1.address.$invalid}" name="address" ng-model="address" required>
<option></option>
<option></option>
</select>
<input ng-class="{'error': submitted && formStep1.weight.$invalid}" type="text" name="weight" ng-model="weight" />
<label>{{price}}</label>
<button ng-click="submitted=true; getPrice()" />
<button value="submit"/>
</form>
Answering myself with #Pankaj's help:
With all names in inputs and passing formStep1 as an argument in getPrice function I can access to input validation like:
$scope.getPrice = function (form) {
if(!form.nameOfInput.$dirty) {
form.nameOfInput.$invalid = true;
} else {
// GET PRICE
}
}
Is this a good aproach in case to need to validate inputs in a none submit button?
I know how to submit a form from outside the form, for example:
<form action="Get?id_sec=120" method="post" id="form15" name="form15" style="display:none"></form>
<input type="submit" class="finish-button primary-button button" border="0" value="Limpar pedido" form="form15" onclick="javascript:document.form15.submit();" />
But I want to put a tag with a reference to the form with javascript too, because command form="example" doesn't work in Internet Explorer.
example:
<input class="input-cep" name="pr001" id="cepfrete" type="text" form="form15"/>
or
<input type="radio" name="tipofrete" value="4" form="form15">`
How can I do that?
Hey Vince, thanks, this works. Very useful help! I need just one other thing. How can I put an input and select in the same form in jQuery?
example:
<input type="text" data-form="dataForm" name="external-input-2">
<Select id="selectField_1" name="selectField_1" data-form="dataForm" >
<option value="52" data-form="dataForm">A</option>
</Select>
To submit a form from outside the form:
HTML
<form id="theForm">...</form>
<button id="submitTheForm">Click to Submit</button>
jQuery
$('#submitTheForm').on('click', function() {
$('#theForm').submit();
});
To include external inputs in the form submission:
HTML
<form id="theForm">...</form>
<button id="submitTheForm">Click to Submit</button>
<input type="text" data-form="theForm" name="external-input-1">
<input type="text" data-form="theForm" name="external-input-2">
jQuery
You can append the external inputs as hidden inputs to the form:
$('#submitTheForm').on('click', function() {
var form = $('#theForm');
$('input[data-form="theForm"]').each(function() {
var input = $(this);
var hidden = $('<input type="hidden"></input>');
hidden.attr('name', input.attr('name'));
hidden.val(input.val());
form.append(hidden);
});
form.submit();
});
I'm not sure that I can completely understand your question but if you are asking how to submit a form externally in different situations, her is my answer.
For the future, just put an id on the form like this.
<form id="form15"></form>
Then to submit this form from anywhere, all you have to do is call the following javascript line in an onclick, a function, etc.
document.getElementById("form15").submit();
Here's the problem: I have a simple form with three buttons and some hidden input fields. Depending on the button pressed (different name="" values), the action does something different.
I am now trying to add a confirmation dialog box to this form by doing this:
<form method="POST" action="/action" onsubmit="return confirmFormSubmit(this);">
<input type="submit" name="one" value="This">
<input type="submit" name="two" value="That">
<input type="submit" name="three" value="Something else">
</form>
<script type="text/javascript">
function confirmFormSubmit(obj)
{
window.event.preventDefault();
jConfirm('Are you sure you want to do this?', 'Awaiting confirmation', function(r) {
if (r == true) {
obj.form.submit();
} else {
return false;
}
});
}
</script>
When I click OK, the action happens, but the input button is not submitted.
Doing 'document.location = obj.form.action;' is not an option because that will not submit the POST parameters.
How can I make the damn thing submit the input fields and not just call the action?
I think that it is because the onsumit method overrides the action in your form declaration.
I would actually change the button of the form and make it a button linked to a javascript method that performs required tests and submit values to the right action.
<form method="POST" action="/action">
<a href="javascript: confirmFormSubmit(this)">
<input type="button" name="three" value="Something else">
</a>
</form>
something like this should be working
I have a dropdown menu with a couple of values that link to functions. I also have a textbox and submit button. Basically what I want to do is if a certain value in the drop down box is selected it disables or hides the submit button and possibly the textbox is made blank and once another value is selected it turns both back on.
My HTML Code:
<body>
<p><label>Drawing tool: <select id="dtool">
<option value="line">Line</option>
<option value="rect">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="eraser">Eraser</option>
</select></label></p>
//Some canvas code
<form id="frmColor">
<input type='color' id='color' />
</form>
<input type='submit' value='Change Color' id="colorSubmit"/>
Javascript in a linked file called canvas.js:
...
tools.eraser = function () {
var tool = this;
this.started = false;
var varPenColor = "White";
context.strokeStyle = varPenColor;
document.frmColor.colorSubmit.disabled=true;
Basically when I select the eraser from the drop down it all works but the submit button will not disable.
Im new to JS and not sure if I need to add some sort of listener or get element id any ideas?
You have the submit button outside of the form. (as seen in the example code..)
<form id="frmColor">
<input type='color' id='color' />
</form>
<input type='submit' value='Change Color' id="colorSubmit"/>
should be
<form id="frmColor">
<input type='color' id='color' />
<input type='submit' value='Change Color' id="colorSubmit"/>
</form>