I have the following code
function submitSelf() {
var adhocMainJspPane = getFrameObject('adHocMainJSPPane',openerObject);
document.Form.action="something";
document.getElementById("tabID").value = adhocMainJspPane.cubeTreeFrame.document.getElementById("arePropertiesChanged").value;
document.selfCloseForm.target="advancedPropertiesJSPPane";
var tmpSum = getTmpSum();
document.selfCloseForm.action += "&tmpChk="+tmpSum;
document.selfCloseForm.method="post";
document.selfCloseForm.submit();
}
There is no other submit in the script.
The Html is
<BODY onload="submitSelf();">
<FORM name="selfCloseForm" id="selfCloseForm" action="" method="post">
<INPUT type="hidden" id="tabID" name="tabID" value="">
<INPUT type="hidden" id="fromPage" name="fromPage" value="">
<INPUT type="hidden" id="elementNo" name="elementNo" value="">
<INPUT type="hidden" id="elementName" name="elementName" value="">
<INPUT type="hidden" id="cubeAction" name="cubeAction" value="">
<INPUT type="hidden" id="arePropertiesChanged" name="arePropertiesChanged" value="">
</FORM>
<BODY>
The above for is submitted twice on SAFARI browser. How can I prevent it from doing so.
Related
I am simply trying to display data in my console. For some reason it just flashes the result and refreshes the console. I am running the html file on server.
Code-
<html>
<body>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#fetch').click(function(){
var str = $("#fname").val();
console.log(str);
});
</script>
</body>
</html>
I am unable to debug this. Any suggestions?
You need to return false to prevent reloading:
$('#fetch').click(function(){
var str = $("#fname").val();
console.log(str);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
Another way to prevent the default behavior:
$('#fetch').click(function(e){
e.preventDefault();
var str = $("#fname").val();
console.log(str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
Clicking the submit button will submit the form, and thus refresh the page, which is the reason why the console is clearing.
Since you're using jQuery, you can add return false; right after your console.log(str);, so the original action (here, the form submission) will be cancelled.
Below is my code. I am removing some elements in html with class and it removes but I am inserting some elements with class .als-h-f before a input field. but remove function removes these also. please suggest why this is happening?
if (jQuery(this).find('input[type=hidden]').length > 0) {
jQuery('.als-h-f').remove();
jQuery(this).find('input[type=hidden]').each(function () {
jQuery('#search').before(jQuery(this));
});
}
<div class="als-cont">
<input type="hidden" class="als-h-f" name="als_id" value="11">
<input type="hidden" class="als-h-f" name="als_fname" value="Rajesh">
<input type="hidden" class="als-h-f" name="als_lname" value="Sharma">
<input type="text" name="search" id="search">
</div>
You can't find an HTML element that you've removed from the DOM. Store them in a variable before you remove them and then add them again.
$input = $('#search');
$hiddens = $('.als-h-f');
$hiddens.remove();
$hiddens.each(function(index, $hidden){
console.log($hidden);
$input.before($hidden);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="als-cont">
<input type="hidden" class="als-h-f" name="als_id" value="11">
<input type="hidden" class="als-h-f" name="als_fname" value="Rajesh">
<input type="hidden" class="als-h-f" name="als_lname" value="Sharma">
<input type="text" name="search" id="search">
</div>
I have the following html and form elements
<div class='ticket-sold' id='1' >RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>
<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="lc" value="UK" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="payer_email" value="customer#example.com" />
<input name="item_name_1" value="TICKET NUMBER 5" id="input_5" type="hidden">
<input name="item_name_2" value="TICKET NUMBER 20" id="input_20" type="hidden">
<input name="item_name_3" value="TICKET NUMBER 27" id="input_27" type="hidden">
<input type="hidden" name="amount_1" value="10" id="input_5" />
<input type="hidden" name="amount_2" value="10" id="input_20" />
<input type="hidden" name="amount_3" value="10" id="input_27" />
<input type="submit" name="submit" value="Submit Payment"/>
</form>
Basically, I have jquery that when the Div class 'ticket' is selected, the 'amount' field is updated based on the number of 'ticket' elements selected.
var counter = 0;
$(".ticket").on("click", function() {
$(this).toggleClass("green");
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
var id = $(this).attr('id');
if(!$(this).hasClass('selected')) {
$('#paypal_form #input_' + id).remove();
counter--;
} else {
counter++;
$('#paypal_form').append('<input type="hidden" name="item_name_'+counter+'" value="TICKET NUMBER ' + id + '" id="input_'+id+'">');
$('#paypal_form').append('<input type="hidden" name="amount_'+counter+'" value="' + $(".ticketprice").text() +'" id="input_'+id +'">');
}
$(".totaltickets").text(selectedIds.length -1);
$(".totalprice").text((selectedIds.length - 1)*$(".ticketprice").text());
What I would like to do, is at the same time of the onclick function on the 'ticket' div, I would like another input type ie <input type="hidden" name="item_name" value="Selected ID from Div"> added dynamically to the Form ("paypal_form"). And if the 'ticket' DIV is toggled, ie Clicked to deselect the item, the added element should be removed.
thanks
Craig.
You could approach it similar to this. It checks if the class selected is assigned to the selected div. If so, it appends a hidden input with a specific ID to the form. If the div is unselected, it removes that input from the form.
$(document).ready(function() {
$(".ticket").on("click", function() {
$(this).toggleClass("green");
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
var id = $(this).attr('id');
if(!$(this).hasClass('selected')) {
$('#paypal_form #input_' + id).remove();
} else {
$('#paypal_form').append('<input type="hidden" id="input_' + id + '">');
}
$('[name=amount]').val((selectedIds.length - 1) * $(".ticketprice").text());
$('[name=item_name]').val((selectedIds.length - 1) + " Ticket(s) selected");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ticket-sold' id='1'>RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>
<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="lc" value="UK" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="payer_email" value="customer#example.com" />
<input type="hidden" name="item_name" value="" />
<input type="hidden" name="amount" value="0" />
<input type="submit" name="submit" value="Submit Payment" />
</form>
figured it out with the following
var ii = 1;
$("input[name^='item_name']").each(function(i){
$(this).attr('name', 'item_name_' + ii++);
});
var ii = 1;
$("input[name^='amount']").each(function(i){
$(this).attr('name','amount_' + ii++);
});
thanks for your help :)
I am having this situation with many forms (for instance I show you a coupe of them):
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content" class="form-control" required=""></textarea>
<input name="code" id="code" type="hidden" value="1180224194">
<input name="postId" id="postId" type="hidden" value="167">
<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content" class="form-control" required=""></textarea>
<input name="code" id="code" type="hidden" value="95959622661">
<input name="postId" id="postId" type="hidden" value="144">
<button class="btn btn-commenta">Say something</button>
</form>
And I have some javascript like this:
<script type="text/javascript">
$("form").submit(function (e) {
e.preventDefault();
var comment = document.getElementById("content").value;
var postId = document.getElementById("postId").value;
var code = document.getElementById("code").value;
if(comment && postId && code){
$.ajax({
type: 'POST',
...SOME AJAX
});
}
else {
console.log("error");
console.log(comment);
console.log(postId);
console.log(code);
}
return false;
});
</script>
Everything works fine when I have a single form (or when I use the first one), but when I try to get the values of the inputs in a different form than the first one, I get an error and my fields are empty.
How can I tell the script to select the values (with getElementById) of the submitted form? I tried with "this" but the console tells me "Cannot read property 'getElementById' of undefined".
The id attribute should be unique in the same document, use common classes instead like :
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="1180224194">
<input name="postId" class="postId" type="hidden" value="167">
<button class="btn btn-commenta">Say something</button>
</form>
Then get the element values using this to refer to the curren form :
var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();
Hope this helps.
$("form").submit(function(e) {
e.preventDefault();
var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();
console.log(comment);
console.log(postId);
console.log(code);
if (comment && postId && code) {
console.log("ajax query");
} else {
console.log("error");
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="1180224194">
<input name="postId" class="postId" type="hidden" value="167">
<br>
<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="95959622661">
<input name="postId" class="postId" type="hidden" value="144">
<br>
<button class="btn btn-commenta">Say something</button>
</form>
Try using different id's for different elements. Id's should always be unique. If you want to use the same name for multiple elements (e.g for styling) use a class.
I suggest changing your ID's to something like:
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content1" class="form-control" required="">
</textarea>
<input name="code" id="code1" type="hidden" value="1180224194">
<input name="postId" id="postId1" type="hidden" value="167">
`enter code here`<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content2" class="form-control" required="">
</textarea>
<input name="code" id="code2" type="hidden" value="95959622661">
<input name="postId" id="postId2" type="hidden" value="144">
<button class="btn btn-commenta">Say something</button>
</form>
https://www.w3schools.com/tags/att_global_id.asp W3Schools explains:
"The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id."
When my user has completed a booking form I want the form to ask them whether they are sure about booking. I think the best way to do this is with a confirm function? But if its not please do tell.
If it is with a confirm function, how do I get the confirm function to reference the values they have set in the form?
Below is the form:
<form class="submit_date" method="post" action="insert.php" id="submit_date">
<p>Date: <input type="text" name="datepicker" id="datepicker" required></p>
<input type="radio" name="bookperiod" id="bookperiod" value="1" required/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2" required/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3" required/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4" required/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5" required/>5<br>
<select class="dropdown" id="bookroom" name="bookroom" required>
<option selected disabled hidden value=''></option>
<?php
for ($x=0; $x<sizeof($rooms_array); $x++)
{
echo "<option value='$rooms_array[$x]'>".$rooms_array[$x]."</option>";
}
?>
</select>
<input class="submit_btn" value="Submit" type="submit" name="Submit";/>
</form>
I need the confirm function to say something like:
"Are you sure you want to book $rooms_array on bookperiod at submit_date"
I STRESS I KNOW HOW TO MAKE A CONFIRM FUNCTION , BUT HOW DO I MAKE THE CONFIRM FUNCTION ECHO MY PHP VARIABLES AS IT IS A JAVASCRIPT FUNCTION
do this
<input class="submit_btn" value="Submit" type="submit" onclick="checkconfirm()"> name="Submit";/>
<script type="text/javascript">
function check confirm() {
var result= confirm('are you sure?');
if (result==true) {
//Logic to delete the item
}else{
//user pressed cancel. Do nothing
}
}
</script>
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Via: Display confirmation popup with JavaScript upon clicking on a link