I have field and and one . I just need to use jQuery to add the src OR href of iframe which get value from input field on click function.
<input type="text">
<button></button>
<ifram src=""></ifram>
I need perfect Solution if anyone help.
You just need to reference the elements, and set the attribute when the user clicks the button.
$('#button').click(() => {
$('#iframe').attr('src', $('#input').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="input" type="text">
<button id="button">Set iframe</button>
<iframe src="example.com" id="iframe"></iframe>
Related
I put slider into form but found it doesn't send it's value as get parameter
https://jsfiddle.net/dimskraft/284x06da/3/
Neither slider id not slider value appear in action url. Why and how to fix?
One way to fix it would be to have a hidden input field in the form and update its value based on slider's change event.
Here, I have added input field with name input1 so you would see that in the final URL. Also, you can assign its initial value with value attribute. I have given value="0"
https://jsfiddle.net/fhp81qyb/
$( "#slider" ).slider({
change: function( event, ui ) {
$('#input1').val(ui.value);
}
});
<input type="hidden" name="input1" id="input1" value="0"></input>
Slider is not a form element; hence it is not included in the form data.
Example: https://jsfiddle.net/Twisty/qfbgh0z4/5/
HTML
<form action="http://localhost" method="get" target="_blank">
<div id="slider"></div>
<input type="hidden" name="slider-value" id="slider-value" value="0" />
<input type="submit" value="Submit">
</form>
JavaScript
$(function() {
$("#slider").slider({
slide: function(e, ui) {
$("#slider-value").val(ui.value);
}
});
});
Pressing submit doesn't change the twitch streamer.
I've tried <input> but it doesn't seem to be working.
<p> Twitch Streamer: <input type="text" name="ts" value="Ninja"><br><input type="submit" value="Submit"> </p>
<iframe src="https://player.twitch.tv/?channel=randomguyontwitch"></iframe>
I want to make it whenever someone clicks "Submit", it will change "xQcOW" to whatever is in the text box. For this example "Ninja".
To change the value of the textbox you'll need to add javascript to your code.
This should be your html file :
<p>Click the button to change the value of the text field.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myText").value = "whatever you want";
}
</script>
You can use the same principle in your code. You change the <input type="submit"> to <button></button>. Use onclick function for javascript.
You have to fetch your submit in order to change the streamer. The fetch is used by implementing PHP into your code. If you've not used PHP before you can get started by using this or this playlist.
This should do the trick:
<form method="GET">
<input type="text" name="ts" value="Ninja"><br><input type="submit" value="Submit"></form>
Then you have to concat the value of ts with the iframe to something like this:
<iframe src="https://player.twitch.tv/?channel=<?php echo $_GET["ts"] ?>"></iframe>
<input class="form-control" type="text" name="txtSpouseOccupation" id="txtSpouseOccupation" required>
<button type="button" id="next_personal" class="form-control btn-success" style="width:10%" onclick="openTab(event,'dependentTab')">Next</button>
when I click the next button it just goes to the next tab and ignores the required even the inputs are not yet filled up
You can accomplish your need by using this simple attribute required. So below I'll add example;
<html>
<head>
</head>
<body>
<form action="next.php">
<input type="text" required="true">
<input type="submit">
</form>
</body>
</html>
So when you click button to navigate to next page or tab it will show simple message near relevant text box to fill that field.
Though you used tabs you can use this.
In this case, your both elements are independent to each other. You have text/input whose functionality is to take inputs and then there is a submit button whose functionality to do something on click.
Now required will only work if you define a relation between submit button and input/text. <form> elements does that for you as it wraps both elements in it and than the submit button default action is to submit the form, and then before submitting it will check if the input values are assigned as per required=true.
But you trigger a function on the click of it. If you simply want to go to some url by submitting form
Try Form
<form action="your url" method="GET or POST">
<input type= "text" required ="true"/>
<button type = "submit" >next</button>
</form>
OR you can use javascript for it.
function newTab(){
let input = document.getElementById('text-input').value;
if(input === ""){
alert('please fill text')
return;
}
window.location.href = 'http://google.com';
}
<input type= "text" required ="true" id = "text-input"/>
<button type = "submit" onClick = "newTab()" >next</button>
Any thoughts why this redirect doesn't work at form submit? It should redirect the user to the url specified in the js function, appending the value from the input form
<form>
<div class="input-wrap">
<input type="text" id="myInputType" class="block" />
<input type="submit" name="submit" class="block" onsubmit="redirect()" />
</div>
</form>
`
<script type="text/javascript">
function redirect() {
window.location = 'http://somewhere.com?url=' + document.getElementByID('myInputType').value;
}
</script>
I think the onsubmit='' goes to a form tag like this <form onsubmit="redirect();"> not on input
You could receive the same result without using javascript.
You can use the method GET on your form and make the action the website you want to redirect to. Then all you have to do is add a name attribute to your input field and you got the same result.
Like so:
<form method="GET" action="http://somewhere.com" >
<div class="input-wrap">
<input type="text" name="url" id="myInputType" class="block" />
<input type="submit" class="block" />
</div>
</form>
This will redirect to http://somewhere.com?url=yourinput
The correct function name is document.getElementById not document.getElementByID
Submit events fire on forms, not on buttons
getElementById has a lower-case d
Submitting a form is likely to override your attempt to assign a URL to a location
You've failed to encode the input value for URLs with encodeURIComponent.
There's no reason to use JavaScript for this. Just use a regular form submission.
<!-- Set the action to the URL (without query string) you want to submit to. -->
<form action="http://somewhere.com">
<div class="input-wrap">
<!-- Give the input the name of the field you want to send -->
<input type="text" class="block" name="url" >
<!-- Don't give the submit button a name -->
<input type="submit" class="block">
</div>
</form>
There are few things need to be corrected.
use document.getElementById in place of document.getElementByID
Onsubmit is a form attribute not button so use onClick
if you want to use onSubmit then use it with form
Use encodeURIComponent function to avoid java-script errors.
In a form which contains only a
<input id="fileInput" name="BugReport" type="file" />
input field, I would like to disable the Submit button if the file input is empty (no file was chosen yet). Is there a recommended way to do this?
Add the required attribute to the input. It'll only work in browsers that support it, so you should have a JavaScript alternative (<form onSubmit="if(document.getElementById('fileinput').value == '') return false;"> or something along those lines).
Checking for whether the file input's value should always work.
if (document.getElementById("fileInput").value == "") .....
the true path of the file will be obfuscated for security reasons, but the value should always return something when a file is selected.
You can do it with JavaScript. The following code assumes you have given an id of "s" to the submit button of the form:
document.getElementById("fileInput").onchange = function() {
if(this.value) {
document.getElementById("s").disabled = false;
}
}
Obviously, you'll need to have the submit button disabled to start off. For example:
<input type="submit" id="s" disabled>
With this the best way is to have Javascript validate all the inputs as they are changed. So as the input gets changed (you can use the on change event) in Javascript enable or disable the button depending.
<input id="fileInput" name="BugReport" type="file" onchange="validateForm()"/>
This should call the javascript button which will check the input is it has a valid file and if so enable the submit button.
You can do this using jQuery
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
$(function () {
$('#submit').attr("disabled", true);
$('#fileInput').change(function () {
if ($('#fileInput').val().length == 0)
$('#submit').attr("disabled", true);
else
$('#submit').attr("disabled", false);
});
});
</script>
<input id="fileInput" name="BugReport" type="file" />
<input id="submit" type="submit" />
hope this helps
yeah, you can add something like:
<input type="submit" onclick="if (window.getElementById('fileInput').value == '') return false" />
or start with a disabled submit button and enable it when the file input is clicked and the value is different than the empty string.
check this jsbin to see what the value of a file input is (its a 'fakepath' and the name of the file)
If you are using HTML5 just add required inside input tag:
<input type='file' required />
Example:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>