I am trying to change a page in the Wordpress menu dynamically. That is, I dont want to change the menu itself, but the page that is displayed in the backend. I am using jquery to add a div once a button is clicked. My javascript function looks like this
$(document).ready(function(){
$("#show").click(function(){
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
The button that is clicked submits a form and looks like this
<input type="submit" name="show" id="show" value="Show Me" class="button-primary" />
Once the button is clicked, the script works fine by adding the div briefly. The problem is, that the page is reloaded as well and the html code is "reset" so that the added div disappears again. Does anyone know a workaround for this?
Try
$(document).ready(function(){
$("#show").click(function(e){
e.preventDefault();
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
You can prevent the default behavior of the form button by using preventDefault(), would work like this:
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
$(".some_div").after("<div>I am added</div>").attr('class', 'some_class');
});
});
See: http://api.jquery.com/submit/
Related
My code for jquery is: (this will trigger on modal button click)
$(document).on('click', '.js-modal-remove-button', function () {
$('#code-output').attr('da-url',"1111");
});
My code for html is:
<input type="hidden" name="problemCode" id="code-output" da-url=2/>
problem is that there is a button in my page, on this button click modal opens and in the modal there is also a button contains class
js-modal-remove-button
on the action of that i need to set the my main page(on which where modal opening button present) da-url value
Just and another class to your button and use this jquery
HTML
<button class="js-modal-remove-button model_button_class"></button>
Jquery
$(document).on('click', '.js-modal-remove-button .model_button_class', function () {
$('#code-output').attr('da-url',"1111");
});
Here .model_button_class is the another class .
I thing it will help you.
Try this:
$('.js-modal-remove-button .model_button_class').on('click',function(){
$('#code-output').attr('da-url',"1111"); });
I have a contact form (Drupal Webform) that includes a file upload that creates a form containing this markup (i have stripped the name, size and id attr. in this example):
<div class="form-managed-file">
<input type="file" class="form-file">
<input type="submit" value="Upload" class="form-submit ajax-processed">
<input type="hidden" value="0">
</div>
I would like for the upload button to be clicked automatically on file upload. I have done this in the past with a function like this but it is not working on this one:
$('.webform-client-form').on('change', 'input.form-file', function() {
$(this).next('input[type="submit"]').mousedown();
});
However these are working on this form:
$('.webform-client-form').on('change', 'input.form-file', function(){
$(this).next('input[type="submit"]').css("background", "red");
alert($(this).next('input[type="submit"]').val());
});
The first gives the button a red background. The second alerts "Upload". Why is the mousedown not working? I have also used click() trigger("click") and trigger("mousedown") but none of them are clicking the upload button. I am using jQuery 1.10.
You're only triggering mousedown. You also need to capture the trigger and act accordingly, such as:
$('.webform-client-form').on('mousedown', 'input[type="submit"]', function() {
alert ("mousedown");
});
If I am not wrong, what you're trying to do is to submit the form when the .change is triggered. If that's the case, you might as well submit the form within your .change handler, such as:
$('.webform-client-form').on('change', 'input.form-file', function() {
$('.webform-client-form').submit();
});
Actually click() works fine:
$(this).next('input[type="submit"]').css("background", "red").click();
Here is the fiddle.
I have an ASPxButton to export some data from a webpage in different formats. There is a drop down (combo box) list of export formats. After a format is selected, the page has to reload. There are issues if that button is clicked before the page is fully reloaded, so I want to either disable the ability to click that button until the page is fully loaded.
How can I do this with jQuery?
Set the button's disabled attribute in your HTML, then in your jQuery enable it (by removing the disabled attribute) when the DOM is ready.
HTML:
<button id="foo" disabled="disabled">Click Me!</button>
JS:
$(function() {
$("#foo").removeAttr("disabled");
});
Initially keep disabled the button and make enable after document is ready. Use .on() and change as event when combobox/dropdownlist is changed. Like this.
HTML
<button id="btn" disabled="disabled">Export</button>
JS
//Enabled after document is ready
$(document).ready(function(){
$('#btn').removeAttr('disabled');
});
//Disabled when dropdownlist is changed
$(document).on('change', 'combobox #id or .class', function(event) {
$('#btn').attr('disabled', 'disabled');
});
<div id="homeDiv">
<form action="one_file">
.....
</form>
</div>
i need to disable the div and the action to take place
tried
$("#homeDiv").off();
$("#homeDiv").attr('disabled','disabled');
but the action part is working..
Any help
try this:
$("#homeDiv").attr('disabled', true);
or
$("#homeDiv").attr("disabled","disable");
Use show/hide property to the div.since your form is inside the div you dont need to do anything with the form.
$("#homeDiv").hide();
Or
$("#homeDiv").attr('disabled', true);
Prevent form submitting by
$("form").submit(function (e) {
e.preventDefault();
});
// use the following to disable div
$("#homeDiv").prop("disabled",true);
// Use the following to disable for ever tag within div
$("#homeDiv").children().prop("disabled",true);
I have built a fairly complex form which includes a hidden section that the user can toggle open for entering more information if necessary. However, when you click on this toggle button labeled I have more Nativities, it triggers the submit button and prematurely submits the form.
The form is in dev right now, but it can be found here.
The code I am using for the toggle button is:
<script type="text/javascript">
$(function() {
$("#schedule").accordion({ header: "h5", collapsible: true });
$("#more-nativities").hide();
$("#toggle").click(function() {
$("#more-nativities").slideToggle("slow");
});
});
</script>
The code for the submit button is pretty basic:
<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit" alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>
The code for the toggle button is:
<button id="toggle">I have more nativities</button>
Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?
Thanks!
Try adding a type, i.e.:
<button type="button" id="#toggle">Text</button>
http://www.w3schools.com/tags/tag_button.asp says this should be always defined. It's possible the browser is defaulting to a submit button.
Esteban has one solution. A better one is described in the jQuery tutorial:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Try
return false;
after the slide toggle on the click function fro the toggle button.
From W3Schools:
Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".
http://www.w3schools.com/tags/tag_button.asp
Be sure to specify type="button"