Java script to jquery mobile: change value on submit click? - javascript

Hello Stackoverflow people!
I'm making a mobile website using the latest jquery mobile (1.2.0). I have a form and I want the submit button change text/value on click. I have a code that works in a empty html page:
<body>
<form method="get" action="/show.php?" target="showframe">
<select name="week">
<option value="1">Week</option>
</select>
<select name="id">
<option value="1">ID</option>
</select>
<input type="hidden" name="type" value="2">
<input type="submit" value="Load" id="show" onclick="javascript:document.getElementById('show').value='Refresh'">
</form>
<iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>
But when I copy and past the submut button in my jquery page it wont change value..
My question is: how do i get this to work in jquery mobile? what is an alternative?
Thanks in advance
EDIT:
I have tried jivings answer and this is it:
<html>
<head>
<title>Infoweb Mobiel - Dominicus College</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/style.js"></script>
<script>
$("#show").click(function () {
$(this).val('Refresh');
});
</script>
</head>
<body>
<form method="get" action="/show.php?" target="showframe">
<select name="week">
<option value="1">Week</option>
</select>
<select name="id">
<option value="1">ID</option>
</select>
<input type="hidden" name="type" value="2">
<input type="submit" value="Load" id="show" $("#show").button("refresh");>
</form>
<iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>
but it doesnt work.. i think im doing something wrong. where and how do i have to place $("#show").button("refresh"); ?

This is because the text that you're seeing isn't actually part of the button element. JQuery Mobile pads the button out with it's own elements to create the style you see. If you want it to refresh these elements when you make a change then you need to call the refresh() method on the button:
$("#show").button("refresh");
Also, since this is jQuery, you should be using handlers properly. You onclick should be with the rest of the JavaScript logic, either in the head or in an external file and look like this:
$("#show").click(function() {
$(this).val('Refresh');
});

First you need to understand few things about the jQuery Mobile:
What you did in your EDIT part was wrong, you cant use $("#show").button("refresh") in a HTML block. Java script can not be mixed with a HTML like that.
This is an example how this should work: http://jsfiddle.net/Gajotres/K8nMX/.
Code:
$('#index').live('pagebeforeshow',function(e,data){
$(document).on('click', '#show', function(){
$('#show').attr('value','Show');
$('#show').button("refresh");
$('#custom-form').submit();
});
});
In the case of my example index is an id of my jQuery Mobile page. Pagebeforeshow is an event that will be triggered before the page can be shown:
$('#index').live('pagebeforeshow',function(e,data){
Your button type was changed to button. Reason is, you cant change button text (or anything else) while form is submitting it data to php server:
<input type="button" value="Load" id="show">
That is why we are binding a click event to the button in this line :
$(document).on('click', '#show', function(){
Next line, we are changing the button text:
<input type="button" value="Load" id="show">
Because this is a jQuery Mobile styled button we need to refresh him so the new style can be applied:
$('#show').button("refresh");
Finally we are triggering form submit:
$('#show').button("refresh");
Before you continue please read this article: http://jquerymobile.com/test/docs/api/events.html. There you will find everything you need to know about jQuery Mobile page events.
Also read this article about anatomy of jQuery Mobile page: http://jquerymobile.com/test/docs/pages/page-anatomy.html
As you are new to this page take a look at this article, it will help you get a better response in the future. I hope this was an answer to your question. Feel free to leave a comment if you have more questions.

Related

Link from Form HTML/JS [duplicate]

This question already has answers here:
How is the default submit button on an HTML form determined?
(15 answers)
Closed 1 year ago.
I'm currently trying to make a program in which you enter a link into an HTML form and when you click a button it sends you to that link. However, when I click the button the page just clears the form. I'm a Python native and a newbie to HTML/JS so the way I'm structuring my code may be why:
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").onclick = () =>
location.assign(String(document.getElementById("link").value));
</script> </form>
Since, you are using a form. Your Button
<button class="outline" id="open">Create gate</button>
is acting as the form submit button and hence it refreshes the page before executing the location.assign() method. There are many ways to fix this.
One simple way is to exclusively tell the browser that this button is not the submit button, we can do that by using type="button" attribute in our button.
Create gate
You can use e.preventDefault() on your form submit to stop refreshing of the page.
Try the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location Object</title>
</head>
<body>
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").addEventListener('click', (e) => {
e.preventDefault();
location.assign(String(document.getElementById("link").value));
});
</script>
</form>
</body>
</html>
Your code, exactly as provided, pasted into a minimal HTML5 boilerplate template, works in the Textastic code editor and in Safari running on localhost.
Perhaps some other JavaScript in the vicinity of your event listener is breaking the arrow function. Maybe bracketing the one function statement could help?

How to: On click open new page in new tab and redirect the old one

Been trying to find some solution but I wasn't able to. I need to get a button to fire two events on one click. This code worked for firefox but it doesn't on Chrome:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "https://www.bing.com";
}
</script>
</head>
<body>
<form action="https://www.google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
I'm trying to redirect users to a new page in new tab and redirect the main page (old one) after the button has been clicked.
Is there any solution which would also work on Chrome?
Would really appreciate any kind of help!
function changeLocation() {
document.getElementById("form").submit();
window.open("https://www.bing.com","_blank");
}
<form id="form" action="https://www.google.com">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
This will help you. By the way you need to use the name attribute in the input tag to submit the data.

jQuery with jQuery mobile bricks form submission

I am trying to implement a collapsable sidebar with a form (search field and submit button) for my site.
I have referenced as script:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However in this combination the form just wont submit, instead it seems to apply the get parameters to the URL and then fires preventDefault of some sort.
It seems like I am using an old version of jQuery , however when I tried to update to:
https://code.jquery.com/jquery-3.2.1.min.js
I noticed that my collapsable menu wont work anymore and the complete style is broken. Also I cant put it in a fiddle since they are mostly already using jQuery.
Sample 1 (Collapse works but form not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sample 2 (Form works but Collapse not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
For the first sample I also tried to declare a input type button instead of submit and trigger it manually using:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Without success.
Thanks in advance!
jquery mobile version 1.4.5 is only locked to certain older jquery versions and have not been tested onto older versions above jquery2.0
Read more about it here if you need to: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.
This would explain why the jqueryversion 3.2.1 doesn't work with your collapsible form.
Meanwhile on the side of the 1.11.3 version, According to the developer console all you have to do is load up your form on a web server instead of loading it locally on your computer (C:/Folder/.html wont work, you need to use browser extensions like https or http)
I hope this helps you as I myself ain't a professional programmer and can't scratch up a working code for you.
It seems like I was misjudging.
With jQuery mobile comes alot of automatically introduced features for e.g. submitting a form in the background using XHR request and not reloading the site.
Imho they should make this a little bit clearer as I had a hard time figuring this issue out. Solution is: for `s or 's you DONT want to be loaded in background, add the tag: data-ajax="false" like so:
<form action="#" method="get" data-ajax="false">
<a href="" data-ajax="false">
Hope this helps someone.

onclick to redirect to next page not working in phonegap

<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
function ready()
{
if(document.getElementById("rb2").checked)
{
alert("correct");
}else if(document.getElementById("rb1").checked)
{
alert("incorrect");
}
else
{
alert("incorrect");
}
}
function nextPage()
{
window.location = "next.html";
}
</script>
</head>
<body>
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>What does JVM stands for ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Java Vendor Machine<br>
<input type="radio" id="rb2"/>Java Virtual Machine<br>
<input type="radio" id="rb3"/>Java Viral Machine<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Next Question" onclick="nextPage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting my page to next page after click event.
But it is not redirecting to next page.I went through many questions on stackoverflow as well but didnt succeed.
Please help me .
Thanks in advance.
What are you doing there? If you're doing it with jQuery mobile an example would look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<p>This is page 1. If you want to go to Page 2 click here.
</div>
<div data-role="page" id="page2">
<p>This is page 2. If you want to go back to Page 1 click here.
</div>
</body>
</html>
Changing a page by function could look like this:
function changePage() {
$.mobile.changePage( "#loginPAGE", { transition: "none", changeHash: true });
}
Here's a pen: http://codepen.io/anon/pen/gaeoQE
Frameworks - Mobile App Development
So like i said in my comment, i would recommend you to use a framework. Since i don't know, how conversant you're in JavaScript and anything else i think you should start with jQuery. For mobile App development it's not one of the best frameworks in my opinion but it's easy to learn and thats important for you to start.
So jQuery is a thing for your website. For your mobile application you need jQuery mobile.
You go to that websites and download both. When your download is finished, you're going to open up your index.html and add the scripts to your <head></head> section so that it looks like the following:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
These things are important. Also the order in which you include the scripts is important.
After adding this to your header, you're able to access a whole bunch of functions. All of the features are testable inside a demo environment which can be found over here: jQuery mobile Demos (1.4.5).
When you have finished that, you're going to copy my code from my pen into your <body></body> and it should work. For changing a page via javascript you can use the function changePage() which i've already posted before.
I hope this will help you, if not please let me know where exactly i can help you.
I found out the solution for my query . i just wrote the following function onClick of a button (input type should be button and not submit then only it will work)
function nextPage()
{
document.location="nextpage.html"; //instead of window.location
}

onClick event not working for button

I'm trying to show forms based on the button clicked. That is, on clicking the first button, two other buttons are displayed. However, the new buttons generated behave like dummy buttons (onClick event not working).
How can I resolve this error? Is there any alternative for this to implement the same functionality?
I have the following code:
<html>
<head>
<title>Frequently Asked Questions</title>
<link rel="stylesheet" type="text/css" href="CSSfiles/faqCSS.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script >
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
</script>
</head>
<body>
<p>Put banner and logo on top; Put footer later </p>
<div class="intro">
Looking for help? We provide you information about what can be done when in trouble. Hope you find it helpful!
</div>
<form name="myForm" class="select">
<input type="button" value="ND" class="select-button" onClick="addContent('myDiv', document.myForm1.ND.value);"><br>
<input type="button" value="E" class="select-button" onClick="addContent('myDiv', document.myForm1.E.value);">
</form>
<form name="myForm1" class="select">
<textarea name="ND">
<input type="button" value="Earthquakes" class="trial" onclick="addContent('yourDiv', document.myForm2.HW.value);"/><br>
</textarea>
<textarea name="E"><u>E</u></textarea>
</form>
<form name="myForm2" class="select">
<textarea name="HW">
<u>Hello world!</u>
</textarea>
</form>
<br><br>
<div id="myDiv"></div>
<div id="yourDiv"></div>
</body>
</html>
It is not clear to me how you add the buttons to your DOM (could you post that code?).
However, say that your button has an id of 'MyButton1',
<button id="MyButton1">Hello</button>
then if you do this with jQuery, your code needs to have it delegate the click, by hooking an object that is already existing and will contain your button; for example the body element:
// This is registered before MyButton1 is created.
$('body').on('click', '#MyButton1', function(event) {
alert("Hello, I'm button 1");
}
Using plain javascript, after you have created the new content (so that getElementById can find the button), you need to bind the onclick event:
document.getElementById('MyButton1').onclick = function() {
alert("Hello again");
}
or (not supported on older IEs)
document.getElementById('MyButton1').addEventListener("click",
function() {
alert("Still me");
});
Here you can find a Javascript fiddle with code re: the javascript method.
Initially keep all forms hidden. Put them in the desired division. Onclick of each button only show/hide intended form..
This can help you out.

Categories

Resources