Rails 7 Prevent html form from submit to server - ruby-on-rails

I have an HTML form in erb view template
<form id="megapayForm" name="megapayForm" method="POST">
<label for="merId" >MerchantId:</label>
<input type="text" id="merId" name="merId" ><br><br>
<label for="currency">Currency:</label>
<input type="text" id="currency" name="currency" ><br><br>
<input type="submit" id="submit" value="Submit">
</form>
submit.js
$.ajax({
url: 'https://www.cloudflare.com/cdn-cgi/trace',
success: function(data){
},
complete: function(){
$("#" + formId).attr("action", domain + "acb.do");
setTimeout(function(){ paymentForm.submit(); }, 100);
}
});
and rails controller
class transaction
def index
end
end
Every time i press submit, instead of redirect to domain + "acb.do" , it being redirect to rails server transaction#create
How can i make the form being submit and redirect to domain + "acb.do"

I fixed this by changing <input type="submit" id="submit" value="Submit">
to <button id="submit">Submit</button>. So when I press the button it does not call to server but only the javascript function

Related

How to access to the new page with form and target="_blank" through capybara

I am trying to scrape this page with capybara + poltergeist.
<form action="/agency/advertiser/login" method="POST" role="form" target="_blank">
<input type="hidden" name="csrfToken" value="token"/>
<input type="hidden" name="account_id" value="id">
<input type="submit" value="login" class="btn btn-warning">
</form>
I could access to the element below, and tried click.
<input type="submit" value="login" class="btn btn-warning">
However, I can't access to the new page that opens after the click. How can I do that?
You need to tell Capybara you want to work in the new window. You do that by getting a handle to newly opened window and then using within_window or switch_window.
new_window = page.window_opened_by do
# perform whatever action causes the new window to open
page.find('form').click_button
end
page.within_window(new_window) do
# perform actions in the new window
end
# context returned to the original window
...

How to submit form with dynamical added textbox in div MVC.?

How to submit form with dynamical added texbox in div MVC.
Hi,
I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype)
User can add n no. of phone no,phonetype eg.
Name -michale
age- 27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype- office
I want to submit this form to save the data in the database.
But in formcollection phone,phonetype is coming as separate array .
Hence unable to find which phone no. is mobile or office.
A dirty way:
use a name concatenated with a number:
<body> <div id="listPhones">
<div>
<input type="text" name="phone00"/><input type="text" name="phonetype00"/>
</div>
</div>
<bouton onclick="addPhone()">More</bouton>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"> </script>
<script type="text/javascript">
function addPhone() {
var nbr_phone = $("#listPhones").children().length;
$("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); } </script>
</body>
How are you constructing the payload you're submitting?
You can POST JSON - e.g.
{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}
If you're building <input />s, then something like this:
<ul>
<li>Name: <input type="text" name="name" /></li>
<li>Age: <input type="text" name="age" /></li>
<li>Phone type:
<input type="radio" name="phone[0][type]" value="mobile" /> Mobile
<input type="radio" name="phone[0][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[0][no]" /></li>
<li>Phone type:
<input type="radio" name="phone[1][type]" value="mobile" /> Mobile
<input type="radio" name="phone[1][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[1][no]" /></li>
</ul>
<input type="submit" value="go" />
Hth.

Popup form post prevent site from refresh

I have a kendo grid with a button in it. When the button is pressed it opens up a popup with a file-select input and a button so that the user can save a image. Im using a normal form with a submit button to post my form to my controller. Everything works fine the right data arrives to the controller but then the page refreshes. I just want the popup to close and the grid and the whole page behind the popup to just stay as it is. Here is my controller:
[HttpPost]
public ActionResult SaveData(HttpPostedFileBase file, string id)
{
iResourceModel.SaveData(file, file.FileName);
return null;
}
and my html form:
<div id="details-container">
<form action="/Home/SaveData" method="post" enctype="multipart/form-data">
<span>Select file:</span><input type="file" name="file" id="file">
<input type="text" value=' + dataItem.ResourceId +' name="id" id="id" hidden/>
<button type="submit" id="" >Save file</button>
</form>
</div>
Page reloading after submitting a form is normal behavior. If you want to stop it, you can use jQuery and submit the form in the background.
You can find the jQuery form plugin here : http://plugins.jquery.com/form/
For your case :
<div id="details-container">
<form action="/Home/SaveData" method="post" enctype="multipart/form-data" id="myForm">
<span>Select file:</span><input type="file" name="file" id="file">
<input type="text" value=' + dataItem.ResourceId +' name="id" id="id" hidden/>
<button type="submit" id="" >Save file</button>
</form>
</div>
<script>
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert("File uploaded!");
});
});
</script>

Input button in MVC asp.net

How to use Input button for #Html.ActionLink?
In my cshtml I have this code:
<div>
#Html.ActionLink("Back to menu", "HomeController")
</div>
Now I whant to use instead hyperlink button (Back to menu), input submit button, so this button:
<input class="btn" type="submit" value="Back to menu">
Thanks.
You can't - you can use css so the link will look like button, or you can utilize Url.Action and javascript instead. I.E.:
<input class="btn" type="submit" value="Back to menu" onclick="window.location='#Url.Action("Index", "Home")';return false" />
Ok, I solved it, Ondrej Svejdar thanks for advice, I use javascript and works fine:
<input class="someCss" type="button" value="Back to Edit Menu" onclick="Redirect()"/>
And under button I use this javascript:
<script type="text/javascript">
function Redirect() {
var url = "#Url.Action("Registration")";
location.href = url;
}
</script>
So result is:
<input type="button" value="Button" />
value="button" />

JQuery Mobile - POST a form and get response

Greetings,
I have the following jquery mobile page:
<div data-role="content">
<center>
<img src="./images/logo320.png" />
</center>
<br><br>
<form method="POST" action="./ajax/login.php">
<label for="login_unameLabel">Username:</label><br>
<input type="text" name="login_uname" id="login_uname" /><br>
<label for="login_pwordLabel">Password:</label><br>
<input type="password" name="login_pword" id="login_pword" /><br>
<button id="login_submit" type="submit" data-theme="a">Submit</button>
</form>
</div>
./ajax/login.php returns either "OK" or "NOK". How can I capture this result in my page?
I keep getting the following error in Firebug:
k.data( [Break On This Error]
false)a.mobile.activePage=k;h(k);y&&D&...dd(k).removeClass("
out in reverse "+
It's as if jquery mobile is performing some operation on the result? I don't want this to happen. Do I have to return a valid jquery mobile HTML page from my PHP?
Any insight greatly appreciated.
Many thanks in advance,
Solution: use <input type="button" id="login_submit" data-theme="a" value="Submit" />
Now I can capture click events via:
<script>
$(document).ready(function() {
$("#login_submit").click(function() {
alert('clicked');
});
});
</script>
using data-ajax="false" in form.
then you can disable jquery mobile auto ajax call

Resources