I've a following HTML code:
<form name="question_issue_form" id="question_issue_form" action="question_issue.php">
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" id="report_question_issue"></td>
</tr>
</tbody>
</table>
</form>
Following is my JS code:
$(document).on('click', '#report_question_issue', function (e) {
alert("Jumbo man");
}
And upon clicking the submit button I'm calling the alert to appear but it's not appearing. I'm not getting why this is happening? For your refrence following is link to the js Fiddle;
http://jsfiddle.net/TjK2N/
You are not including JQuery Reference. And you are missing to close );
DEMO
In your code bracket isn't closed properly at last. this is required ")" see this updated fiddle
$(document).on('click', '#report_question_issue', function (e) {
alert("Jumbo man");
});
$(document).on('click', '#report_question_issue', function (e) {
alert("Jumbo man");
}
$(XXX) this is a jquery syntax, but i saw you are in the Pure JS environment.
Should you use a js library?
The problem is with the submit action of the <form> that reload the page before the JS is called.
To avoid it, you can change it by one of following :
1st using JS into action attribute
<form name="question_issue_form" id="question_issue_form" action="javascript:alert('test')">
2nd using onsubmit attribute
<form name="question_issue_form" id="question_issue_form" onsubmit="alert('test');" action="question_issue.php">
3rd using jQuery on submit event
$('form#question_issue_form').submit(function() {
alert('test');
return false; //to avoid the reload
});
4th using jQuery on click event on the submit button
$('form#question_issue_form').click(function() {
alert('test');
return false; //to avoid the reload
});
Related
I wrote this code that should submit registration form (PHP) using jQuery and iframe.
Javascript:
<script type="text/javascript">
$(document).on('click', '#reg_form_sub', function(event) {
var error_message_lgn = $("#reg_frame").contents().text();
$('#reg_error').text(error_message_lgn);
});
</script>
HTML:
<iframe name="reg_frame" id="reg_frame" style="display:none;" src="register.php"></iframe>
<table>
<tr>
<td>
<p id="reg_error"></p>
</td>
</tr>
<tr>
<td><input type="email" name="reg_email" id="reg_form_input" placeholder="Email"></td>
</tr>
<tr>
<td><input type="password" name="reg_pass" id="reg_form_input" placeholder="Password"></td>
</tr>
<tr>
<td><input type="password" name="reg_pass_confirm" id="reg_form_input" placeholder="Confirm password"></td>
</tr>
<tr>
<td><input type="submit" name="reg_submit" id="reg_form_sub" value="Send me a confirmation email"></td>
</tr>
</table>
</form>
It is kind of working, but when I click the button the first time nothing happens.
When I click the second time I get echo from PHP (script submits the form, it creates the account etc, but I get echo only after clicking for the second time).
I just added onload and now its working
$(document).on('click', '#reg_form_sub', function(event) {
$('#reg_frame').on("load", function() {
var error_message_lgn = $("#reg_frame").contents().text();
$('#reg_error').text(error_message_lgn);
});
});
First there is no form Tag. If you planning to save data's use button click function.
$("button_id_name").click(function(){});
Why onclick method is not working without return false. When i try to use it without return false it's show answer and then values disappear..
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="addNumbers();return false;">Add</button>
</td>
</table>
</form>
Javascript:
function addNumbers() {
var firstNumber = document.getElementById('first').value;
var secondNumber = document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
}
JSFIDDLE
Why onclick method is not working without return false?
The default action of button inside the form is to submit the form when you click on the button. To prevent this from happening you need to use e.preventDefault() or return false on the button click.
Why the values disappear?
When the form is submitted the page is redirected to the URL where form is submitted. As the action attribute is not provided, the form is submitted to the same page. And as the default values are not set the values are cleared when the page is reloaded.
How to solve the problem
You can stop this from happening by using return false; in the click event handler function as the last statement and adding return before the onclick attribute before the function in the HTML.
One more thing you forgot to do is to cast the string to Number when the values are read from the DOM element. Otherwise + will be used as string concatenation operator and the result will be a joined string.
You can cast the string to number by putting +(unary + operator) before the string.
Updated fiddle: http://jsfiddle.net/tusharj/ufe7aqhw/
function addNumbers() {
var firstNumber = +document.getElementById('first').value;
var secondNumber = +document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
return false;
}
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="return addNumbers();">Add</button>
</td>
</table>
</form>
Sidenote:
I will suggest/recommend to
not to use table for formatting the UI, you can use div with simple styles
move the styles to separate stylesheet and not to use inline styles
use addEventListener to bind event
Because return false is used to stop the default action of onclick, which is submitting the form. And you obviously have not defined the post handler for your form. So if you submit your form, you will get an error.
I'm having problem trying to set the value for an input using jquery, basically you click on a link, and it takes you to a different page with a form, and I'm trying to set the value of one of the inputs of that form. I don't know why is not working. Here's my code:
page 1 (where you click the link that performs the function to set the value of the input)
<table class="tablaObjeto">
<tbody>
<tr>
<td>
<img src="img/ps4Mall.jpg">
</td>
</tr>
<tr>
<td class="precio">
<p>$<span id="precioPS4">400</span> - PS4</p>
</td>
</tr>
<tr>
<td class="botonCompra">
<a id="botonCompraPS4" href="paginaSolicitudes.html"><img src="img/BotonCompra.png"></a>
</td>
</tr>
</tbody>
</table>
page 2 (form with the input that needs to show the value)
<tr>
<td class="info">Precio: </td>
<td class="inputs"><input id="precioI" name="precio" type="text" value=""></td>
</tr>
Here's the javascript (javascript/metodos.js)
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
$("#precioI").val(retornaPrecio());
});
});
function obtienePrecioPS4() {
sessionStorage.setItem("precio", $("#precioPS4").text());
}
function retornaPrecio() {
var r = sessionStorage.getItem("precio");
return r;
}
try loading the value on document ready, see below
$(document).ready(function() {
$("#botonCompraPS4").click(function() {
obtienePrecioPS4();
});
// Load value on document ready
$("#precioI").val(retornaPrecio());
});
Your page1 and page2 should have the same javascript code above
I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.
ok should be an easy one for everyone,...
i am calling a javascript function in the tag of a button using inclick. Im trying to get that function to have three different parameters. The function then submits three different times, which should end up being three different records in a ruby table.
But i cant see why this doesnt work...
<script>
function submiteffort( elem )
{
// Elem 1
$("#effort_hours").val( $( elem ).val() );
$("#task_id").val( elem.id );
$("#effort_form").submit();
return true;
}
function medium( leave, toil, sick)
{
var dave = submiteffort(document.getElementsByName(leave));
if(dave == true){
var dave2 = submiteffort(document.getElementsByName(toil));
}
if(dave2 == true){
submiteffort(document.getElementsByName(sick));
}
}
</script>
<div class="startleft">
<table>
<tr>
<td>Leave</td>
<td><input class="dayinput" type="text" name="Leave" placeholder="0" ></td>
</t>
<tr>
<td>TOIL</td>
<td><input class="dayinput" type="text" name="TOIL" placeholder="0"></td>
</tr>
<tr>
<td>Sick</td>
<td><input class="dayinput" type="text" name="Sick" placeholder="0"></td>
</tr>
<tr>
<td>Total</td>
<td><input id="total" class="total_low" type="text" value="0" disabled="" name="Dave">
</tr>
<tr>
<td></td>
<td><button onclick="medium('Leave','TOIL','Sick')">Commit</button></td>
</tr>
</table>
</div>
For some reason this only submits 1 record into the table and i cant figure out why.
Well if you submit the form, the page refreshes, and the other 2 function calls don't execute. You'd have to use AJAX to send data to the backend in 3 separate function calls.