onsubmit check if checked and change source - javascript

this doesn't seem to work, and resets checked...would like to only update if checked
<iframe id="time" name="time" type="text/html" src="http://time.is/"></iframe>
<form id="url" onsubmit="" method="post">
<input type="text" name="target" id="target" value="http://time.is" size="40"></form>
<input type="checkbox" name="check1" />
$('.url').submit {
if($('input[name="check1"]', this).is(':checked')) {
document.getElementById(time).src = url;
} else {
alert('no');
}
return false;
});
http://jsfiddle.net/ZZe5X/57/

Because you put check box out side the form but in code you call if ($('input[name="check1"]', this).is(':checked')) { should move check box inside form and also remove onsubmit=""
<div class="c">
<iframe id="time" name="time" type="text/html" src="http://time.is/" frameborder="0" allowtransparency="true"></iframe>
</div>
<form id="url" method="post" target="time">
<div>
<input type="text" name="target" id="target" value="http://time.is" size="40">
<input type="checkbox" name="check1" />
</div>
</form>
<script>
$(function(){
$('#url').submit (function(){
if ($('input[name="check1"]', this).is(':checked')) {
document.getElementById('time').src = url;
} else {
alert('no');
}
return false;
});
});
</script>
http://jsfiddle.net/ZZe5X/66/

There are multiple errors:
1.you need to add submit button inside html form (or have a way to trigger form submission with JavaScript), something like this:
<input type="submit"/>
2.the varible url is undefined, you may add the following line in the JavaScript
var url = $('#target').val();
3.
document.getElementById(time).src = url;
should be
document.getElementById('time').src = url;
4.change the first line of script from
$('.url').submit {
to
$('#url').submit(function() {
5.as Trinh Hoang Nhu said, check box should be inside form because you are using
if ($('input[name="check1"]', this)...
Here's the updated test

Related

why form is submitted while new window is open?

Hi I have the javascript function to open a new window and based on the value selected its populated the parent window field .But the problem is while open the new window the form is submitted .I just didn't attach the validation part. Can any body tell what might be the problem.
$(function() {
//Popup window for Nationlity
function nationalityPopUp() {
var nationalUrl="%bind(:9)";
new_Window = window.open(nationalUrl,"","width=220, height=500, left=250, top=50, scrollbars, resizable");
}
//Disable Parent Window
function parent_disable() {
if(new_Window && !new_Window.closed){
new_Window.focus();
}
}
<body onclick="parent_disable();">
<form name="Basicinfo" id="Basicinfo" method="post" action="%bind(:8)" onsubmit="return validateForm();">
<input type="text" name="Nationality" id="Nationality" value ="" />
<input type="image" src="%bind(:14)" name="Ntlylkp" onclick="nationalityPopUp();" />
</br></br>*Country Of Residency:
<input type="text" name="Residency_country" id="Residency_country" value ="" onblur="validateResCountry(value)"/>
<input type="image" src="%bind(:14)" name="Cntrylkp" onclick="countryPopUp();"/>
</br></br>*National Id:
<input id="Emirates_Id" name="Emirates_Id" type="text" value="" style="margin-left:10px;">
</br></br>*Marital Status:
<select name="marital_status" id="marital_status">
:%bind(:3);
</select>
</br> </br> *Regional Preference:
<select name="religious" id="religious">
:%bind(:4);
</select>
<input type="Submit" value="Submit And Next" style="float:right" >
</form>
</body>
return false while the for is submitted with jquery -
$('#Basicinfo').on('submit', function() {
if (some check needed) { // if want to add any check to submit the form or not
return false;
}
})

How to solve validation using multiple buttons in a form

I have a form, with a number of textboxes which a user can fill in. At the bottom of the form I have two buttons. One for canceling and one for submitting. Like the example below
<form action='bla.php' method='post'>
<input type='text' name='someTextField1'>
<input type='text' name='someTextField2'>
<input type='text' name='someTextField3'>
<input type='submit' name='submit'>
<input type='submit' name='cancel'>
</form>
And I have a js function that checks the fields for their data which I used to use for both buttons. I therefor refer to the js function in the form as below:
<form action='bla.php' method='post' name='form' onSubmit='return CheckFields()'>
The js function looks like this:
function CheckFields() {
var formname = "form";
var x = document.forms[formname]["someTextField1"].value;
var result = true;
var text = "";
if (x == null || x == "") {
text += "Dont forget about the someTextField1.\n";
result = false;
}
if(!result)
alert(text);
return result;
}
Now I want this js function to only run when using the submit and not the cancel button. When I try to move the call to the function to the submit button as below it doesn't work:
<input type='submit' name='submit' onClick='return CheckFields()'>
<input type='submit' name='cancel'>
Why? What is the smartest way of solving this? Should I leave the call to CheckFields() in the form and check within the script what button was clicked or should I remake the function to somewhat work with a button instead? Anyone have an idea or an example?
replace <input type='submit' name='cancel'> by <input type='button' name='cancel'>.Your Version actually has two submit-buttons, both of which will submit the form.
Watch this sample http://jsfiddle.net/355vw560/
<form action='bla.php' method='post' name="form">
<input type='text' name='someTextField1'>
<input type='text' name='someTextField2'>
<input type='text' name='someTextField3'>
<br/>
<input type='submit' name='submit' onclick="return window.CheckFields()">
<input type='submit' name='cancel' value="cancel" onclick="return false;">
anyway it's always better to use jquery or event listeners instead of managing events directly in the dom.
The function didnt worked because its scope was the element, if u specify window as context your function works.
First at all, it's not needed have submit button on a form if you want to use javascript to check all the fields before submitting.
I think the smartest way of doing it will be as follow:
Your form (without action, submit button, and method. Only identifing each component with id's):
<form id="formId">
<input type='text' id="text1">
<input type='text' id="text2">
<input type='text' id="text3">
<input type='button' id="accept">
<input type='button' id="cancel">
</form>
Your javascript (you have to have jQuery added):
jQuery("#formId").on("click", "#accept", function(){ //listen the accept button click
if(CheckFields()){ //here you check the fields and if they are correct
//then get all the input values and do the ajax call sending the data
var text1 = jQuery("#text1").val();
var text2 = jQuery("#text2").val();
var text3 = jQuery("#text3").val();
jQuery.ajax({
url: "bla.php",
method: "POST",
data: {
"someTextField1":text1, //In your example "someTextField1" is the name that the bla.php file is waiting for, so if you use the same here, it's not needed to change anything in your backend.
"someTextField2":text2,
"someTextField3":text3
},
success: function(){
//here you can do whatever you want when the call is success. For example, redirect to other page, clean the form, show an alert, etc.
}
});
}
});
jQuery("#formId").on("click", "#cancel", function(){ //here listen the click on the cancel button
//here you can clean the form, etc
});
function CheckFields() { //here I did a little change for validating, using jQuery.
var x = jQuery("#text1").val();
var result = true;
var text = "";
if (x == null || x == "") {
text += "Dont forget about the someTextField1.\n";
result = false;
}
if(!result)
alert(text);
return result;
}
I hope it helps you!
I handle it with this way , Hope it will help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form method="post" action="/">
<div class="container" style="background: #efefef; padding: 20px;">
<label>Encrypt and decrypt text with AES algorithm</label>
<textarea name="inputText" id = "inputText" rows="3" cols="100" placeholder="Type text to Encrypt..." maxlength="16" ></textarea>
<br>
<br>
<textarea name="inputKey" id = "inputKey" rows="1" cols="100" placeholder="Type key to Encrypt\Decrypt text with..." maxlength="16"></textarea>
<br>
<br>
<label>SBox :</label>
<div>
<div class="s-box-radios">
<ul class="sbox">
<li>
<label>SBox 1
<input id="sbox1" name="sboxOption" type="radio" value="option1" required/>
</label>
</li>
<li>
<label>SBox 2
<input id="sbox2" name="sboxOption" type="radio" value="option2" />
</label>
</li>
<li>
<label>SBox 3
<input id="sbox3" name="sboxOption" type="radio" value="option3" />
</label>
</li>
<li>
<label>SBox 4
<input id="sbox4" name="sboxOption" type="radio" value="option4" />
</label>
</li>
</ul>
</div>
<div class="s-box-display">
<textarea rows="5" cols="10"></textarea>
</div>
</div>
<div class="clear"></div>
<br>
<label>Result of Decryption in plain text</label>
<textarea name="inputCipher" rows="3" cols="100" placeholder="Encrypted Texts..." name="decrpyted"></textarea>
<br>
<input type="submit" value="Encrypt" name="Encrypt" id ="encrypt" onclick="valEncrypt()" />
<input type="submit" value="Decrypt" name="Decrypt" id ="decrypt" onclick="valDncrypt()" />
</div>
</form>
<script>
function valEncrypt()
{
var inputText = document.getElementById('inputText');
var inputkey = document.getElementById('inputKey');
if (inputText.value.length <16)
{
doAlert(inputText);
return false;
}
else
{
removeAlert(inputText);
}
if (inputkey.value.length <16)
{
doAlert(inputkey);
return false;
}
else
{
removeAlert(inputkey);
}
}
function valDncrypt()
{
var inputkey = document.getElementById('inputKey');
if (inputkey.value.length <16)
{
doAlert(inputkey);
return false;
}
alert('!Success');
}
function doAlert(element){
element.style.border = "1px solid #FF0000";
}
function removeAlert(element){
element.style.border = "1px solid #000000";
}
</script>
</body>
</html>

Remove unchanged input fields from Form while submit

In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.
I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted
jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});

Getting img.src value (path name)

I have a form for a registration page. The form contains an image that changes its src dependant on a situation.
Within a script which activates upon submission of the form, I want the form to call an alert if that image has a particular src, so I need a way of retrieving and comparing the value.
HTML:
<form action="register_submit.php" method="post" name="mainform" enctype="multipart/form-data" onSubmit="return checkForm(this);return false;">
JS:
function checkForm(f)
{if ([image src value] == "pictures/apic.png")
{
alert("error picture is apic");
return false;
}
else
{
f.submit();
return false;
}
}
Here is the relative code in full:
<script type="text/javascript">
function checkForm(f)
{if ([image src value] == "pictures/apic.png")
{
alert("error picture is apic");
return false;
}
else
{
f.submit();
return false;
}
}
</script>
<form action="register_submit.php" method="post" name="mainform" enctype="multipart/form-data" onSubmit="return checkForm(this);return false;">
<div class="required">
<label for="first_name">*First Name:</label>
<input type="text" name="first_name" id="first_name" class="inputText" onkeyup="checkFName(this.value);" onblur="checkFName(this.value);" maxlength="20" size="10" value="" />
<img id="FName_Status" name="FName_Status" src="/pictures/bad.png" style="margin-left:5px; position:absolute;" alt="FName_Status" />
</div>
(OTHER OBJECTS)
</form>
<input type="submit" name="sub" class="inputSubmit" value="Submit ยป"/>
Use this:
if (document.getElementById('FName_Status').getAttribute('src') == "pictures/apic.png")
Add an ID tag to your image (if it doesn't already have one), eg:
<img src="pictures/apic.png" id="imageId" />
Then you can reference it as follows:
if (document.getElementById("imageId").src == "pictures/apic.png")
{
...
}
EDIT
Working example here: http://jsfiddle.net/2Wtkn/2/

Javascript Form submission: undefined

This must be a simple problem but i can't figure out why it's not working. The script shall pass values of the tags field to a script on the same page.
<FORM id="form" METHOD="" ACTION="#" >
<input size="40" name='tags' id='tags' onSubmit="javascript: submitForm(this)">
<INPUT TYPE="submit" id='q' VALUE="Submit" >
<INPUT TYPE="reset" VALUE="Reset">
</FORM>
<div id='info'>This sentence will be replaced</div>
<script>
var tags;
function submitForm(form)
{
tags = form.tags.value
return false ;
}
alert(tags)
...
</script>
alert box says: undefined
You run that alert before running submitForm(). Try moving alert(tags) before return false;, inside submitForm(form).
function submitForm(form)
{
tags = form.tags.value;
alert(tags);
return false ;
}

Categories