Javascript Tapestry Form Submit issue - javascript

So I've been sent some HTML to upload to our website, essentially it's a login form, however the Login button does nothing when pressed in the browser. I see that it's using a "javascript:tapestry.form.submit" to submit the form using a stylized button image (img src="images/submit.png" alt="submit") which I think may be the issue.
When I change it from this button to a standard button using (input type="submit" value="Login" /) it works fine. Is there a reason anyone can think of why this button could be causing an issue not the load in the browser? The form works if you type in your details and press return.
<div id="loginPanel">
<div class="text">
<p class="loginText">Welcome</p>
<p class="loginText">Log-in to place your order</p>
</div>
<form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
<div style="display:none;" id="loginFormhidden">
<input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
<input type="hidden" name="seedids" value="" />
<input type="hidden" name="submitmode" value="" />
<input type="hidden" name="submitname" value="" />
<input type="hidden" name="If_0" value="F" />
<input type="hidden" name="If_2" value="F" />
<input type="hidden" name="If_4" value="F" />
<input type="hidden" name="Hidden" id="Hidden" value="X" />
</div>
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" value="" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" id="password" size="30" /></td>
</tr>
</table>
<a href="javascript:tapestry.form.submit('loginForm', 'loginButton');" id="loginButton" class="bLink">
<img src="images/submit.png" alt="submit">
</a>
<input type="submit" style="width:0;height:0;border:0"/>
</form>
</div>

Following on from the comments above, our real aim here is to change the way the submit button looks, rather than to add submit behaviour to an image. We can do this with CSS.
#loginForm > input[type="submit"] {
width:60px;
height:60px;
// transparent background colour
background-color: rgba(0,0,0,0);
// allows the background to resize when you change width/height
background-size:100% 100%;
// use your submit image
background-image: url("images/submit.png");
// remove default button border
border:none;
// make a nicy pointy cursor
cursor:pointer;
}
I have removed the anchor and image from the HTML, and added a blank value to the submit button so no text shows over our background image.
<div id="loginPanel">
<div class="text">
<p class="loginText">Welcome</p>
<p class="loginText">Log-in to place your order</p>
</div>
<form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
<div style="display:none;" id="loginFormhidden">
<input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
<input type="hidden" name="seedids" value="" />
<input type="hidden" name="submitmode" value="" />
<input type="hidden" name="submitname" value="" />
<input type="hidden" name="If_0" value="F" />
<input type="hidden" name="If_2" value="F" />
<input type="hidden" name="If_4" value="F" />
<input type="hidden" name="Hidden" id="Hidden" value="X" />
</div>
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" value="" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" id="password" size="30" /></td>
</tr>
</table>
<input type="submit" value="" />
</form>
</div>
Working example here

Related

I can't show section in html

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 make enable disable the required filed?

i have created one form in that form i have 2 hidden fields which are displaying after checking a radio button . the code is
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
/html code/
<label for="name"> Any Accompanying Person ?:</label>
<input type="radio" name="yes" value="yes">Yes
<div class="selectContainer">
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" required>
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" required>
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
Here is my form .if user will check the "Any Accompanying Person ?" radio button then only name and age field will displaying that i am controlling throw style .
problem: when user submit the form without checking the "Any Accompanying Person ?" radio button then all so name and age fields are showing required .but i need those field required when the user clicks "Any Accompanying Person ?" radio button .
how to do this?
$('#person').change(function () {
$('#name').attr('required','required');
$('#age').attr('required','required');
});
give the id person to <input id="person" type="radio" name="yes" value="yes">Yes
give the id name and age to <input type="text" size="20" name="name[]" id="name">
give the id age to <input type="text" size="20" name="age[]" required>
According to your CSS
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
The .selectContainer is not displayed and you are making it setting it displayed on selecting the radio button .In this case you cannot select the radio button as it is not visible due to your CSS.Set the visibilty for this selectContainer block so that you are able to select the radiobutton
and after that use ajax to check that whenever the button is checked that is
$('yourbutton').change(function () {
if($(this).is(':on') {
$('#name').attr('required');
$('#age').attr('required');
}
});
I hope this solves your problem.
<html>
<head>
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
</head>
<body>
<form>
<label for="name"> Any Accompanying Person ?:</label>
<input type="radio" name="yes" value="yes">Yes
<div class="selectContainer">
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" required>
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" required>
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
</body>
</html>
Use this code.this doesnot give any error. Then Add the ajax code or any scripting according to your requirement .

JQuery solution for AWeber Subscriber Form - No Redirect

How do i add some form of JQuery solution to the below code so that users are using the redirect but instead have a nice response back saying 'Thanks for subscribing'?
Also, is this the best way - The JQuery solution? Or should i try JS
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1337" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="blah" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="1237" />
<input type="hidden" name="meta_adtracking" value="blah" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<input type="text" name="name" autocomplete="off" required placeholder="First name">
<input type="text" type="email" name="email" required placeholder="Your Email">
<input type="submit" name="submit" value="Subscribe">
</form>
Edit - But have it be presentable, i.e. I want to put the text within a DIV, not Alert the user with a pop up or redirect them to my page.
$("form").submit(function(){
alert("Thanks for subscribing");
});
edit ##
Stack overflow jQueryUI Modal confirmation dialog on form submission

how to hide/show field by button for same parent only

I have the below code structure, how do I click the edit button to show/hide the 3 file input fields for that table only?
by default all those file input fields are hidden.
If I press the edit button inside the second table, only the 3 inputs inside second table will be display.
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
most of the examples I found online are using getElementbyID, so I am kind of stuck.
Thanks,
Pat
I think the best solution would be implemented using JQuery, rather than straight Javascript.
EDIT2: Okay, all completely solved! http://jsfiddle.net/3QYhQ/
The Jquery is here:
$(".editButton").click(function () {
var x = $(this).attr("group");
$('.' + x).css("visibility", "visible");
});
This says, that any time an .editButton is clicked, grab the attribute group and take it's value. Now go found anything that has a class name of whatever value that group had, and make it visible.
<input type="button" class="editButton" group="editGroup1" value="Edit" />
<input type="text" name="product" class="editGroup1 editGroup" />
<input type="text" name="color" class="editGroup1 editGroup" />
<input type="text" name="price" class="editGroup1 editGroup" />
<input type="button" class="editButton" group="editGroup2" value="Edit" />
<input type="text" name="product" class="editGroup2 editGroup" />
<input type="text" name="color" class="editGroup2 editGroup" />
<input type="text" name="price" class="editGroup2 editGroup" />
Here's the html. Essentially, all of your hidden inputs have two classes - one binding them to the edit button they'll need to use, and another generic class name that is used by CSS below:
.editGroup {
visibility:hidden;
}
I hope that helps!
If anyone can do something fancier with .child() or something like that (I'm not too well versed on using those), please feel free to share your answers!
Try this and see the demo
edit
<div>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton">edit</span>
</div>
<div>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton">edit</span>
</div>
$('.editButton').click(function()
{
$(this).siblings('.editThis').toggle();
});
I would recommend a different class name for each product group of inputs and the use the getElementsByClassName() function. I would also recommend using display:none to remove your input elements from the page and then use display:block to insert them.
Here is a pure JavaScript example (jsfiddle demo):
HTML:
<table width="100%">
<th>Product 2</th>
<tr>
<td id="product_2_edit_button" onclick="my_function()">edit</td>
<tr>
<td>
<input style="display:none" type="file" name="product" class="product_2_field" />
<input style="display:none" type="file" name="color" class="product_2_field" />
<input style="display:none" type="file" name="price" class="product_2_field" />
</td>
</tr>
JS:
function my_function() {
var testing = document.getElementsByClassName("product_2_field");
testing[0].style.cssText = "display:block";
testing[1].style.cssText = "display:block";
testing[2].style.cssText = "display:block";
}

I need a master button to open all buttons on my program

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>

Categories