When my page loads I hide a div containing a form using
$('#popupPerson').hide();
then in the body I build a table and this popup to help insert/update/delete row data using a form that is initally hidden
<div id="popupPerson" class="popupPerson">
<form id="form_popup_person" action="person_update" method="post">
<fieldset>
<legend>Person</legend>
<label for="id">id</label> <input name="id" type="number" />
<label for="revision">revision</label> <input name="revision" type="number" /><p>
<label for="lastName">lastName</label> <input name="lastName" type="text" />
<label for="firstName">firstName</label> <input name="firstName" type="text" /><p>
<label for="street">street</label> <input name="street" type="text" />
<label for="city">city</label> <input name="city" type="text" /><p>
<label for="county">county</label> <input name="county" type="text" />
<label for="state">state</label> <input name="state" type="text" />
<label for="postalCode">postalCode</label> <input name="postalCode" type="text" /><p>
<label for="birthDate">birthDate</label> <input name="birthDate" type="text" />
<label for="email">email</label> <input name="email" type="text" />
<label for="status">status</label> <input name="status" type="text" /><p>
<input name="submit" type="submit" value="Submit" />
<input name="cancel" type="submit" class="cancel" value="Cancel" />
<button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
<button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
<button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button> <!-- makes ALL BUTTONS DISAPPEAR -->
<button type="button" class="cancel" onClick="$(this).hide();">hide button</button> <!-- makes the BUTTON ITSELF DISAPPEAR -->
</fieldset>
</form>
</div>
and some js so that if a row in the table is clicked this fires and makes the div visible
$('#popupPerson').show();
I want to add a "Cancel" button to the form that simply closes/hides the div - no submitting, no resetting.
you can simply write like
<button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>
I would use this: <button type="button" class="cancel" onClick="$(this).closest('.popupPerson').hide();">parent parent hide button</button> which closes the containing .popupPerson, incase you ever need more than one on a page.
Alternatively, you can put this in a script:
$(function(){
$(document).on('click','.popupPerson .cancel', function(){
$(this).closest('.popupPerson').hide();
// Do whatever else you want here, like eat the event (stopPropegation, etc).
});
});
And this is the element:
<a class="cancel">parent parent hide button</a>
Related
currently setting up a form to create a new order within a payment system and when I click any of the buttons within the form the form submits. Anyone know what the issue could be?
This is the code with the issue:
<form action="scripts/php/addorder.php" method="POST">
<script src="scripts/javascript/cookies.js"></script>
<script src="scripts/javascript/addproduct.js"></script>
<label>Choose Customer: </label>
<input type="text" value="" name="name" id="name" required readonly>
<button onclick ="window.open('customertable.php','popup','width=600,height=600');">Choose</button>
<br/>
<div id="products">
<label>Products: </label>
<br/>
ID: <input type="text" value=" " name="chosenproduct0" id="chosenproduct0" required readonly>
Name: <input type="text" value=" " name="chosenproduct0name" id="chosenproduct0name" required readonly>
Price: <input type="text" value=" " name="chosenproduct0price" id="chosenproduct0price" required readonly>
Quantity: <input type="number" value="1" name="chosenproduct0quantity" id="chosenproduct0quantity" required>
<button onclick ="findproduct('chosenproduct0');">Choose Product</button>
</div>
<br/>
<label>Discount: </label>
<input type="number" placeholder="0" name="discount" id="discount" step=".01" min="0">
<label>Total: </label>
<input type="number" value="0" name="total" id="total" readonly>
<button onclick="addproduct()">Add Product</button>
<br/>
<input type="submit" id="submit" value="Create New Order" class="button"/>
</form>
The default type for a <button> is submit. Explicity set it to button and it shouldn't submit the form by default:
<button type="button" onclick="addproduct()">Add Product</button>
By default, pages are refreshed/forms submitted when buttons are clicked. You can fix this by adding the attribute type="button" to your buttons.
<button type="button" onclick="myFunction()">My button</button>
Prevent using <button> element in the <Form> elements,
By default it's behavior is equivalent to <input type="submit"> element.
So Prefer this
<input type="button" value="Add Product">
Hi I'm sure I've written this code properly as I followed in the tutorial. I want the #booking-button to be clicked which should 'toggle' the #btn element to disappear. Essentially one is a box which contains information about a car and when user clicks 'Click here to Book' it should open the form. But for some reason it doesn't. I'm thinking it may have something to do with the CSS but I'm not sure.
Any tips on this?
<div class="form-wrapper">
<form action="#">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div class="car-info" id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
</div>
$(document).ready(function() {
$('#booking-button').on('click', () =>
{ $('#btn').toggle(); });
});
Now the form appears when user clicks Click Here to Book, while this button disappears.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
<form action="#" id="car-info" style="display: none;">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
<script>
$(document).ready(function() {
$('#booking-button').on('click', () => {
$('#car-info').toggle();
$('#btn').toggle();
});
});
</script>
I was trying to create other fields to be unclickable when the first input is focused but it seems it doesn't work. I did an illustration so that it will be understandable and my code looks like this.
May I know where I did it wrong?
$('.form-control').click(function() {
$(this).parent('div').next().children('.form-control').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
You want something like this:
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
$(this).parent('div') returns something like <div class="name"> and then using .next() will not find anything since it don't have any siblings.
Demo
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
When below input form is focused, I would like to execute a jQuery function:
var hasFocus = $("input#edit-search-block-form--2").is(':focus');
if (hasFocus) {
alert('It is working!');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
But I just don't get it to work. Would be glad for every advice.
You need to attach an event handler that keeps checking the focus event on that input element. Your current code executes only once, and at the time of execution the element does seemingly not have focus.
$(document).ready(function() {
$("input#edit-search-block-form--2").on('focus', function() {
alert('It is working!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
Please check the updated code below.
Run the focused function onfocus of the element.
I am then focusing on the submit button, otherwise everytime you close the alert, the focus will be placed on the input box again, and it will go into an infinite loop.
function focused(){
alert('It is working!');
$('#edit-submit').focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2"></label>
<input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" onfocus="focused()" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
</div>
<div class="form-actions form-wrapper" id="edit-actions">
<input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
</div>
<input name="form_build_id" value="1234567890abc" type="hidden">
<input name="form_id" value="search_block_form" type="hidden">
</div>
</div>
</form>
i have a hidden section ("secundaria") and i want to show it from a from out of the section with js. The section and its css is:
<section id="secundaria">
<!--Formulario 2-->
<h3>Nuevo pedido</h3>
<form id="formulario_secundario">
Nombre:
<input type="text" name="Nombre" value="" />
<br/>
Fecha de cierre:
<input type="text" name="Fecha_cierre" value="" />
<br/>
<input type="submit" value="Aceptar" name="aceptar" onclick="validar_rellenar(this.form)" />
<br/>
<input type="submit" value="Cancelar" name="cancelar">
</form>
</section>
And its css:
section#secundaria{
visibility:hidden;
}
I want to show it from this form with this function:
<form id="nuevo_form">
Envio:
<input type="text" name="envio" value="" />
<br/>
<input type="submit" id="nuevo" value="" onclick = "nuevo_formulario()">
</form>
<script>
function nuevo_formulario(){
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("secundaria").style.visibility = "visible";
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("nuevo_form").reset();
}
</script>
It's for class, so my teachers want the function and the section inside another section and the form outside. Thanks.
Your code is working correctly. The problem is that input of type submit will implicitly send the form, causing a page reload. Change to type="button" and everything works correctly.
function nuevo_formulario() {
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("secundaria").style.visibility = "visible";
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("nuevo_form").reset();
}
#secundaria {
visibility: hidden;
}
<section id="secundaria">
<!--Formulario 2-->
<h3>Nuevo pedido</h3>
<form id="formulario_secundario">
Nombre:
<input type="text" name="Nombre" value="" />
<br/>Fecha de cierre:
<input type="text" name="Fecha_cierre" value="" />
<br/>
<input type="submit" value="Aceptar" name="aceptar" onclick="validar_rellenar(this.form)" />
<br/>
<input type="submit" value="Cancelar" name="cancelar">
</form>
</section>
<form id="nuevo_form">
Envio:
<input type="text" name="envio" value="" />
<br/>
<input type="button" id="nuevo" value="" onclick="nuevo_formulario()">
</form>
Check this fiddle: https://jsfiddle.net/zjwon1sy/
Simply change the input input type="button"