I am trying to submit form data, but instead of using the standard "Submit" button I want to use a regular HTML link. However, when I click this link I want to have a confirmation box asking the user to continue or cancel. I have both parts of the puzzle, but when I put them together they don't play nice. This is what I currently have for Javascript code:
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to delete this file?");
if (agree)
return true ;
else
return false ;
}
function submitform() {
document.forms["delete14"].submit();
}
And for the HTML I have:
link text
The confirmation box does pop up as intended and the form does submit properly. But currently the form submits even if the user clicks "no" on the confirmation box.
Try this:-
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to delete this file?");
if (agree)
document.forms["delete14"].submit();
else
return false ;
}
Firstly, don't use a link if you don't want one, use a styled span (or a button, which says to the user "click me and something will happen" rather than a link, which says "click me and I'll take you to another page").
Also, don't use "javascript:" in an attribute that expects a value that is script, it will be seen as a useless label.
Anyhow, your issue is that you have two listeners on the link:
link text
The one in the href will submit the form unconditionally. So use a span and get rid of the href:
<span style="cursor: pointer; text-decoration: underline"
onclick="confirmSubmit()">link text</span>
Related
Trying to submit an HTML form / clicking a button from this web page: https://www.vegvesen.no/kjoretoy/Eie+og+vedlikeholde/skilt/personlig-bilskilt/sok-om-personlig-bilskilt
I've tried to use both .submit() and .click() with no success
webView.evaluateJavaScript("document.getElementById('personlig-kjennemerke').click();", completionHandler: nil)
So what I try to do is to fill in the text field with "REGNR" I then try to click the orange button to submit the form and access the information I am looking for.
I am able to fill in the textfield by using:
webView.evaluateJavaScript("document.getElementById('tegnkombinasjon').val ue='\(plateNumber)'") { (value, error) in
}
Picture of the button I want to press and the text field I try to fill in
But since I'm not able to click the button programmatically I've tried to actually click it in a subview. The page then tells me I have to fill in the text field first even though I have programmatically.
So not only am I unable to click the button, but I'm also wondering how I can make the web page understand that the text field actually already contains text.
Try this:
webView.evaluateJavaScript("document.getElementsByName(\"sjekkreg\")[0].elements[2].click()")
Why by name? Because that form doesn't have an id.
Also I see your form has custom function to send that form:
pkCtrl.submit(mineFelt,sjekkreg)
I want to do a page search like Google. This page would contain the following:
a text box
a search button
After I enter a value in the text box and press the button, the result should be put in a DIV but this won't be visible before pressing the search button. The content is to be shown only after pressing the search button. How can achieve this by using jQuery.
Basically, you hide the div using CSS and when hit to search button it appears as follows.
CSS code
#content_div {
display: none;
}
jQuery
$(".search_button").click(function() {
$("#content_div").show();
}
Use jQuery's ajax() function for acheving this.
Check this link: http://www.codeforest.net/simple-search-with-php-jquery-and-mysql
seems like you might want to use something like this:
$('#search_results').load('perform_search.php', {query: $('#search_query_input').val()});
explanation:
#search_results is div where you will put your results
load() is jquery's function to update container via ajax
perform_search.php is the page which will return you results to be displayed in #search_results
query is the name of the parameter which would be passed to perform_search (like 5. $_REQUEST['query'])
#search_query_input is the id of your "text box"
Cheers, hope it will help
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.
I'm working on the Web GUI of an appliance-like product.
I have an HTML form that works fine: it shows a list of things with checkboxes, the user checks some of them and clicks the "remove" button which submits the form. The server gets the POST, removes the items, and refreshes the page. All fine.
There's a requirement to add an "are you sure?" confirmation to the form. If I add a call to
confirm("are you sure?");
as the onsubmit method in the FORM tag, or the onclick in the submit button tag, it works fine but uses the ugly browser-native confirm dialog.
Elsewhere in the product we have a nice custom CSS-styled confirm dialog I'd like to use, but it works like this: At the appropriate place, you put a call to
myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);
This puts up a clickmask, customizes a dialog, centers and displays it, and then returns FALSE and the form doesn't submit.
Later when the user decides, if they press "Yes", it calls the confirmCallback function. In the other, Ajax based pages of the product this gathers info, creates a postBody and uses Prototype's Ajax object to post it, and all is fine. (If "No", then the dialog and clickmask are removed and things continue.)
On this simpler page, with the pure HTML form, I have a confirmCallback function that looks like this:
var confirmCallback = function() {
document.myForm.submit();
}
and it fires OK, but when the form is submitted, the remove button has ALREADY been clicked, and the false returned by the custom confirm suppressed submission. Instead, this is considered a new submission, and the remove button was not actually clicked, so it is not considered "successful" in terms of W3.org's HTML 4 standard section 17.13.3. The server gets the data, no remove button, says "I got it but I dunno what you want me to do with it" and just does nothing but serve the next page.
If you're read this far, THANK YOU, and here is my actual question. How can I, in my confirmCallback javascript function, in a crossbrowser manner, cause the remove button to fire, become "successful" and submit along with the rest of the data?
Sounds like you're gonna need a hidden field to pretend to be the pressed button, and each button will require no name, but instead an onclick event to manipulate the value of the hidden field.
If the name of the buttons are all different, you might need to use DOM methods to add the hidden field because I don't think you can change the name of a field once it has been added to the DOM in all browsers.
If you require this solution to still work without JS, then you may need play around with the JS logic a little more (to do more modifications to your initial DOM tree) or modify the server code. You could even put the "Are you sure" behaviour into the response then...
Assuming that the remove button is the submit button for that form then probably the easiest solution is to give the form an id
<form id="submitForm"...
Then in your confirm call the form submit
document.getElementById("submitForm").submit()
I think that will do what you're asking but it seems like you were pretty much at that solution already so if you're asking something else let me know.
In your callback, remove the onclick handler for the button (causing the confirmation), then trigger a click on the button. This will cause the button click to submit the form and result in the button causing the submit to be posted back along with the form data.
var confirmCallback = function() {
$('submitButton').stopObserving('click');
$('submitButton').click();
}
I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).
Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).
Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.
Try
$('form').submit(function () {
return false;
});
This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:
$('form#foo').submit(function(e) { e.preventDefault(); });
If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.