I have been creating my site in bootstrap and I have come across a weird problem, when I hit a button that has this in it
<form action="javascript:$('#modal .modalbody').load('/controllers/forums/create_topic_modal.php?id='.$forumName['id'].'',function(e){$('#modal').modal('show');});">
<input type="submit" class="btn btn-primary btn-md" value="Create New Post" />
</form>
all I get in firefox is a browser page that says [object Object] and the URL says
javascript:$('#modal .modal-body').load('/controllers/forums/create_topic_modal.php?id=1',function(e){$('#modal').modal('show');});
Any idea whats happening? Works fine in Chrome.
You have to use onsubmit attribute (fires when a form is submitted).
If you add return false; at the end of onsubmit, the form will not trigger a basic behavior (eq. get request/"page refresh").
<form onsubmit="$('#modal .modalbody').load('/controllers/forums/create_topic_modal.php?id='.$forumName['id'].'',function(e){$('#modal').modal('show');}); return false;">
<input type="submit" class="btn btn-primary btn-md" value="Create New Post" />
</form>
Related
I am new to web technologies, trying to build a basic website.
Technology stack: Python+Flask and HTML+CSS+JS on frontend.
I have a button, from which I am trying to redirect to a relative URL:
Button html:
<div class="form-group">
<input type="submit"
class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue"
value="Register"
onclick="approve()">
</div>
Javascript:
function approve() {
window.location.href = '/approve';
}
This is not taking me to: http://127.0.0.1:5000/approve
rather to: http://127.0.0.1:5000/?
Can anyone please guide?
SOLUTION:
Thank you all, this helped: return false
https://stackoverflow.com/a/26518061/4253760
I still have a question, what is this URL with ? mark
http://127.0.0.1:5000/?
Your button is of type "submit". This will submit the form. The form has no URL defined, so it assumes the current document, in your case "/". The question mark in "/?" is followed by the form contents (key/values), in your case, the form is empty (it has no input values, only a button)
You should use input of type "button" or the onclick should read "approve(); return false" to prevent the form from being submitted and instead execute your function
Change your input type to use button
<div class="form-group">
<input type="button"
class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue"
value="Register"
onclick="approve()">
</div>
Because you were using submit it would have submitted to the form action rather than your javascript.
I am using jquery form plug-in for posting my form ajax way.
Post is working fine with default button.But it is not working when I am using custom bootstrap button as below . Please let me know what i am missing here?
http://jquery.malsup.com/form/#validation
Working case :
<input name="Update" value="Update" type="submit">
Not working case:
<a class="btn btn-sm btn-bitbucket" name="Update" value="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"> </i> Update
</a>
I've just removed my comment as any of these should work:
<input name="Update" value="Update" type="submit" class="btn btn-sm btn-bitbucket">
<button class="btn btn-sm btn-bitbucket" name="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"></i> Update
</button>
An anchor can't (by default) be used to submit the form, hence why it isn't working. However Bootstrap allows you to use the button classes on input and button tags.
Sorry for the ghost comment now!
I am very new in JavaScript and I have the following problem.
I have this form:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this)">ACCEPT ICON BUTTON</button>
<button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
<button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>
<input id="testId" name="test" type="hidden">
</form>
As you can see this form contains 3 different button. Clicking on one of this button it is performed the sottometti(this) Javascript script, that have the following code:
function sottometti(obj){
//document.getElementById('testId').value = obj.value;
document.getElementById('testId').value = obj.value[id]
document.getElementById('actionButton').submit()
}
This script should submit the previous form (the id of the clicked button) but it don't work. Why?
I think that it is trying to retrieve an actionButton that is not present in my form code.
Can you help me to make it work?
replace obj.value[id] with obj.id.
Try this alternative:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button name="ctrl" value="accept" type="submit" class="acceptButton">ACCEPT ICON BUTTON</button>
<button name="ctrl" value="cancel" type="submit" class="cancelButton">CANCEL ICON BUTTON</button>
<button name="ctrl" value="sap" type="submit" class="sapButton">SAP ICON BUTTON</button>
</form>
I have basically just removed all the JavaScript and the hidden input.
Now, on the server side, test it by simply outputting the value of the ctrl POST variable.
You should clearly see accept, cancel or sap according to the button that the user clicked. No JavaScript required, it's built-in, default functionality :)
Maybe it is duplicate question but I haven't get any answer yet,I'm submitting one form with two different action urls.
First time form submit but second time form is not submit,it is happening only in chrome browser.
Form tags:
<form class="form-vertical" id="renters-form" action="/renters/media" method="post">
I have two buttons.
<input type="button" class="btn button-next" id="next" name="next" value="Continue" />
<input type="button" class="btn button-next" id="previewprofile" value="Preview Profile" style="display:nonoe;" />
First time this code is working and form will be submit.
$("#next").on('click', function(){
$("form").submit();
});
but second time
$("#previewprofile").click(function(){
alert('test');
$("#renters-form").submit();
});
not working , form id is renters-form
Why form is not submitting in chrome browser?
You stated that you set the name to "renters-form" and you are trying to reference it as an ID.
We would need more info to confirm whether or not it was a grammatical error or not.
I have form that takes input and i have submit button and reset input type... i have issue with submit button tag in IE 7, all rest of browser and IE version >7 working fine...
here is my code ...
<form id="form_searchProperty" action="../jQuery Search Engine/searchPage01.html">
//input tag for form value
<div class="submitCriteria">
<button class="button_submit" >Search</button>
<input class="button_reset" type="reset" />
</div>
</form>
jQuery function
$("#form_searchProperty").submit(function () {
var givenCriteria = $(this).serializeArray();
});
Use the type submit,
<button class="button_submit" type='submit' >Search</button>
<button> does NOT submit forms unless you tell it to - at least, it's not supposed to. It does in some browsers, for some annoying reason.
Why not use an actual submit button?
<input type="submit" class="button_submit" value="Search" />