I have a simple form with a submit button. I would like to use the submit button using an image something like,
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
How can I use the image as submit button? Then what I want to change in jquery initialisation?
<form action='#' id='freeForm' method='post' autocomplete="off">
<a>
<input style='border: none' type='submit' value='Submit' />
</a>
</form>
jQuery
$("#freeForm").submit(function()
{
});
Thanks!
jQuery isn't necessary, as an image button already submits a form.
<form>
<input type="image" src="foo.png" />
</form>
Fiddle: http://jsfiddle.net/jonathansampson/AkR95/
u can do some thing like this
$("#image").onclick(function()
{
$("#freeForm").submit();
});
#image is the id of element containing your image.
Try this one:
<input type="submit" value="Enter" name="submit" style="background:url('/imgBG.jpg') no-repeat;width:100;height:50;border:none;"/>
Related
I have the following HTML where Address is shown using Kendo Window
<form id="myform">
<input id="firstName" class="form-control" />
<input id="lastName" class="form-control" />
<button id="btnOpenWindow" type="button" class="btn btn-info">Click Me To Edit Address</button>
#(Html.Kendo().Window()
.Name("mywindow")
.Title("My Window")
.Width(400)
.Visible(false)
.Modal(true)
.Content("<input id=\"address\" class=\"form-control\">")
.Draggable(false))
<button id="btnSubmit" type="submit" class="btn btn-info">Save</button>
</form>
<script src="~/js/test.js"></script>
test.js file
$("#btnOpenWindow").click(function () {
$("#mywindow").getKendoWindow().open().center();
});
ISSUE
Even though kendo window is defined inside the form it always renders at the end of the page just before body tag, along with its content. So address does not render inside the form. So when user clicks Save, the address information does not get submitted to server.
How do get kendo window's content render inside form?
I need to write xpath for 'New' button.
have tried:-
By.xpath("//form[#action='/intruvert/action/CustomRolesAction']/div/div[3]/div/a[1]")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#style='background-color: rgb(242, 242, 242);' and #title='New']")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#title='New']")
but not able to click on New button.
I am not sure here if i missing anything.
kindly suggest.
here is the code:-
<html>
<head>
<body>
<div class="bodywrap">
<form action="/intruvert/action/CustomRolesAction" method="post" name="CustomRolesForm">
<input type="hidden" value="CustomRolesDetails_t" name="userAction"/>
<input type="hidden" value="fullaccess" name="accessRight"/>
<input type="hidden" value="" name="uuid"/>
<input type="hidden" value="true" name="fromTab"/>
<input type="hidden" value="" name="selectedDomain"/>
<input type="hidden" value="/My Company:0/Manager:0" name="resourceName"/>
<input type="hidden" value="MANAGER" name="topMenuName"/>
<input type="hidden" value="Users and Roles" name="secondMenuName"/>
<input type="hidden" value="Roles" name="thirdMenuName"/>
<input type="hidden" value="/My Company:0" name="domainName"/>
<input type="hidden" value="/My Company:0" name="currentDomainName"/>
<input type="hidden" value="/Manager:0" name="shortResourceName"/>
<input type="hidden" value="false" name="ucaplModeEnabled"/>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<div class="gensecholder clearfix">
<div class="gensecheader clearfix">
<div class="gensecbody pad10all clearfix">
<div class="gensecfooter clearfix">
<div class="gensecfootright">
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
</div>
#Pranay after viewing your code, i got javascript error. inside your html you have not defined anywhere to javascript. see the image
Your html
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
Modified html
<a class="genericbtn" title="New" href="#">New</a>
Now use xpath method using javascript executor.
WebElement new_button = driver.findElement(By.xpath("//a[contains(text(), 'New')]"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", new_button);
OR
driver.findElement(By.xpath("//a[contains(text(), 'New')]")).click();
You can try to locate the button directly without ancestors
// by class name
By.className("genericbtn")
// by title
By.cssSelector("[title='New']")
// by partial href
By.cssSelector("[href*='add']")
//a[.="New"]
Just use text find a tag.
. means current context node(a).
You can just use either title or text property to find out the required link:
By.xpath("//a[#title='New']");
Or
By.linkText("New");
Or
By.xpath("//a[text()='New']");
I am trying to click a button which is actually a submit without a form which looks some thing like this and store the result in an object
<div class="searchBar-input">
<input id="front-page-search" value="Enter Keyword(s)" type="text">
</div>
<div class="searchBar-submit">
<input id="searchBtn" value="Search" type="submit">
</div>
I have tried puts page.forms and I am getting nothing as there is no form on the page. Its just a text box whose value I have to submit.
I have googled but I found everything about form submit and links. How can I click this? Any suggestions.Thanks in advance
try this :
<div class="searchBar-submit">
<input id="searchBtn" value="Search" type="submit" onclick="document.forms[0].submit();" ></div>
I am trying to use an image to submit a form on my page. Here is the code I currently have, that works:
<form name="regForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="regForm" >
....input form here....
<input name="doRegister" type="submit" id="doRegister" value="Register">
</form>
What I am attempting to use, that does not work:
<form name="doRegister" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="doRegister">
....input form here....
<input type="image" value="Register" src="../register.png" style="vertical-align: middle; height: 30px; width: 66px;" onsubmit="submit-form();" />
When clicking the button to submit, it reloads the page, without actually submitting the data.
Is this a Post v Get issue?
I also had this trouble in the past when doing something like this, try <input type="image" src="../register.png" alt="Register" name="doRegister" />
and in php use $_POST['x_doRegister'] (the x_ might not be needed)
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});