I'm trying to fire a cookie saving the persons first name when a button is clicked. And then show the cookie when the read cookie button is clicked.
However, the cookie doesn't seem to be saving?
<form id="myform">
<input type="text" id="fname" value="First name"><br />
<input type="text" id="lname" value="Last name">
</form>
<input id="btnAdd" type="button" value="Add Cookie" />
<input id="btnRead" type="button" value="Read Cookie" />
<script type="text/javascript">
$(function () {
$("#fname").click(function () {
$.cookie("Name", $("#fname").val());
});
$("#btnRead").click(function () {
alert($.cookie("Name"));
});
});
</script>
<form id="myform">
<input type="text" id="fname" value="First name"><br />
<input type="text" id="lname" value="Last name">
</form>
<input id="btnAdd" type="button" value="Add Cookie" />
<input id="btnRead" type="button" value="Read Cookie" />
<script type="text/javascript">
$(function () {
$("#btnAdd").click(function () {
$.cookie("Name", $("#fname").val());
});
$("#btnRead").click(function () {
alert($.cookie("Name"));
});
});
</script>
Related
How to disable require in inputs with name = "item_name",name="description" and name="quantity" when i click purpose and enable the require in purpose textarea by using javascript.
Edit: What I really mean is when i submit the form by clicking ADD, only the input with name item_name description quantity are required and When I submit the form by clicking Purpose, the textarea will be the one who is required
Here is my code:
<form action="../function/add_item.php" method="post">
<input id="autocomplete" name="item_name" placeholder="Item Name" required>
<input type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
I assume this is the code you might be looking for:
$(function() {
$('[type=submit]').on('click', function() {
if($(this).attr('name') == 'submit') {
$('[name=item_name], [name=description], [name=quantity]').attr('required', 'required');
$('[name=purpose]').removeAttr('required');
} else if($(this).attr('name') == 'purpose') {
$('[name=purpose]').attr('required', 'required');
$('[name=item_name], [name=description], [name=quantity]').removeAttr('required');
}
});
});
Add an id to your button
<button id="purpose" type="submit" class="btn btn-info">Purpose</button>
Then
$(function() {
$('#purpose').click(function() {
$('#item_name').removeAttr('required');
$('#description').removeAttr('required');
$('#quantity').removeAttr('required');
$('textarea').attr('required','1');
});
});
Try this one. I just added up some javascript and add id's
document.getElementById('purpose').onclick = function() {
document.getElementById("name").required=false;
document.getElementById("des").required=false;
document.getElementById("qnt").required=false;
}
<form action="../function/add_item.php" method="post">
<input id="name" name="item_name" placeholder="Item Name" required>
<input id="des" type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input id="qnt" type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button id="purpose" name="purpose" type="submit" class="btn btn-info">Purpose</button>
</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"
how to fire submit button click automatically on page load..
<form id="loginForm" name="loginForm" method="post" action="http://www.streamuj.tv/login">
<input type="text" name="username" value="user" size="22" tabindex="3" id="name" class="logintext">
<input name="password" type="password" value="pass" class="logintext" id="password" tabindex="4" size="22">
<input type="submit" name="action_login" value="Spustit zdarma" onclick="return foo();" />
</form>
Add an id to the submit button and fire the click using click().
an example would be like
<input type="submit" id="my_btn" name="action_login" value="Spustit zdarma" onclick="return foo();" />
and fire the click in onload() as below
document.getElementById("my_btn").click();
<input type="button" name="action_login" value="Spustit zdarma" onclick="foo(this.form);" /> //pass your form parameter to your function.
<script type="text/javascript">
function foo(form) {
form.submit(); //submit your form
}
</script>
So your form will be submitted.
insert below in your <head>..</head>
<head>
<!--.... your other code here ... -->
<script src="jquery-1.11.3.min.js"></script>
<script language="javascript">
$(function () {
$('form').submit();
});
</script>
</head>
The code inside $(function() { ... }); will automatic run after page is loaded.
<form id="loginForm" name="loginForm" method="post" action="http://www.streamuj.tv/login">
<input type="text" name="username" value="user" size="22" tabindex="3" id="name" class="logintext">
<input name="password" type="password" value="pass" class="logintext" id="password" tabindex="4" size="22">
<input type="submit" name="action_login" value="Spustit zdarma" onclick="return foo();" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "#loginForm" ).submit();
});
</script>
I'm using a JavaScript validator from http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. The problem I'm facing is that I have one button that saves the registration (here I need to check for name and last name) and the second button which checks the entire form. However, if I press any button, it checks the entire form.
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
frmvalidator.addValidation("organization","req","Please enter the organization");
</script>
Maybe this will work. Add validation for proper input fields onClick:
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" onclick="return btnSave_click();" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" onclick="return btnRegister_click();" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
function btnSave_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
return true;
}
function btnRegister_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("organization","req","Please enter the organization");
return true;
}
</script>
I guess you will need to write a custom validation function
I have a program that has 10 buttons or forms, onclick it redirects output to this form. and it opens another window that does an action.
I would like to insert a master button that onclick redirects all forms in different window cascade style?
Please help.
With jquery you can do this easily.
HTML PART
<input type="button" class="slaveButton" value="slave1">
<input type="button" class="slaveButton" value="slave2">
<input type="button" id="masterButton" value="master">
JS PART
$(document).ready(function() {
$("#masterButton").click(function(){
$(".slaveButton").trigger("click");
})
})
<form class="sp nm" method="POST" action="https://login.anaximan.com/login.php?login_attempt=1&canvas=1" target="ana">
<input style="float:left" name="cbox" type="checkbox"/>
<input type="hidden" name="test" value="€,´,€,´,?,?,?" />
<input type="hidden" name="next" value="http://app.anaximan.com/ana/index.php?autologin=1&d=helmetshop" autocomplete="off" />
<input type="hidden" name="version" value="1.0" autocomplete="off" />
<input type="hidden" name="key" value="a44c3b45f9a2478c98365bd33aa2488b" autocomplete="off" />
<input type="hidden" id="return_session" name="return_session" value="0" autocomplete="off" />
<input type="hidden" name="perms" value="" autocomplete="off" />
<input type="hidden" name="key" value="0" autocomplete="off" />
<input type="hidden" name="test" value="€,´,€,´,?,?,?" />
<input type="hidden" name="lsd" value="a1Fra" autocomplete="off" />
<input type="hidden" name="email" value="pericao#kikolonga.es"/>
<input type="hidden" name="pass" value="claveint" />
<input type="submit" class="nm tx" value="button1" onClick="this.form.cbox.checked=true; redirectOutput(this.form);" />
</form>