I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?
put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.
Remove <input type=""> for Overwrite button you may use <button>
Overwrite
<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/
Related
I have a script that trigger when the submit button is clicked.
It has a return confirm javascript. If the user clicks OK, it works fine, but if they click CANCEL, it still triggers by rolling the spinner continuously.
Please help.
Below is the code snippet:
<script>
//submit search, display loading message
$('#searchbtn').click(function () {
$('.spinner').css('display', 'block');
});
</script>
<input type="submit" value="Search" id="searchbtn" class="btn btn-primary btn-block" onclick=" return confirm('Are you sure to proceed')" />
The below is the HTML for those asking.
<p>
#using (Html.BeginForm("AllLoanProcessed", "Transactions", new { area = "Transactions" }, FormMethod.Get , new { id = "formID" }))
{
<b>Search By:</b>
#Html.RadioButton("searchBy", "Account_Number", true) <text>Account Number</text>
#Html.RadioButton("searchBy", "Surname") <text> Surname </text> <br />
#Html.TextBox("search", null, new { placeholder = "Search Value", #class = "form-control" })
<br />
<input type="submit" value="Search" id="searchbtn" class="btn btn-primary btn-block" />
}
</p>
you can write your code like this too, instead of calling click event 2 times you can call it at once, try my below code, this may help you.
$('#searchbtn').click(function () {
var x = confirm("Are you sure to proceed"); //confirm text
if (x == true) { //checking wheather user clicked ok or cancel
$( "form" ).submit();
$('.spinner').css('display', 'block'); //if clicked ok spinner shown
} else { //else if clicked cancel spinner is hidden
$('.spinner').css('display', 'none');
return false //stops further process
}
})
.spinner{
display:none;
}
<form action="javascript:alert( 'success!' );">
<input type="text"/>
<input type="button" value="Search" id="searchbtn" class="btn btn-primary btn-block" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1 class="spinner">
my spinner
</h1>
change h1 of the spinner to your spinner,
try it here fiddle
you need to put more code, this is not enough, but I guess this may help you:
$('#searchbtn').click(function () {
$('.spinner').show();
//start code to search
setInterval(function() {
//finish code to search
$('.spinner').hide();
}, 5000);
});
$('#cancelbtn').click(function () {
$('.spinner').hide();
});
.spinner{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spinner"> This is a spinner</div>
<button type="button" class="btn btn-danger btn-block" id="cancelbtn">Cancel</button>
<button type="button" class="btn btn-primary btn-block" id="searchbtn">Search</button>
if you're using bootstrap (I assume this by the class btn btn-danger) the best practice is using an button element. And you can use show hide function.
I hope this can help you.
Here is another option:
We manually submit the form based on what the user clicks in the confirmation box
function showSpinner(confirmed) {
if (confirmed) {
$('.spinner').css('display', 'block');
$('#formID').submit();
}
}
.spinner{ display: none; }
<input type="button" value="Search" id="searchbtn" class="btn btn-primary btn-block" onclick="showSpinner( confirm('Are you sure to proceed') )" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1 class="spinner">My spinner</h1>
I have a form with a text input field and a button. What I am trying to achieve is that after the user types something in the text input field and clicks the button, the text he typed in the box will be displayed in the span underneath the form. For some reason it doesn't work and I am trying to figure out why.
My HTML:
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>
My JS/jQuery:
$(document).ready(function() {
$("#submitButton").on("click", function() {
var input = $("#textInput").val()
$("#guests").html(input)
})
});
The JS file in which I have my JS code is linked in the head like this:
<head>
<script src="guestList.js"></script>
</head>
You will need Event.preventDefault();.
Every time you click on button, page is being refreshed so no value is displayed. Default action of <Button> is to submit the form hence page is reloaded(Submitted).
Another easier option would be to set type = "button" hence button will not act as Submit button.
$(document).ready(function() {
$("#submitButton").on("click", function(e) {
e.preventDefault();
var input = $("#textInput").val()
$("#guests").html(input)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>
Your button submits the form so page refreshes.
Just set Button type as type="button"
> <button id="submitButton" type="button" class="btn btn-primary">Submit</button>
HTML:
<form>
<input type="text" id="textInput">
<input type="submit" value="Submit" id="submitButton">
</form>
<span id="guests"></span>
JQuery:
$( document ).ready( function() {
$( "form" ).submit( function(e) {
e.preventDefault();
var input = $( "#textInput" ).val();
$( "#guests" ).html( input )
})
});
How can I pass the ID of a button to a hidden input?
I have a foreach to list users and generate a delete button, I want to pass the button's ID to a hidden input inside a modal.
#foreach
<button type="button" id="{{$user->id}}" data-toggle="modal" data-target="#modal-delete" onclick="deleteUser();"> Delete </button>
#endforeach
Here is what I've tried but didn't work.
function deleteUser(id) {
$('input[name=user_id_modal]').val(id);
alert(id);
}
<input type="hidden" name="user_id_modal">
^ button's id should go here.
You can pass the userId into the function and manipulate the hidden input's name value as follows:
function deleteUser(id) {
$("input[name='user_id_modal']").val(id);
console.log("Input value set to: " + $("input[name='user_id_modal']").val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="userId" onclick="deleteUser(this.id);"> Delete </button>
<input type="hidden" name="user_id_modal">
#foreach
<button type="button" id="{{$user->id}}" data-toggle="modal" data-target="#modal-delete" onclick="deleteUser({{$user->id}});"> Delete </button>
#endforeach
<input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') {
I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".
I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.
<form #ticketForm="ngForm" novalidate>
<input type="text" id="customerName" required
name="customerName" [(ngModel)]="ticket.customerName"
#customerName="ngModel">
<div class="tj-form-input-errors"
*ngIf="customerName.errors && (customerName.dirty ||
customerName.touched || ticketForm.submitted)">
<small [hidden]="!customerName.errors.required">
Customer name is required
</small>
</div>
<button type="button" (click)="save(ticketForm)">Save</button>
<button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>
Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :
In your Html :
<form #form="ngForm" (submit)="firstSave(form,$event)">
...
<div class="form-group">
<input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
<input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
</div>
</form>
Then in your typescript :
firstSave(form: NgForm, $event: Event) {
var activeButton = document.activeElement.id; // document.activeElement?.id
if (activeButton == "submit-1") {
alert("you have clicked on submit 1");
}
if (activeButton == "submit-2") {
alert("you have clicked on submit 2");
}
}
StackBlitz Here.
You can subscribe to form changes, which I think will fire form validation.
I do something like this:
this.physicalForm.valueChanges
.map((value) => {
return value;
})
.filter((value) => this.physicalForm.valid)
.subscribe((value) => {
do what you need with the values here...
});
Then in your click handler for each button, if this.physicalForm.valid you save or save&update.
i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'
Solution
You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.
Sample code
//here formData is my payload for the API call eg: formData.name,formData.email
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>
html:
<input id="save "type="submit" value="Create" class="btn btn-primary"/>
javascript that register onclick (IsValid is a function that validates before submiting, returns true of false)
$('#save').click(function () {
return IsValid();
});
Note that this exact same code works if I write:
<input id="save "type="submit" value="Create" class="btn btn-primary" onclick='javascript: IsValid();'/>
This is another option without modifying the markup (createForm is the form)
$('#createForm').submit(function () {
return IsValid();
});
Why $('').click is not registering my event handler?
Form looks like this:
<form method="post" id="createForm" class="well" action="/ScheduleWorkDay/Create" novalidate="novalidate">
It maybe that your id has a space or you have not used document.ready()
here is the working demo
<input id="save" type="submit" value="Create" class="btn btn-primary"/>
$(document).ready(function(){
$('#save').click(function () {
alert("invalid");
});
});
Demo
MrOBrian was right. The problem was that
<input id="save "
had an extra space in the id name. Thanks!
Your event handler isn't registering because there are no handlers on the form with the id save, but there is a save (with a space). Remove the space.
<input id="save" type="submit" value="Create" class="btn btn-primary"/>
$('#save').click(function () {
return IsValid();
});
should work without issues.
A jsFiddle showing it working